@charset "UTF-8";
/*Grid Layout*/
/*最初にスマホ用のレイアウトを指定しています*/
body {
  margin: 0 auto;
  text-align: left;
  font-family: -apple-system, Segoe UI, Helvetica Neue, Hiragino Kaku Gothic ProN, "メイリオ", meiryo, sans-serif;
  font-size: 1.4rem;
  color: #333;
  background-color: #eceff0;
  font-size: 17px;
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
p{
  padding: 1em;}

h1 {
  font-size: 0.8em;
}
a{
  color: #333;
  text-decoration: none;
}
a:hover{
  text-decoration: none !important;
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  opacity: 0.8;
  }

a:visited{
    color: #333;
    }

.container {
  display: grid;
  grid-template-areas:
    "header"
    "title"
    "pan"
    "main"
    "nav"
    "menu"
    "footer";
/*  grid-template-rows: 4em 100px 1em 1fr 1fr 4em;*/
  grid-template-columns: 100%;
      align-items: start;

}


.container div.header {
  grid-area: header;
  background: #fff;
}

.container div.header h1 {
  font-size: 0.9em;
  line-height: 16px;
  position: relative;
  top: -17%;
}


.container div.menu {
  grid-area: menu;
  background: #fff;
  height: 65px;
  padding-top: 10px;
}

.container div.title {
  grid-area: title;
  background: #fff;
  padding: 0em 0 1em 4em;
font-size: 0.9em;
  /* text-align: center; */
  /* height: 5px; */
  border-bottom: 1px solid #ccc;
}

.container div.pan {
  grid-area: pan;
  background: #fff;
}


.container div.title a h2 {
  margin: -5px 10px 8px 10px;
  font-size: 1.1em;
}

.container div.title a h2:before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 42px;
  vertical-align: -10px;
  background: url(images/school.svg) no-repeat;
  background-size: contain;
  margin-right: 8px;
}

.container div.nav {
  grid-area: nav;
  background: #fff;
  position: relative;
}

.container div.nav .ken {
  font-size: 1.3em;
  font-weight: bold;
  margin: 15px 0 0px 10px;
}

.container div.main {
  grid-area: main;
  background: #fff;
  max-width: 900px;
}


.container div.footer {
  grid-area: footer;
  background-color: #eceff0;
  margin-bottom: 60px;
/*  bottom: 20px;*/
  position: relative;
/*  z-index: -10;*/

}


.container div.footer .right-content {
  font-size: 0.9em;
}

.container div.footer .right-content span {
  display: block;
}

.dashed-note {
  background-color: #fff;
  /* 背景色 */
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
    /* 点線1の色 */
    linear-gradient(180deg, #ccc 1px, transparent 1px);
  /* 点線2の色と太さ */
  background-size: 8px 100%,
    /* 点線1のサイズ */
    100% 2.5em;
  /* 点線2のサイズ */
  line-height: 2.5em;
  /* 文字の高さ */
  padding-bottom: 1px;
  /* 最終行の下にも罫線を引く */
}
.main h2 {
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
text-align: center;
margin: 4em 0 1em 0;
}
.main h2::before,
.main h2::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: #004445;
}

.main h2::before {
	margin-right: 20px;
}
.main h2::after {
	margin-left: 20px;
}

/*.main h2 {
  background: #1a73e8;
  padding: .75em 1em .75em 1.5em;
  color: #fff;
  position: relative;
  margin: 2.5em -2em 1.3em -2em;
  line-height: 2em;
  text-align: center;
}
.main h2:before {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
  top: -4px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  box-sizing: content-box;
  border-top: solid 2px #6495ed;
  border-bottom: solid 2px #6495ed;
  border-radius: 3px;
}*/
.headline:before {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
  top: -4px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  box-sizing: content-box;
  border-top: solid 2px #666;
  border-bottom: solid 2px #666;
}
/* .main h2 {
  position: relative;
  padding: 1rem 1rem;
  border: 2px solid #d8d8d8;
  border-radius: 10px;
  background: #f9f9f91f;
  font-size: 1.1em;
  margin-bottom: 12px;
  margin-top: 2em;
}

.main h2:before {
  position: absolute;
  bottom: -14px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 13px 12px 0 12px;
  border-style: solid;
  border-color: #d8d8d8 transparent transparent transparent;
}

.main h2:after {
  position: absolute;
  bottom: -11px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 12px 12px 0 12px;
  border-style: solid;
  border-color: #f9f9f9 transparent transparent transparent;
} */


.main-content {
  padding: 24px 0 10px 50px;
  font-size: 0.9em;
  height: 65px;
}




/*アコーディオンメニュー*/




/*アコーディオンメニュー*/
#accordion {
  position: relative;
  margin: 0 auto;
  padding: 0;
  /*  border-top: 15px solid #1b4958;
  border-bottom: 15px solid #1b4958;*/
  border-radius: 3px;
  font-size: 16px;
  line-height: 1;
}

#accordion input {
  position: absolute;
  height: 0;
  padding: 0;
}

#accordion div div {
  position: relative;
  padding: 15px 10px 12px 40px;
  /*  border-top: 1px solid #d4ebf2;
  border-bottom: 1px solid #86c5da;
  background: #add8e6;*/
}

#accordion label:first-child div div {
  border-top: 0;
}

#accordion label:last-child div div {
  border-bottom: 0;
}

#accordion div div:hover {
  opacity: 0.5;
}

#accordion div div:before {
  position: absolute;
  top: 13px;
  left: 10px;
  color: #2f7f99;
  font: 24px/100% 'Typicons';
  content: "＋";
}

#accordion div div:after {
  position: absolute;
  top: 15px;
  right: 10px;
  color: #2f7f99;
  font: 20px 'Typicons';
  content: "→";
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
}

#accordion input:checked+div div:after {
  top: 12px;
  right: 15px;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

#accordion ul {
  list-style: none;
  margin: 0 0 0 -30px;

  /*  background: #e1f1f6;*/
}

#accordion ul li a {
  display: block;
  overflow: hidden;
  height: 0;
  padding: 0px 70px;
  color: #333;
  text-decoration: none;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
}

#accordion input:checked+div ul li a {
  position: relative;
  background: none;
  line-height: 1;
  height: 2.8em;
  padding: 13px 50px 13px 40px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #ccc;
}

#accordion input:checked+div ul li:first-child a {
  border-top: 0;
  /*  box-shadow: 0 7px 7px -7px rgba(0,0,0,.5) inset;*/
}

#accordion input:checked+div ul li:last-child a {
  border-bottom: 0;
}

#accordion input:checked+div ul li a:hover {
  opacity: 0.5;
}

#accordion input:checked+div ul li a:before {
  position: absolute;
  top: 12px;
  left: 25px;
  color: #2f7f99;
  font: 16px/100% 'Typicons';
  content: "x";
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
}

/*ここまでアコーディオンメニュー*/

/*メニュー用リスト*/
.menu {}

.menu ul {
  display: flex;
  justify-content: flex-end;
  margin: 0 auto;
  padding: 0 3%;
  list-style-type: none;
}

.menu ul li {
  position: relative;
  width: 14em;
  font-size: 0.8em;
}

.menu ul li:first-child::before {
  position: absolute;
  display: block;
  content: "";
  top: 25%;
  left: 0px;
  width: 1px;
  height: 50%;
}

.menu ul li::after {
  position: absolute;
  display: block;
  content: "";
  top: 25%;
  right: 0px;
  width: 1px;
  height: 50%;
  background-color: #ccc;
}

.menu ul li a {
  display: block;
  padding: 17px 10px;
  color: #333;
  text-align: center;
  text-decoration: none;
}

.menu ul li a:hover {
  opacity: 0.5;
}

/*ここまでメニュー用リスト*/

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

  /*幅600px以下でのレイアウト*/
  .menu ul {
    display: flex;
    justify-content: flex-start;
  }

  .menu ul li {
    width: 25%;
    font-size: 0.85em;
  }

  .menu ul li a {
    padding: 12px 5px;
  }

  .menu ul {
    padding: 0 0 0 -5px;
  }
}





ul {
  list-style: none;
}

a {
  text-decoration: none;

}


.accordion-menu {
  width: 100%;
  max-width: 350px;
  margin: 10px auto 20px;
  background: #fff;
  border-radius: 4px;
}

.accordion-menu li.open .dropdownlink {
  color: #111;
  margin-left: -20px;
}

.accordion-menu li.open .dropdownlink .fa-chevron-down {
  transform: rotate(180deg);
  margin-left: -20px;
}

.accordion-menu li:last-child .dropdownlink {
  border-bottom: 0;
}

.dropdownlink {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 0px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  color: #888;
  position: relative;
  transition: all 0.4s ease-out;
}

.dropdownlink i {
  position: absolute;
  top: 17px;
  left: 16px;
}

.dropdownlink .fa-chevron-down {
  right: 12px;
  left: auto;
  position: absolute;
}

.dropdownlink2 {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 0px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  color: #888;
  position: relative;
  transition: all 0.4s ease-out;
  background: #fff;
  margin-left: 2px;
}

.dropdownlink2 i {
  position: absolute;
  top: 17px;
  left: 16px;
}

.dropdownlink2 .fa-chevron-down {
  right: 12px;
  left: auto;
  position: absolute;
}

.submenuItems {
  display: none;
  background: #fff;
}

.submenuItems li {
  border-bottom: 1px solid #B6B6B6;
  margin-left: -40px;
}

.submenuItems a {
  display: block;
  color: #727272;
  padding: 12px 12px 12px 20px;
  transition: all 0.4s ease-out;
  font-size: 12px;
}

.submenuItems a::before {
  content: "・ ";
}

.submenuItems a:hover {
  background-color: #fff;
  color: #ccc;
}

.submenuItems li.open .dropdownlink2 {
  color: #111;
}

.submenuItems li.open .dropdownlink2 .fa-chevron-down {
  transform: rotate(180deg);
}

.submenuItems2 {
  background: #fff;
  margin-left: 0px;
  display: none;
}

.submenuItems2 li {
  border-bottom: 1px solid #B6B6B6;
}

.dropdownlink svg:first-child {
  margin-right: 15px;
}

.dropdownlink2 svg:first-child {
  margin-right: 15px;
}

.site {
  border-bottom: 1px solid #eee;
  margin: 0em 0 2em 0;
}

.site span:first-child {
  color: #FFF;
  background-color: #666;
  padding: 2px 10px;
  font-size: 15px;
  line-height: 20px;
  margin: 0 5px 0 0;
  vertical-align: 0px;
  border-radius: 4px;
}

.site .zu195 {
  display: inline-block;
}

.zu195 {
  padding-left: 5px;
  padding-right: 10px;
  float: left;
  padding-bottom: 15px;
  height: 195px;
  width: 195px;
  padding-top: 3px;
}

.dai {
  padding: 10px;
  font-size: 0.8em;
  color: #FFFFFF;
  font-weight: bold;
  text-indent: 15px;
  border-radius: 3px;
  background-color: cornflowerblue;
  margin: 5px 0 5px 0;
}

.dai a {
  color: #FFFFFF;
  text-decoration: none;
}

#dai a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

#dai a:visited {
  color: #FFFFFF;
  text-decoration: none;
}

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

.nav h2 {
  margin: 0 0 0 0px;
  font-size: 0.9em;
}

.nav h3 {
  font-weight: 500;
  margin: 0 0 0 0px;
  font-size: 1.2em;
    text-align: left;
    text-indent: 1em;
}
body > div > div.nav > div.nav1 > h3.headline,
body > div > div.nav > div.nav2 > h3.headline,
body > div > div.nav > div.nav3 > h3.headline {
  text-align: left;
  text-indent: 1em;
  font-size: 1.2em;
}

body > div > div.nav > div.nav3 > h3.headline {
    text-align: left;
    text-indent: 1em;
    font-size: 1.2em;
  }
.kakomi {
  border: #eee 1px solid;
  padding: 2em;
  width: 500px;
}


/*.grid_2title {
  display: grid;
  grid-template-columns: 45px 1fr;
  grid-template-rows: 1fr;
  margin-left: 60px;
  margin-top: -2px;


.gitem1 {
  display: flex;
  align-items: center;
}

.gitem2 {}

.gitem2 h2 {
  line-height: 22px;
  font-size: 18px !important;
  margin: 10px 0 0 0;
}

.gitem2 h2 span {
  display: block;
  text-indent: 1em;
  font-size: 15px;
}
}*/
.hai:before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 48px;
  vertical-align: -22px;
  background: url(../nsozai/sassi.png) no-repeat;
  background-size: contain;
  margin-right: 8px;
}

.toku:before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 41px;
  vertical-align: -10px;
  background: url(../nsozai/rank.png) no-repeat;
  background-size: contain;
  margin-right: 0px;
}





@media screen and (max-width: 600px) {
  .site .zu195 {
    display: block;
  }

  .zu195 {
    float: none;
    margin: 0 auto;
  }

  .grid_2title {
    margin-left: 0px;
  }

  .kakomi {
    max-width: 350px;
    width: 95%;
  }


  .boxcenter {
    text-align: center;
  }
}

.maintitle {
  font-size: 1.5em;
  padding: 0.7em 1em 0.2em 0.5em;
  margin: 0 1em 1em -1em;
  background: repeating-linear-gradient(-45deg, transparent 0 2px, rgba(51, 51, 51, .05) 2px 4px);
  border-left: solid 18px #1b78d0c4;
  line-height: 1.2em;
}

.maintitle:first-letter {
  font-size: 1.2em;
}

.maintitle span {
  display: block;
  margin-left: 2em
}

.hako {
  font-size: 0.85em;
  padding-left: 50px;
}

.maker {
  color: #006699;
  margin: 0px;
  background-color: #ffff00;
  padding: 0.1em;

}
.marker_y {
  background:linear-gradient(transparent 60%, #ff6 60%);
}
.maker_y {
  background:linear-gradient(transparent 60%, #ff6 60%);
}
.panc {
  text-align: left;
}

.panc2 {
  text-align: right;
  margin: 1em 0 2em 0 !important;
}


.breadcrumb {
  padding: 0;
  margin: 0 0 0 1em;
}

.breadcrumb li {
  list-style: none;
  font-size: 11px;
  display: inline-block;
}

.breadcrumb li:last-child {
  width: 16em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}


.breadcrumb li:not(:last-child)::after {
  content: '>';
  padding: 0 0.5em;
}


.breadcrumb2 {
  padding: 0;
  margin: 0 0 0 1em;
}

.breadcrumb2 li {
  list-style: none;
  font-size: 11px;
  display: inline-block;
  text-align: left;
}

.breadcrumb2 li:last-child {
  width: 16em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  text-align: left;
}

.breadcrumb2 li:nth-child(2)::after {
  content: none;
  padding: 0 0.5em;
}
.breadcrumb2 li:not(:last-child)::after {
  content: '>';
  padding: 0 0.5em;
}


.breadcrumb3 {
  padding: 0;
  margin: 0 0 0 1em;
}

.breadcrumb3 li {
  list-style: none;
  font-size: 11px;
  display: inline-block;
  text-align: left;
}

.breadcrumb3 li:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  text-align: left;
}


.breadcrumb3 li:not(:last-child)::after {
  content: '>';
  padding: 0 0.5em;
}

/*ここからタグ*/
.tags {
  padding: 0;
}

.tags li {
  display: inline-block;
  /* 横に並べる */
  list-style-type: none;
  margin-right: 0.5em;
}

.tags li a {
  display: block;
  /* 選択範囲を広げる */
  text-decoration: none;
  padding: 0.5em 1em;
  background: lightgray;
  color: #333;
}

.tags li a:hover {
  background: #555;
  color: white;
}

/*ここまでタグ*/
.resizeimage100 {
  width: 100%;
  height: auto;
  margin: 0 auto;
}


/*ここからプロフィール枠デザイン*/
/*枠デザイン*/
.profile_box {
  margin: 0 auto 2em auto;
  border-left: solid 2px #0169cb;
  border-right: solid 2px #0169cb;
  border-bottom: solid 10px #0169cb;
  border-radius: 5px;
/*  height: 255px;*/
  padding-bottom: 1em;
  max-width: 420px;
}

.profile_box .box-title {
  font-size: 18px;
  line-height: 1.8;
  background: cornflowerblue;
  /*タイトルの背景色*/
  padding: 4px;
  text-align: center;
  color: #FFF;
  /*文字色*/
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 3px 3px 0 0;
}

/*内容*/
.profile_center {
  text-align: center;
  margin: 10px 15px 0 0;
}
.profile_figure2 {
  width: 80px;
  height: auto;
  border-radius: 50%;
  border: solid 1px #eee;
  float: left;
  margin: 10px 10px 0px 15px;
}
/*プロフィール画像*/
.profile_figure {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: solid 1px #eee;
  float: left;
  margin: 20px 10px 0px 15px;
}

.profile_figure_r {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: solid 1px #eee;
  float: right;
  margin: 6px 17px 0px 15px;
}
/*名前*/
.profile_name {
  font-weight: bold;
  font-size: 12px;
  margin: 12px 0 1px 0px;
  text-indent: -88px;
}
.profile_name2 {
  font-weight: bold;
  font-size: 12px;
  margin: 12px 23px -2px 0px;
  text-align: right;
}
/*自己紹介文*/
.profile_box p:first-of-type {
  padding: 5px 20px;
  margin: 0;
  font-size: 0.75em;
}

.profile_box p {
  padding: 5px 20px 20px 20px;
  margin: -12px 0 0 0;
  font-size: 0.75em;
}

/*リスト*/
.profile_box ul {
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

.profile_box ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none !important;
}

.profile_box ul li:before {
  font-family: "Font Awesome 5 Free";
  content: "f101";
  /*アイコンの種類*/
  font-weight: 900;
  position: absolute;
  left: 1em;
  /*左端からのアイコンまでの距離*/
  color: #0169cb;
  /*アイコン色*/
}

/*ここまでプロフィール枠デザイン*/
/*ここから目次デザイン*/
#TableOfContents>ul {
  /* font-size: smaller; */
  /* border-radius: 0.5em; */
  /* border: solid 1px lightgray; */
  padding: 0.5em 2em;
  line-height: 2;
}

.mokuji_title{
  font-size: 1.1em;
  background:linear-gradient(transparent 60%, #ff6 60%);
  margin-bottom: -10px;
}
.mokuji_title::first-letter {
  font-size: 1.4em;
  font-weight: 600;
  color: #000000;
}

/*#TableOfContents>ul:before {
  content: "目次";
  font-weight: bolder;
  margin-left: 24px;
}*/

#TableOfContents ul {
  list-style-type: decimal;
  margin: -10px 0 0 1.5em;
}

#TableOfContents li {
  padding-top: 0;
}

#TableOfContents li>ul {
  padding-left: 1em;
  width: 100%;
}

#TableOfContents a {
  font-weight: normal;
  display: block;
  border-bottom: dashed 1px lightgray;
}
#TableOfContents img{
  display: inline;
  vertical-align: middle;
  margin-right: 12px;
}
/*ここまで目次デザイン*/

.mokuji_sticky {
  position: sticky;
  top: 80%;
  background-color: #fff;
  text-align: center;
  border: 2px solid rgb(240 240 240);
  border-radius: 9px;
  padding: 0.1em 1em;
  line-height: 2em;
}

.mokuji_sticky a {
  display: block;
}

.mokuji_sticky a:first-child {
  border-bottom: dashed 1px lightgray;
}

#TableOfContents li:nth-child(n+1) {
  display: none;
}


#all-taxonomies ul{
  margin-left: -60px;
}

#all-taxonomies li a {
  line-height: 1.6em;
}

.lititle {
  margin-top: 0.7em;
  font-weight: bold;
}

.admonition {
  position: relative;
  margin: 1em 0;
  padding: .4rem 1rem;
  border-radius: .2rem;
  border-left: 0.5rem solid rgba(68, 138, 255, .4);
  background-color: rgba(68, 138, 255, .15);
}

.admonition.tip {
  border-left: 0.5rem solid rgba(50, 255, 90, .4);
  background-color: rgba(50, 255, 90, .15);
}

.admonition.warn,
.admonition.warning {
  border-left: 0.5rem solid rgba(255, 145, 0, .4);
  background-color: rgba(255, 145, 0, .15);
}

.admonition.error {
  border-left: 0.5rem solid rgba(255, 23, 68, .4);
  background-color: rgba(255, 23, 68, .15);
}

/*.admonition.error::before {
  content: "\2612";
  font-family: "Arial";
  font-size: 200%;
  position: relative;
  color: rgba(128,12,34,.8);
  top: -2px;
  left: -3rem;
  display: block;
  width: 0;
  height: 0;
}
.admonition.warn::before, .admonition.warning::before {
  content: "\26A0";
  font-weight: bold;
  font-size: 150%;
  position: relative;
  top: 2px;
  color: rgba(128,73,0,.8);
  left: -2.95rem;
  display: block;
  width: 0;
  height: 0;
}
.admonition.tip::before {
  content: "\24d8";
  font-weight: bold;
  font-size: 150%;
  position: relative;
  top: 3px;
  color: rgba(26,128,46,.8);
  left: -2.95rem;
  display: block;
  width: 0;
  height: 0;
}*/

.br-sp {
  display: none;
}

@media screen and (max-width: 1080px) {
  .br-pc {
    display: none;
  }

  .br-sp {
    display: inline-block;
  }
}

.saishin li {}

.saishin {}

.saishin a {
  display: block;
  line-height: 1.5em;
  ;
  position: relative;
  padding: 0em 0.3em 0.3em 1.3em;
}

.saishin a:before {
  position: absolute;
  content: '';
  top: 0.5em;
  left: 0.2em;
  height: 0;
  width: 0;
  border-style: solid;
  margin-left: 8px;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #3F51B5;
}



.li_folder,
.li_tag {}

.li_folder span,
.li_tag span{
  margin-left: 5px;
  color: #666;
}

.li_folder li::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url(../images/folder.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: -7px;
  margin-right: 4px;
}

.li_tag li::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url(../images/tag.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: -7px;
  margin-right: 4px;
}







.lists {}

.lists li {
  position: relative;
  font-size: 0.9em;
  line-height: 2.1em;

}

.lists li span {
  font-size: 0.7em;
  color: #727272;
}

.lists li a:before {
  position: absolute;
  content: '';
  top: 0.65em;
  height: 0;
  width: 0;
  border-style: solid;
  margin-left: -15px;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #3F51B5;
}

.list2{
  line-height: 1.2em;
}

.list2 li{
  list-style:circle;
}

.fonts {
  font-size: 0.85em;
  color: #727272;
  padding: 0 0 0 1em;

}

.dot {
  border: none;
  border-top: dashed 1px lightgray;
}

.list-article-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem;
}

.list-article-card {
  position: relative;
}

.list-article-card-section {
  position: absolute;
  width: fit-content;
}

.card_grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-gap: 10px;
  grid-template-areas: "title title"
    "img summary"
    "tag tag";
  border: 2px solid #ccc;
  border-radius: 5px;
  margin: 1em 0;
  padding: 0.5em 1em 1em 1em;
}

.card_grid_title {
  grid-area: title;
  border-bottom: 1px dashed #ccc;
  line-height: 2em;
}

.card_grid_tag {
  grid-area: tag;
}

.card_grid_img {
  grid-area: img;
}

.card_grid_img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  margin-top: 5px;
  max-height: 100px;
  border-radius: 6px;
  max-width: 100px;
  border: 1px solid #ccc;
}

.card_grid_summary {
  grid-area: summary;
}


.li_tag2 {}

.li_tag2 li {
  display: inline-flex;
}


.li_tag2 li::before {
  content: '';
  display: inlineblock;
  width: 28px;
  height: 28px;
  background-image: url(../images/tag.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: -7px;
  margin-right: 4px;
}

.card_box {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "title title"
    "img summary"
    "tag tag";
  border: 2px solid #ccc;
  border-radius: 5px;
  margin: 1em 0;
  padding: 0.5em 1em 1em 1em;
}

.card_box_title {
  grid-area: title;
  border-bottom: 1px dashed #ccc;
  line-height: 2em;
}

.card_box_tag {
  grid-area: tag;
}

.card_box_img {
  grid-area: img;
}

.card_box_img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  margin-top: 5px;
  max-height: 100px;
  border-radius: 6px;
  max-width: 200px;
}

.date1{
  text-align: right;
  font-size: 0.8em;
  border-top: 1px #ccc dashed;
}

.tagbox{
}

.tagbox ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tagbox ul li {
  display: inline-block;
  margin: 0 .3em .3em 0;
  padding: 0;
}
.tagbox ul li a {
  display: inline-block;
  max-width: 140px;
  height: 28px;
  line-height: 28px;
  padding: 0 1em;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #333;
  font-size: 13px;
  text-decoration: none;
  -webkit-transition: .2s;
  transition: .2s;
}
.tagbox ul li a:hover {
  background-color: #002a73;
  border: 1px solid #002a73;
  color: #fff;
}


.card_grid2 {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-gap: 10px;
  grid-template-areas:
  "title title"
  "img   summary"
  "tag   tag";
  border: 2px solid #ccc;
  border-radius: 5px;
  margin: 1em 0;
  padding: 0.5em 1em 1em 1em;
}

.card_grid2_title {
  grid-area: title;
  border-bottom: 1px dashed #ccc;
  line-height: 2em;
}



.card_grid2_img {
  grid-area: img;
}

.card_grid2_img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  margin-top: 5px;
  max-height: 100px;
  border-radius: 6px;
  max-width: 100px;
  border: 1px solid #ccc;
}

.card_grid2_summary {
  grid-area: summary;
}

.card_grid2_tag {
  grid-area: tag;
  grid-column:1/3;
  padding-top: 10px;
  text-align: right;
}

.saigono {
  font-size: 0.7em !important;
  display: flex;
  justify-content: center;
}
.saigono span {
 color: #ccc;
 text-decoration: none;
}
.ninki {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 130px);
  grid-template-areas: "title ninki_img"
  "ninki_date ninki_img";
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  margin: 1em 0;
  grid-template-rows: 75px 25px;
  box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
}
.ninki p{
  padding: 0 !important;
}
.ninki_titles {
  grid-area: title;
  line-height: 1.2em;
  width: 98%;
  max-width: 600px;
  font-size: 0.85em;
  padding: 1.3em 0.5em 1em 1em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: -webkit-inline-box;
}
.ninki_titles a {
  font-size: 1em;
  font-weight: bold;
  color: #333;
}

.ninki_img {
  grid-area: ninki_img;
  grid-row:1/3;
  position: relative;
}
.ribbon16 {
  display: inline-block;
  position: absolute;
  top: -6px;
  right: 10px;
  margin: 0;
  padding: 10px 0 7px;
  z-index: 2;
  width: 40px;
  font-weight: bold;
  text-align: center;
  color: white;
  font-size: 13px;
  background: #fa8383;
  border-radius: 2px 0 0 0;
  }

.ribbon16:before {
  position: absolute;
  content: '';
  top: 0;
  right: -5px;
  border: none;
  border-bottom: solid 6px #d07676;
  border-right: solid 5px transparent;
}

.ribbon16:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 10px solid #fa8383;
}
.ninki_img img{
	display: block;

  border-left: 1px solid #ccc;
	height: 100px;
	object-fit: cover;
	width: 100%;
  object-position: 0px 0px;
  padding: 1px;
}

.ninki_date {
  grid-area: ninki_date;
  font-size: 0.7em;
  text-align: right;
  padding: 0 15px 10px 0;
}

.ninki h2{
  font-size: 2em;
}
.titles {
}

.syouryaku {
/*  padding-left: 1em;
  text-indent: -1em;*/
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;}




.card_grid3 {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-gap: 10px;
  grid-template-areas:
  "img img"
  "title title"
  "summary   summary"
  "tag   tag";
  border: 2px solid #ccc;
  border-radius: 5px;
  margin: 1em 0;
  padding: 0.5em 1em 1em 1em;
}

.card_grid3_img {
  grid-area: img;
}
/*.card_grid3_img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  margin-top: 5px;
  max-height: 100px;
  border-radius: 6px;
  max-width: 100px;
  border: 1px solid #ccc;
}*/

.card_grid3_title {
  grid-area: title;
  border-bottom: 1px dashed #ccc;
  line-height: 2em;
}



.card_grid3_summary {
  grid-area: summary;
  grid-column:1/3;
}

.card_grid3_tag {
  grid-area: tag;
  grid-column:1/3;
  padding-top: 10px;
  text-align: right;
}




.listbox {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-gap: 10px;
  grid-template-areas: "img title"
  "date date";
  border: 2px solid #ccc;
  border-radius: 5px;
  margin: 1em 0;
  padding: 0.5em 1em 1em 1em;
  grid-template-rows: 100px 1em;
}
.listbox_img {
  grid-area: img;
}
.listbox_img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  margin-top: 5px;
  max-height: 100px;
  border-radius: 2px;
  max-width: 100px;
  border: 1px solid #ccc;
}

.listbox_title {
  grid-area: title;
  border-bottom: 1px dashed #ccc;
  line-height: 1.3em;
  padding: 1em 1em 1em 0;
}

.syouryaku3 {
/*  padding-left: 1em;
  text-indent: -1em;
  overflow: hidden;*/
  overflow: initial;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;}


.listbox_date {
  grid-area: date;
  line-height: 2em;
  grid-column:1/3;
  font-size: 0.7em;
  text-align: right;
  padding: 0 15px 10px 0;
  max-width: 600px;
  width: 93%;
}


.ninkiss {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-areas: "ninkiss_img title";
  border: 2px solid #ccc;
  border-radius: 5px;
  margin: 1em 0;
  grid-template-rows: 80px;
}

.ninkiss_img img {
  display: block;
  border-right: 1px solid #ccc;
  height: 80px;
  object-fit: cover;
  width: 100%;
}



.ninkiss_titles {
  grid-area: title;
  line-height: 1.2em;
  width: 90%;
  max-width: 600px;
  padding: 1em 0.5em 1em 1em;
}
.ninkiss_titles a {
  font-size: 1em;
  font-weight: bold;
  color: #333;
}

.ninkiss_img {
  grid-area: ninkiss_img;
  grid-row:1/3;
}

.icon_contents{
  display: flex;
  flex-wrap: wrap; /* 折返し指定 */
}
.icon_contents img{
  width: 45px;
  height: auto;
}
.icon_setumei {
  font-size: 0.9em;
  margin: 15px 0 10px 0;
  line-height: 1em;
}


section:before {
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 30px;
  height: 30px;
  color: #fff;
  background: #bababa;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  z-index: +1;
  display: flex;
  justify-content: center;
  align-items: center;
}
body:nth-of-type(1) section {
  counter-increment: section;
}
body:nth-of-type(1) section:before {
  content: counter(section);
}
section:first-child {
  margin-top: 1em;
}
section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}



/* PCでは非表示にする */
@media(min-width: 768px) {
	.footer_sumaho {
		display: none;
	}
	.fixed-message {
		display: none;
	}

}


table {
	width: calc(100% - 20px) !important;
	margin: 10px !important;}

  .banner_linkbox {
    padding: 5px;
    flex-wrap: wrap;
    display: flex;
}
.banner_linkbox img {
  width: 130px !important;
  height: auto;
  margin: 5px;
}

.banner_linkbox3 {
  padding: 5px;
  flex-wrap: wrap;
  display: flex;
}
.banner_linkbox3 img {
  width:90px !important;
  height: auto;
  margin: 2px;
}
.banner_linkbox0 strong{
  margin-left: 0.5em;
}

.banner_linkbox0 strong::before {
  content: "■";
  padding-right: 5px;
  position: relative;
  top: -2px;
}
.center_sp{
  margin: 0 auto;
  text-align: center;
}
.titlebox_aka {
  line-height: 44px;
  padding: 0 1em;
  border-radius: 22px;
  color: #fff;
  display: inline-block;
  margin: 0 auto;
  background-color:#f44f4f;
  border-top-color:#f44f4f;
  font-weight: bold;
}
.titlebox_naka{
  text-align: left;
  margin: 10px auto;
  display: inline-block;
}


.sticky {
	position: sticky;
	top: 0;
  position: -webkit-sticky;
}
.topimg_cover_moji{
  font-size: 1.5em;
  font-weight: bold;
  position: relative;
  top: 160px;
  left: 30%;
  width: 10em;
  word-wrap: break-word;

}
@media screen and (max-width: 600px) {
.footer_sumaho {
  }
.menu_fs {
  background: blue;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
margin-bottom: 0;
padding: 10px 0 0 0;
text-align: center;
scroll-behavior: smooth; /* スクロールをスムーズに */
}
.menu_fs li {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 5px;
  list-style: none;

}
.menu_fs a {
  text-decoration: none;
  color: white;
}
.menu_fs a span {
  display: block;
  font-size: 11px;
  margin-top: 5px;
  position: relative;
  bottom: -2px;
  color: #000;
}

.topimgs{
  margin: 0 calc(50% - 50vw);
  width: 90%;
}
/* .banner_linkbox{
margin-top: -10px;
}
.banner_linkbox img {
  width: 110px !important;
}

.banner_linkbox0 strong {
  font-size:1.5em;
  font-weight: bold;
}

.banner_linkbox0 {
  text-align: center;
} */
.pc_nomi{
  display: none;
}
.banner_linkbox,banner_linkbox0{
  display: none;
}

.profile_box {
  margin: 0 auto;
  width: 80%;
}
.icon_setumei {
  text-align: center;
}
.icon_contents {
  justify-content: center;
}
.main-content {
  padding: 8px 0 10px 0;
  font-size: 0.8em;
  height: 32px;
  text-align: center;
  /*display: none;*/
}
.main-content h2{
  font-size: 1.1em;
  margin-top: 1.5em;
}
h1 {
  font-size: 1.1em;
  line-height: 1.2em;
}
.topimg_cover_moji{
  left: 17%;
}
}
.box_h1{
  padding:1em;
  border: 1px solid #eee;
}

/* .box_h1 {
  padding: 2.5em 2em;
  border: 1px solid #eee;
  margin: 2em 0px;
  line-height: 1.5em;
  text-align: center;
  word-break: keep-all;
  font-size: 1.4em;
  background-color: #388eff78;
  color: #fff;
} */
/* .box_h1 {
  padding: 2.5em 2em;
  border: 1px solid #eee;
  margin: 2em 0px;
  line-height: 1.5em;
  text-align: center;
  word-break: keep-all;
  font-size: 1em;
  background-color: #388eff78;
  color: #fff;
  font-weight: normal;
} */

.box_h1 {
  padding: 24px 17px;
  color: #fff;
  position: relative;
  z-index: 3;
  margin: -20px -5px 30px -5px !important;
  display: block;
  text-align: center;
  word-break: keep-all;
  font-size: 0.9em;
  line-height: 1.5em;
  background-image: repeating-linear-gradient(-45deg, #010101, #333 2px, #010101 2px, #555 4px) !important;
  border-radius: 4px 4px 0 0;
}
.box_h1:before {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
  top: -4px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  box-sizing: content-box;
  border-top: solid 2px #111;
  border-bottom: solid 2px #111;
}
.box2_h1{
  padding: 1em 0;
  margin: 0em 0.5em 0em 0.5em;
  font-size: 1.2em;
  word-break: keep-all;
  line-height: 1.4em;
  text-align: center;

}



.box2_h1 h1{
  color: #fff;
  text-indent: 1em;
  font-size: 1.3em;
}
.sech1{
  display: inline;
  padding: 1em 0 2.5em 0 !important;
  margin: 0px 0px !important;
}


.box2_h1::first-letter {
  font-size: 1.4em;
  font-weight: 600;
  color: #ffffff;
}
.box2_h1 span{
  font-size: 0.65em;
  display: block;
margin: -2em 1.5em -2em 0;
}


.image_kiji{
  width: 100% !important;
}

.image_kiji img{
  object-fit: cover;
  width: 96% !important;
  height: 150px !important;
  margin: 0 auto;
}

.linkcard_grid {
  display: grid;
  position: relative;
  grid-template-areas: "head head"
  "title title"
  "img gaiyo"
  "summary summary"
  "tags tags"
  "tuduki tuduki";
  grid-template-rows: 1em auto 150px;
  margin: 0 auto 3em auto;
  grid-template-columns: 150px 1fr;
  justify-content: center;
  width: 100%;
  border: 2px solid #e6edf3;
  border-radius: 5px;
  padding: 1em;
}


.linkcard_grid h2:before,.linkcard_grid h2:after{
border-style: none;}

.linkcard_grid h2 {
  position: relative;
  padding: 2px 0.4em !important;
  border: 0px solid #d8d8d8;
  border-radius: 0px;
  background: rgb(0 0 0 / 10%);
  font-size: 1.2em;
  margin-bottom: 12px;
  margin-top: 10px;
  /* text-indent: 24px; */
}
/*.linkcard_grid h2::before,
.linkcard_grid h2::after {
    display: inline-block;
    position: absolute;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #75757580;
    content: '';
}

.linkcard_grid h2::before {
    top: calc(50% - 3px);
    left: 0;
}

.linkcard_grid h2::after {
    top: calc(50% + 3px);
    left: 5px;
}*/
.linkcard_head{
  grid-area: head;
  grid-row:1/2;
  grid-column:1/3;
}

.linkcard_head svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
  background-color: #e6edf3;
}


.linkcard_title{
  grid-area: title;
  grid-row:2/3;
  grid-column:1/3;
  padding-top: 10px;
}

.linkcard_title h2 {
  padding:0 .4em .2em;
  border-bottom: 3px solid #e6edf3;
  background-color: #ffffff;
  color: #333333;
  margin: 0 0 0 0 !important;
}

.linkcard_img{
  grid-area: img;
  grid-row:3/4;
  grid-column:1/2;
}
.linkcard_gaiyo{
  grid-area: gaiyo;
  grid-row:3/4;
  grid-column:2/3;
  line-height: 1.7em;
}

.linkcard_gaiyo ul{
  margin:0px 0 0 -30px;
}
.linkcard_summary{
  grid-area: summary;
  grid-row:4/5;
  grid-column:1/3;
  line-height: 1.4em;
  padding-top: 1em;
}
.linkcard_tags{
  grid-area: summary;
  grid-row:5/6;
  grid-column:1/3;
  font-size: 0.7em;
  color: #666;
  line-height: 2.5em;
  word-break: keep-all;
}
.linkcard_tags a{
  border: 1px solid #6495ed;
  padding: 4px 10px;
  border-radius: 2px;
  margin: 3px;
}
.linkcard_tags svg{
position: relative;
top: 4px;
margin-left: 2px;
}
.tag_aj{
  line-height: 1.6em;
  margin-top: 6px;
  padding: 0 10px;
}


.tag_aj svg{
  position: relative;
  top: 2px;
  margin-left: 4px;
}

.folder_aj{
  line-height: 1.6em;
  margin-top: 6px;
  padding: 0 10px;
}


.folder_aj svg {
  position: relative;
  top: 2px;
  margin-left: 4px;
  margin-right: 2px;
}
.tag_aj2{
  line-height: 1.6em;
  margin-top: 6px;
  padding: 0 10px;
}


.tag_aj2 svg{
  position: relative;
  top: 3px;
  margin-left: 4px;
}

.folder_aj2{
  line-height: 1.6em;
  margin-top: 6px;
  padding: 0 10px;
}


.folder_aj2 svg {
  position: relative;
  top: 4px;
  margin-left: 4px;
  margin-right: 2px;
}
.label {
  box-sizing: border-box;
  white-space: nowrap;
  border-radius: 0.2em;
  padding: 0.12em 0.4em 0.14em;
  margin: 0 0.6em;
  text-align: center;
  color: #ffffff;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  display: inline;
  white-space: nowrap;
  vertical-align: baseline;
  position: relative;
  top: -0.15em;
  background-color: #999999; }

  .label.color-blue { background-color: #6f9ad1; }
.label.color-red { background-color: #d37c7c; }
.label.color-green { background-color: #9bc268; }
.label.color-orange { background-color: #dea154; }
.label.color-yellow { background-color: #e9d641; }
.label.color-purple { background-color: #9f83d1; }

.linkcard_tuduki{
  grid-area: tuduki;
  grid-row:6/7;
  grid-column:1/3;
  text-align: center;
  margin-top: 1em;
  font-size: 0.9em;
  color: #666;
  border: 1px solid #ccc;
  position: relative;
  right: 0;
  padding: 14px 12px;
  border-radius: 5px;

}
.linkcard_tuduki a::before{
  content: "- ";
  display: inline;
}
.linkcard_tuduki a::after{
  content: " -";
  display: inline;
}

.linkcard_auto_tuduki{
  grid-area: tuduki;
  grid-row:6/7;
  grid-column:1/3;
  text-align: center;
  font-size: 0.9em;
  color: #666;
  border: 1px solid #ccc;
  position: relative;
  right: 0;
  padding: 14px 12px;
  border-radius: 5px;
  width: fit-content;
  margin: 1em auto;

}
.linkcard_auto_tuduki a::before{
  content: "- ";
  display: inline;
}
.linkcard_auto_tuduki a::after{
  content: " -";
  display: inline;
}

.balloon-011 {
  position: relative;
  padding-top: 20px;
  margin-bottom: 2em;
}

.balloon-011 > div {
  display: flex;
  align-items: center;
  gap: 0 6px;
  position: absolute;
  top: 0;
  left: -10px;
  width: 100%;
}

.balloon-011 span {
  color: #333333;
  font-size: .7em;
  background-color: #fff;
  padding: 0 3px 0 3px;
  margin-left: -4px;
}

.balloon-011 img {
  max-width: 45px;
  height: 100%;
  border: 3px solid #e6edf3;
  border-radius: 50%;
  background-color: #fff;
}

.balloon-011 p {
  padding: 20px 15px 20px 15px;
  border: 3px solid #e6edf3;
  border-radius: 5px;
  color: #333333;
  font-size: .9em;
  line-height: 20px;
}




.balloon-111 {
  position: relative;
  padding-top: 20px;
  margin-bottom: 2em;

}

.balloon-111 > div {
  display: flex;
  align-items: center;
  gap: 0 6px;
  position: absolute;
  top: 0;
  left: -10px;
  width: 100%;
}

.balloon-111 span {
  color: #333333;
  font-size: .7em;
  background-color: #fff;
  padding: 0 3px 0 3px;
  margin-left: -4px;
}

.balloon-111 img {
  width: 55px;
  height: 55px;
  border: 3px solid #e6edf3;
  border-radius: 50%;
  background-color: #fff;
  object-fit: contain;
}

.balloon-111 p {
  padding: 20px 15px 20px 51px;
  border: 3px solid #e6edf3;
  border-radius: 5px;
  color: #333333;
  font-size: .9em;
  line-height: 20px;
}

.balloon-112 {
  position: relative;
  padding-top: 20px;
  margin-bottom: 2em;
}

.balloon-112 > div {
  display: inline-flex;
  align-items: center;
  gap: 0 6px;
  position: absolute;
  top: 0;
  right: 5px;

}
.balloon-112 span {
  color: #333333;
  font-size: .7em;
  background-color: #fff;
  padding: 0 3px 0 3px;
  margin-left: -4px;
}

.balloon-112 img {
  width: 55px;
  height: 55px;
  border: 3px solid #e6edf3;
  border-radius: 50%;
  background-color: #fff;
  object-fit: contain;
}

.balloon-112 p {
  padding: 15px 60px 15px 15px;
  border: 3px solid #f7bcbc85;
  border-radius: 5px;
  color: #333333;
  font-size: .9em;
}

.balloon-111 h3{
  text-align: left !important;
  margin-left: 60px;
}

.balloon-112 h3{
  text-align: right !important;
  margin-right: 65px;
}




.balloon-211 {
  position: relative;
  padding-top: 20px;
  margin-bottom: 2em;

}

.balloon-211 > div {
  display: flex;
  align-items: center;
  gap: 0 6px;
  position: absolute;
  top: 0;
  left: -10px;
  width: 100%;
}

.balloon-211 span {
  color: #333333;
/*  font-size: .7em;*/
  background-color: #fff;
  padding: 0 3px 0 3px;
  margin-left: -4px;
}

.balloon-211 .kao{
  width: 85px;
  height: 85px;
  border: 3px solid #e6edf3;
  border-radius: 50%;
  background-color: #fff;
  object-fit: none;
  padding: 0px 0 0px 0px;
  margin: 0px 0 0 0;
}
.balloon-211 p {
  padding: 20px 15px 20px 91px;
  border: 3px solid #e6edf3;
  border-radius: 5px;
  color: #333333;
  font-size: .9em;
  line-height: 20px;
}
.balloon-211 h3 {
  text-align: left;
  margin-left: 90px;
}

.balloon-212 {
  position: relative;
  padding-top: 20px;
  margin-bottom: 2em;
}

.balloon-212 > div {
  display: inline-flex;
  align-items: center;
  gap: 0 6px;
  position: absolute;
  top: 0;
  right: 5px;

}
.balloon-212 span {
  color: #333333;
/*  font-size: .7em;*/
  background-color: #fff;
  padding: 0 3px 0 3px;
  margin-left: -4px;
}

.balloon-212 .kao{
  width: 85px;
  height: 85px;
  border: 3px solid #e6edf3;
  border-radius: 50%;
  background-color: #fff;
  object-fit: none;
  padding: 0px 0 0px 0px;
  margin: 0px 0 0 0;
}


.balloon-212 p {
/*  padding: 15px 95px 15px 15px !important;*/
  padding: 15px 15px 15px 15px !important;
  border: 3px solid #f7bcbc85;
  border-radius: 5px;
  color: #333333;
  font-size: .9em;
}

.balloon-212 h3 {
  text-align: right;
  margin-right: 95px;
}
.balloon-012 {
  position: relative;
  padding-top: 20px;
  margin-bottom: 2em;
}

.balloon-012 > div {
  display: inline-flex;
  align-items: center;
  gap: 0 6px;
  position: absolute;
  top: 0;
  right: 0;
  width: 137px;
}
.balloon-012 span {
  color: #333333;
  font-size: .7em;
  background-color: #fff;
  padding: 0 3px 0 3px;
  margin-left: -4px;
}

.balloon-012 img {
  max-width: 45px;
  height: 100%;
  border: 3px solid #f7bcbc85;
  border-radius: 50%;
  background-color: #fff;
}

.balloon-012 p {
  padding: 15px;
  border: 3px solid #f7bcbc85;
  border-radius: 5px;
  color: #333333;
  font-size: .9em;
}


.site_grid {
  display: grid;
  position: relative;
  grid-template-areas: "img gaiyo";
  grid-template-rows: 150px;
  margin: 0 auto 1em auto;
  grid-template-columns: 150px 1fr;
  justify-content: center;
  width: 100%;
  padding: 10px 0 0 7px;
}

.site_grid_img{
  grid-area: img;
  grid-row:1/2;
  grid-column:1/2;
}
.site_grid_gaiyo{
  grid-area: gaiyo;
  grid-row:1/2;
  grid-column:2/3;
  line-height: 1.7em;
}

.site_grid_gaiyo ul{
  margin:0px 0 0 -30px;
}



.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: DeepSkyBlue;
  display: block;
  order: -1;
}
.tab-label {
  color: White;
  background: LightGray;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  background: DeepSkyBlue;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}

.site_sam{
  border: 3px solid #eee;
  border-radius: 5px;
  box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
/*  width: calc(100% - 10px); /* 40px は padding の幅を考慮した値 */
  max-width: 100%;
  height: auto;
}


.site_sam2{
  border: 3px solid #eee;
  border-radius: 5px;
  box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
/*  width: calc(100% - 10px); /* 40px は padding の幅を考慮した値 */
  max-width: 300px;
  height: auto;
}
.kotae_box{
  text-align: right;
  padding-right: 1em;
  position: relative;
  top: -30px;
}
.kotae_box a{
  color: red;}

.kiji_img{
  border: 1px solid #eee;
  border-radius: 2px;
  box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
}
.kiji_img2{
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
}
.title_mae {
  display: inline;
  position: relative;
  margin-right: -1px;
  margin-top: 20px;
}
.title_mae3 {
  display: inline;
  position: relative;
  margin-right: -1px;
  top:3px;
}
.calender {
  display: inline;
  position: relative;
  top: 4px;
}
.summary_wo {
  color: #757575;
  font-weight: normal;
  display: block;
  font-size: 0.8em;
  margin: 10px 0 0px 8px;
}
.url_inyo{
  text-align: center;
  margin: 0 auto;
  font-size: 0.9em;
}
.ob-title-inner{
  position: relative;
  padding: 0rem 0rem !important;
  border: 0px solid #d8d8d8 !important;
  border-radius: 0px !important;
  background: #333 !important;
  font-size: 1.1em;
  margin-bottom:0px !important;
  margin-top: 0em !important;
}
.ob-title-inner:after,.ob-title-inner:before {
  border-width: 0 0 0 0 !important;
  border-style: none !important;
}
.yaji01 {
  border-left: dashed 4px #ddd;
  height: 30px;
  margin: -30px 0 22px 3em;
  position: relative;
}

.yaji01::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -17px;
  left: -10px;
  border-style: solid;
  border-width: 17px 8px 0 8px;
  border-color: #ddd transparent transparent transparent;
}

.btn_01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  margin:0 auto;
  padding: .9em 2em;
  border: 1px solid #757575;
  border-radius: 5px;
  background-color: #fff;
}
.qst_box{
  display: flex;
  margin-bottom: 2.5em;
  border-bottom: 1px solid lightgray;
  padding-bottom: 5px;
}
.qst_box div:first-child {
  width: 50px;
  font-size: 40px;
  font-weight: bold;
  padding-right: 10px;
  margin-top: -7px;
}

.link_kousiki {
  display: flex;
  border: 1px solid #333;
  position: relative;
  padding: 15px;
  flex: 1;
}

.link_kousiki:before {
  display: inline-block;
  position: absolute;
  top: -8px;
  left: 21px;
  line-height: 1;
  padding: 0 8px;
  background: #fff;
  font-size: 14px;
  content: "公式サイト";
}
.link_kousiki .hida{
  width: 150px;
}

.link_kousiki .hida img{
  border: 1px solid #ccc;
}

.link_kousiki .migi {
  width: 100%;
  padding: 10px 1em 0 1em;
}
.link_kousiki_setu {
  font-size: 0.9em;
  color: #666;
  margin: 5px;
}
.link_kousiki_setu img{
  display: inline;
  position: relative;
  top: 4px;}

  .img_print{
    width: 100%;
  }
  .img_print img{
    width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid;
    border-color: #ddd;
    box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%)
  }
.kanren_under{
  margin-top: 3em;
}


.harf{
  width: 50%;
}

.harf img{
  display: inline;
}
.link_url{
  font-size: 0.8em;
  margin: -12px 0 10px 0;
  white-space: nowrap;
	overflow: hidden;
}
.favorite0 {
  margin: -15px 0 0px 6px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 30em;
  font-size: 0.8em;
  text-overflow: ellipsis;
}

.favorite {
  margin: 0px 0 30px 2px;
  white-space: nowrap;
  overflow: hidden;
  max-width:30em ;
  text-overflow: ellipsis;
}
.favorite1 {
  margin: -6px 0 15px -3px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 30em;
  text-overflow: ellipsis;
}


.link_url2 {
  font-size: 0.8em;
  margin: -25px 0 30px 9px;
  white-space: nowrap;
  overflow: hidden;
  max-width:30em ;
  text-overflow: ellipsis;
}

.spcenter b{
  font-size: 1.8em;
}

------------------------------------
 Pagination
------------------------------------ */
#paging {
    margin: auto;
    text-align: center;
  }
  #paging ul {
    padding: 0;
  }
  #paging i {
    font-weight: bold;
  }
  #paging .not-allow i {
    font-weight: normal;
    opacity: 0.3;
  }
  .pagination {
    display: flex;
    justify-content: center;
    margin: 3em 0 0 0;
    list-style: none;
    border-radius: .25rem;
  }
  .pagination li {
    flex: 1 1 42px;
    max-width: 42px;
    min-width: 27px;
    float: left;
  }

  .pagination > li > a {
    display: inline-block;
    width: 100%;
    padding: 6px 0;
    color: inherit;
    background: #fff;
    /*border: 1px solid #ddd;*/
    border-right: 0;
    text-align: center;
  }
  .pagination > li:last-child > a,
  .pagination > .not-allow:first-child > a:hover {
    /*border-right: 1px solid #ddd;*/
  }
  .pagination > .active > a,
  .pagination > li > a:hover {
    color: #fff;
    background: #42b983;
  }
  .pagination > .active > a:hover,
  .pagination > .not-allow > a:hover {
    cursor: text;
  }
  .post #paging {
    margin: 20px 0 40px 0;
  }

  .page-item {
      margin-left: 5px;
      margin-right: 5px;
  }
  .linkcard_title h2 span:first-of-type {
    color: #666;
    font-size: 1.3em;
    margin: 0 3px 0 -8px;
    font-weight: bold;
    border: solid 2px #e6edf3;
    padding: 1px 13px 0px 13px;
    /* margin-bottom: 6px; */
    position: relative;
    top: 5px;
    border-radius: 2px;
    background-color: #e6edf3;
}
.kijinumber {
  font-size: 1.3em;
  font-weight: bold;
  display: inline;
  background-color: #fff;
  padding: 0px 5px;
  margin-left: -3px;
  position: relative;
  /* left: -15px; */
  margin-left: 20px;
}
.kazu_d{
  color: #f44f4f;
  font-size: 1.5em;
}
h3 {
  background: linear-gradient(transparent 30%, #ffff667a 50%);
  text-align: center;
}
.setu{
  padding:1em;
}

.setu ol li {
  margin-bottom: 10px;
}

.setu ol li::first-line {
  font-weight: bold;
  font-size: 1.1em;
}

.setu ol {
  list-style-type: none;
  counter-reset: my-counter;
  margin: 0;
  padding: 0;
}
.setu ol li:before {
  content: counter(my-counter)".";
  counter-increment: my-counter;
  font-weight: bold;
  margin-right: 0.2em;
  font-size: 1.2em;

}

.emojilist{
  margin: 0 0 0 -30px;
  font-size: 0.9em;
}
.emojilist li {
  padding-left: 2em;
  text-indent: -2em;
  margin-bottom: 10px;
}

.kanren_box_top{
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 150px 150px;
  gap: 0px;
}
.kanren_box{
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 150px 150px;
  gap: 10px;
}
.kanren_box2{
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: repeat(3, 200px);
  gap: 10px;

}
.kanren_titles {
  font-size: 0.9em;
  position: relative;
  top: -83px;
  background-color: #f9f9f9cc;
  padding: 0 0.3em;
  width: 96%;
  margin: 0 auto;
  font-weight: 600;
}
.kanren_titles2 {
  font-size: 0.8em;
  position: relative;
  padding: 8px 2px 0 5px;
  margin: 0 auto;
  font-weight: 300;

}

.kanren{
  font-size: 0.9em;

}

.kanren_img img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0px;
  border: 1px solid #757575;
}


.osusume_box {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: 1.1em 1fr;
  grid-gap: 10px;
  grid-template-areas: "title title" "img setumei";
  border: 2px solid #f4f4f5;
  border-radius: 5px;
  margin: 1em 0;
  padding: 1em 1em 1em 1em;

}
.osusume_title {
  grid-area: title;
}
.osusume_img {
  grid-area: img;
}

.osusume_setu {
  grid-area: setumei;
  line-height: 1.3em;
  padding: 1em 1em 1em 0;
}




.kaisetu{
  font-size: 0.95em;
}
.kaisetu div {
  margin: 5px 1em 1em 2em;
  font-size: 0.9em;
  line-height: 1.3em;
  color: #555;
}


.headline {
  padding: 13px 17px 14px 17px;
  color: #fff;
  background: #666;
  height: 50px;
  margin-left: 0em !important;
  position: relative;
  z-index: 3;
  margin-top: 30px !important;
  display: block;
}

.category-list { margin:0; padding:1px 0 0 0; border-top:1px solid #ddd; }
.category-list li { margin:0; padding:0; background:none; position:relative; }
.category-list a {
  display:block; padding:0 5px 0 15px; height:60px; line-height:50px; overflow:hidden; border:1px solid #ddd; margin:-1px 0 0 0;
  font-size:16px; text-decoration:none; background:#fff; position:relative;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
.category-list > li:first-child > a { border-top:none; }
.category-list a:hover { background:#f5f5f5; color:#333;
   text-decoration: none !important;
   -webkit-transform: scale(1.00);
   transform: scale(1.00);
   opacity: 0.5;
}

.category-list li a .count {
  float: right;
  top: 10px;
  position: relative;
  height: 40px;
  line-height: 40px;
  background: #bbb;
  color: #fff;
  padding: 0 8px;
  min-width: 46px;
  text-align: center;
  font-size: 11px;
  border-radius: 4px;
}

.hidden-div {
  display: none;
}
.column{
  column-count: 2;
}
.column li {
  line-height: 2em;
}

.column li:before {
  content: '';
  display: inline-block;
  position: relative;
  left: -5px;
  top: -4px;
  width: 5px;
  height: 5px;
  background: #f00;
}
 .column li:nth-child(odd) {
  color: #f4a006;
  font-weight: bold;
}
.rankbox > a:nth-child(1) > .ninki > .ninki_titles {
  background-image: url('/images/okan1.png');
  background-repeat: no-repeat;
  position: relative;
  background-position-x: 8px;
  background-position-y: 21px;
  background-size: 21px;
}
.rankbox > a:nth-child(2) .ninki > .ninki_titles {
  background-image: url('/images/okan2.png');
  background-repeat: no-repeat;
  position: relative;
  background-position-x: 8px;
  background-position-y: 21px;
  background-size: 21px;
}

.rankbox > a:nth-child(3) .ninki > .ninki_titles {
  background-image: url('/images/okan3.png');
  background-repeat: no-repeat;
  position: relative;
  background-position-x: 8px;
  background-position-y: 21px;
  background-size: 21px;
}

.rankbox > a:nth-child(n + 3) .ninki > .ninki_titles {
  background-image: url('/images/okan4.png');
  background-repeat: no-repeat;
  position: relative;
  background-position-x: 8px;
  background-position-y: 21px;
  background-size: 21px;
}


.category-list2 { margin:0; padding:1px 0 0 0; border-top:1px solid #ddd; }
.category-list2 li { margin:0; padding:0; background:none; position:relative; }
.category-list2 a {
  display:block; padding:0 5px 0 15px; height:50px; line-height:50px; overflow:hidden; border:1px solid #ddd; margin:-1px 0 0 0;
  font-size:16px; text-decoration:none; background:#fff; position:relative;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
.category-list2 > li:first-child > a { border-top:none;
  background-image: url('/images/okan1.png');
  background-repeat: no-repeat;
  position: relative;
  background-position-x: 8px;
  background-position-y: 21px;
  background-size: 21px; }


  .category-list2> li:nth-child(2) > a {
    background-image: url('/images/okan2.png');
    background-repeat: no-repeat;
    position: relative;
    background-position-x: 8px;
    background-position-y: 21px;
    background-size: 21px;
  }

  .category-list2> li:nth-child(3) > a {
    background-image: url('/images/okan3.png');
    background-repeat: no-repeat;
    position: relative;
    background-position-x: 8px;
    background-position-y: 21px;
    background-size: 21px;
  }
  .category-list2> li:nth-child(n + 3) > a {
    background-image: url('/images/okan4.png');
    background-repeat: no-repeat;
    position: relative;
    background-position-x: 8px;
    background-position-y: 21px;
    background-size: 21px;
  }



.category-list2 a:hover { background:#f5f5f5; color:#333;
   text-decoration: none !important;
   -webkit-transform: scale(1.00);
   transform: scale(1.00);
   opacity: 0.5;
}

.category-list2 li a .count {
  float: right;
  top: 4px;
  position: relative;
  height: 40px;
  line-height: 40px;
  background: #bbb;
  color: #fff;
  padding: 0 8px;
  min-width: 46px;
  text-align: center;
  font-size: 11px;
  border-radius: 4px;
}

.text_s1{
  font-size: 1.2em !important;
  font-weight: 600;
}
.p_box1{
  margin-bottom: 0.5em !important;
}
.p_box1::first-letter {
  font-size: 1.2em;
  font-weight: 600;
}
.title_s {
  margin: 10px 10px 3px 10px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.yoyaku50 {
  padding: 0 10px;
  font-size: 0.9em;
  color: #757575;
  height: 58px;
  overflow: hidden;
}
.list_e{
  margin-left: -40px;
  line-height: 2em;
  font-size: 0.9em;
}
.list_e li:first-letter {
  font-size: 1.5em;
}
.box_waku01 {
  border: 2px dashed;
  padding: 1em;
  font-size: 0.9em;
  border-radius: 5px;
  border-color: #666;
}


.prev-next-link a {
  border-bottom: 1px #ddd solid;
  display: block;
  text-decoration: none;
  padding: 14px 40px;
  color: #0bd;
}
.prev-next-link a:hover {
  background-color: #f6f6f6;
}
.prev-next-link a:first-child {
  border-top: 1px #ddd solid;
}
.prev-next-label {
  font-size: .825rem;
  color: #000;
  margin-bottom: 10px;
}

/* Arrows */
.prev-link {
  background: url(../images/arrow-prev.svg) no-repeat 10px center;
}
.next-link {
  background: url(../images/arrow-next.svg) no-repeat right 10px center;
}
.prev-link,
.next-link {
  background-size: 16px 28px;
}

/* Larger devices */
@media ( min-width: 600px) {
  .prev-next-link {
    display: flex;
  }
  .prev-next-link a {
    flex: 1;
  }
  .prev-next-link a,
  .prev-next-link a:first-child {
    border: none;
  }
  .next-link {
    text-align: right;
  }


}

.huki-text2 p {
  margin-bottom: 0;
}
.huki-text2 {
  display: inline-block;
  position: relative;
  vertical-align: top;
  padding: 1em;
  border-radius: 4px;
  background: #fff;
  text-align: left;
  border: 1px solid #ccc;
  margin-top: -20px;
  margin-left: -10px;

}
/* blocksからの移植 */
.is-style-huki-under .huki-text2 {
  max-width: 100%;
}

@media (min-width: 1030px){
  .is-style-huki-mind .huki-text2 {
      max-width: calc(100% - 108px);
      border-radius: 32px;
  }

  .is-style-huki-mind .huki-text2:before {
      position: absolute;
      top: 44px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: inherit;
      content: "";
  }
  .huki-left.is-style-huki-mind .huki-text2:before {
      left: -28px;
  }
  .huki-right.is-style-huki-mind .huki-text2:before {
      right: -28px;
  }}
@media (max-width: 1029px) {

  .is-style-huki-mind .huki-text2 {
      max-width: 100%;
      border-radius: 32px;
  }}

.is-style-huki-underimg .huki-text2 {
  padding: 1.25em 1em 1.75em 1em;
}
@media (max-width: 1029px){
  .is-style-huki-underimg .huki-text2 {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
  }}
/* pc-sp */
@media (min-width: 1030px) {

  .huki-text2 {
      max-width: calc(100% - 108px);
  }
  .is-style-huki-underimg .huki-text2 {
      max-width: 100%;
  }
}
@media (max-width: 1029px) {

  .huki-text2 {
      max-width: calc(100% - 99px);
  }
  .is-style-huki-under .huki-text2 {
      max-width: 100%;
  }
}



#fixbox {
  position: sticky;
  top: 20px;
  font-size: 0.9em;

}

#toc {
  overflow-y: scroll;
  max-height: calc(80vh - 150px);
  border: 1px solid #ccc;
  padding: 0 10px 10px 10px;
  margin-bottom: 2em;
}
.lileft {
  margin-left: 30px;
  margin-top: -10px !important;
  font-size: 0.9em !important;
  color: #888 !important;
}



#toc ul {
  margin-left: -37px;
}

#toc ul li {
  font-size: 0.9em;
  line-height: 30px;
  margin-top: 12px;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 10px;
	white-space: nowrap;
	overflow: hidden;
}


#toc ul li:not(.lileft) span {
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 1px solid #666;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  line-height: 22px;
  margin-right: 4px;
  font-size: 15px;
}

#toc ul li a span {
  position: relative;
  margin-right: 6px;
}

#toc::-webkit-scrollbar {
	width: 10px;/*幅*/
}
#toc::-webkit-scrollbar-track {
	background: transparent;/*背景色を消す*/
}
#toc::-webkit-scrollbar-thumb {
	background: #ccc;/*可動部のみ背景色を付ける*/
	border-radius: 10px;
}


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

  /*幅601px以上でのレイアウト*/
  body {}




  h1 {
    font-size: 1.1em;
    line-height: 2.5em;
  }

  h2 {
    font-size: 0.9em;
    font-weight: normal;
  }
  .main-content h2{
    font-size: 1.3em;
  }

  .container {
    display: grid;
    grid-template-areas:
      "header menu"
      "title title"
/*      ".. pan"*/
      "main nav"
      "main nav"
      "footer footer";
/*    grid-template-rows: 4em 100px 12px 4em 1fr 1fr 4em;*/
    margin: 0 auto;
    grid-template-columns: 1fr 550px;
    justify-content: center;
    width: 96%;
      /*0823昔は90*/
    max-width: 1300px;
    /*0823昔は1100*/
  }
  .container div.nav {
    /* max-width: 450px; */
    margin-left: 1px;
    /* margin-right: 10px; */
    border-radius: 5px;
    padding: 1em 2em 2em 2em;
    align-self: normal;
}
 /*   .container div.nav {
    max-width: 450px;
    margin-left: 15px;
    margin-right: 10px;
    border-radius: 5px;
    padding: 1em 1em 2em 1em;
    align-self: normal;
  display: grid;
    grid-template-areas:
    "nav_title"
    "nav1"
    "nav2"
    "nav3"
    "navi_tophe"
    ;
    grid-template-columns:90%;
    grid-gap:10px 5%;
}*/

.container div.nav_title {
  grid-area: nav_title;
margin: 2em 0 1em 0;
font-size: 1.5em;
text-align: center;}

.container div.nav1 {
  grid-area: nav1;
  margin-top: -27px;}

  .container div.nav2 {
    grid-area: nav2;
  margin-top: -27px;}

    .container div.nav3 {
      grid-area: nav3;
      margin-top: -27px;}

      .container div.navi_tophe {
        /* grid-area: navi_tophe; */
        position: initial;
        bottom: -55px;
        width: 100%;
        /* margin: 0 auto; */
        text-align: center;
        margin-right: 2em;
        padding-right: 4em;
    }









  .container div.main {
    border-radius: 5px;
    max-width: 900px;
      /*0823昔は800*/
    padding: 0em 2em 2em 2em;
    position: relative;
  }

  .container div.pan {
    max-width: 600px;
  }
}


/*ここまでGrid Layout*/

/*TOPへ戻るボタン*/
.page_top {
  margin-bottom: 10px;
  background: #0169cb;
  display: grid;
  place-content: center;
  height: 50px;
  border: 1px solid #ccc;
  margin-top: 16px;
}


.title_m{
  display: inline;

}




.linkbox1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 130px);
  grid-template-areas: "title linkbox1_img"
  "linkbox1_date linkbox1_img";
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  margin: 1em 0;
  grid-template-rows: 75px 25px;
  box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
}
.linkbox1 p{
  padding: 0 !important;
}
.linkbox1_titles {
  grid-area: title;
  line-height: 1.2em;
  width: 98%;
  max-width: 600px;
  font-size: 0.85em;
  padding: 1.3em 0.5em 1em 1em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: -webkit-inline-box;
}
.linkbox1_titles a {
  font-size: 1em;
  font-weight: bold;
  color: #333;
}

.linkbox1_img {
  grid-area: linkbox1_img;
}

.linkbox1_img img{
	display: block;

  border-left: 1px solid #ccc;
	height: 100px;
	object-fit: cover;
	width: 100%;
  object-position: 0px 0px;
  padding: 1px;
}
.linkbox1_date {
  grid-area: linkbox1_date;
  font-size: 0.7em;
  text-align: right;
  padding: 0 15px 10px 0;
}



.rankbox > a:nth-child(1) > .linkbox1 > .linkbox1_titles {
  background-image: url('/images/okan1.png');
  background-repeat: no-repeat;
  position: relative;
  background-position-x: 8px;
  background-position-y: 21px;
  background-size: 21px;
}
.rankbox > a:nth-child(2) .linkbox1 > .linkbox1_titles {
  background-image: url('/images/okan2.png');
  background-repeat: no-repeat;
  position: relative;
  background-position-x: 8px;
  background-position-y: 21px;
  background-size: 21px;
}

.rankbox > a:nth-child(3) .linkbox1 > .linkbox1_titles {
  background-image: url('/images/okan3.png');
  background-repeat: no-repeat;
  position: relative;
  background-position-x: 8px;
  background-position-y: 21px;
  background-size: 21px;
}

.rankbox > a:nth-child(n + 3) .linkbox1 > .linkbox1_titles {
  background-image: url('/images/okan4.png');
  background-repeat: no-repeat;
  position: relative;
  background-position-x: 8px;
  background-position-y: 21px;
  background-size: 21px;
}


@media screen and (max-width : 480px){
  .linkbox1 {
    grid-template-areas: "title title"
    "linkbox1_img linkbox1_img";
    grid-template-rows: 66px 110px;
  }
    .linkbox1_img img{
      border-left: 0px solid #ccc;
      padding: 10px 0 0 0;
      width: 210px;
      margin: 0 auto;

    }
    .linkbox1_date{
      display: none;
    }
    .linkbox1_titles {
      padding: 10px;
      border-bottom: 1px solid #d8d8d8;
    }

  .rankbox > a:nth-child(1) > .linkbox1 > .linkbox1_titles {
    background-image: url('/images/okan1.png');
    background-repeat: no-repeat;
    position: relative;
    background-position-x: 10px;
    background-position-y: 13px;
    background-size: 21px;
  }
  .rankbox > a:nth-child(2) .linkbox1 > .linkbox1_titles {
    background-image: url('/images/okan2.png');
    background-repeat: no-repeat;
    position: relative;
    background-position-x: 10px;
    background-position-y: 13px;
    background-size: 21px;
  }

  .rankbox > a:nth-child(3) .linkbox1 > .linkbox1_titles {
    background-image: url('/images/okan3.png');
    background-repeat: no-repeat;
    position: relative;
    background-position-x: 10px;
    background-position-y: 13px;
    background-size: 21px;
  }

  .rankbox > a:nth-child(n + 3) .linkbox1 > .linkbox1_titles {
    background-image: url('/images/okan4.png');
    background-repeat: no-repeat;
    position: relative;
    background-position-x: 10px;
    background-position-y: 13px;
    background-size: 21px;
  }
  .title_m {
    font-size:0.9em;
}
.huki-left .huki-imgname {
  margin-right: 20px;
}




  }
  .huki-imgname p {
    margin-bottom: 0;
    padding-top: 4px;
    opacity: 0.54;
    font-size: 12px;
    width: 8em;
    margin: 0 0 0 -13px;
}
.table_ichiran{
  table-layout:auto !important;
  font-size: 0.9em;
}

/* 2列目のスタイル */
.table_ichiran tr td:nth-of-type(2){
  text-align: left;
}

/* 3列目のスタイル */
.table_ichiran tr td:nth-of-type(3){
  text-align: left;
}


.title_mae2 {
  display: inline;
  position: relative;
  margin-right: -1px;
  margin-top: 13px;
  top:3px;
}
.printsums {
  display: grid;
  grid-template-areas: "printsums_yo_titles"
  "printsums_img"
  "printsums_yo_kaisetu"
  "printsums_link";
  border: 1px solid #757575;
  /* grid-template-rows: 1.5em 264px 2em; */
  margin: 1em 5px;
  box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
  display: inline-grid;
  border-radius: 7px 7px 0 0;
  width: 32%;
  position: relative;
}

.printsumss {
  grid-template-areas:
   "printsums2_yo_titless"
   "printsumss_img";
  border: 1px solid #c0c0c0;
  grid-template-rows: 2.4em auto;
  margin: 1em 0px;
  box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
  display: inline-grid;
  border-radius: 7px 7px 0 0;
  width: 19.5%;
  position: relative;
}


.printsums2_yo_titless {
  display: table; /* テーブルレイアウトを使用 */
  width: 100%; /* 横幅を全体に広げる */
  height: 4em; /* 高さを固定 */
  background-color: #09304a;
  color: #fff;
  text-align: center; /* 水平方向に中央揃え */
  font-size: 0.85em;
  padding: 5px 1em;
}

.printsums2_yo_titless span {
  display: table-cell; /* テーブルセルとして動作 */
  vertical-align: middle; /* 上下中央揃え */
  padding: 0 0; /* テキストの左右に少し余白を追加 */
}


.printsums p{
padding: 0 !important;
}

[class^="printsums_yo_titles"] span:first-child {
  font-size: 0.75em;
  color: #fff34b;
  margin-left: -2px;
  position: absolute; /* 子要素に絶対位置を設定 */
  top: 10px;
  left: 10px;
}

[class^="printsums_yo_titles"] {
    grid-area: printsums_yo_titles;
    padding: 18px 0.5em 0em 0.5em;
    height: 4em;
    z-index: 1;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -25px;
    /* line-height: 1.2em; */
    /* width: 98%; */
    /* max-width: 600px; */
    /* font-size: 0.85em; */
    /* border-radius: 7px 7px 0 0; */
    /* line-height: 1.4; */
    /* place-content: center; */
    /* border-bottom: 1px solid #ccc; */
    /* font-weight: bold; */
    /* margin-top: 2px; */
}




.printsums_yo_kaisetu {
  grid-area: printsums_yo_kaisetu;
  line-height: 1.2em;
/*  width: 98%;*/
  /* max-width: 600px; */
  font-size: 0.85em;
  padding: 1em 0.5em 1em 1em;
  margin-top: 2px;
  background-color: #cb9c9c0f;
  height: fit-content;
  z-index: 1;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-top: -20px;
  text-align: center;

}


.printsums_yo_kaisetu:first-letter {
  font-size: 1.1em;
  color: #000;
}

.printsums_img {
grid-area: printsums_img;
text-align: center;
margin-top: 20px !important;
overflow: hidden;
}
.printsums_img img{
/*object-fit: contain;*/
padding: 5px;
margin: 0 auto;
transition: transform .6s ease; /* ゆっくり変化させる */
}


/*
.printsums_img img:hover {
  transform:scale(1.2);
 position: relative;
  z-index: 100!important;
  opacity: 1!important;
  top: 25px;
}*/
.printsumss_img {
  grid-area: printsumss_img;
  text-align: center;
  margin-top: 20px !important;
  overflow: hidden;
  }
    /*.printsumss_img img{
object-fit: contain;
  padding: 5px;
  margin: 0 auto;
  transition: transform .6s ease;
  }*/
  /* .printsumss_img img:hover {
     transform:scale(1.2);
     position: relative;
      z-index: 100!important;
      opacity: 1!important;
      top: 25px;
    }*/

.printsums_date {
grid-area: printsums_date;
font-size: 0.7em;
text-align: right;
padding: 0 15px 10px 0;
}

.onlinesums {
  display: grid;
  grid-template-areas:
  "onlinesums_titles onlinesums_titles onlinesums_titles"
  "online_img onlinesums_setu onlinesums_setu"
  "online_kaisetu online_kaisetu online_kaisetu";
  border: 1px solid #757575;
  /* grid-template-rows: 1.5em 264px 2em; */
  margin: 1em 5px;
  box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
  width: 99%;
  position: relative;
}

.onlinesums_titles {
  grid-area: onlinesums_titles;
  padding: 18px 0.5em 0.6em 1em;
  color: #000;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  font-weight: bold;
  background-image: repeating-linear-gradient(-45deg, #010101, #333 2px, #010101 2px, #555 4px);
  color: #fff;
}

.redbg{
  background-image: repeating-linear-gradient(120deg, #ff4242, #ff4242 5px, #ec2a2a 5px, #ec2a2a 10px)
}

.onlinesums_setu {
  grid-area: onlinesums_setu;
  padding: 1em;
  color: #000;
}
.onlinesums a {
  display: contents !important;
}
.online_img {
  grid-area: online_img;
  text-align: center;
  margin: 20px !important;
  overflow: hidden;
  width: 180px !important;
  height: 180px !important;
}
  .online_img img{
  /*object-fit: contain;*/
  padding: 5px;
  margin: 0 auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
  }

  .online_kaisetu {
    grid-area: online_kaisetu;
    line-height: 1.2em;
    font-size: 0.85em;
    padding: 1em 0.5em 1em 1em;
    margin-top: 2px;
    background-color: #cb9c9c0f;
    height: fit-content;
    z-index: 1;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: -20px;
    text-align: center;

  }





.print_main_grid {
display: grid;
position: relative;
/*grid-template-rows: 250px;*/
grid-template-areas: "img gaiyo";
margin: 0 auto 3em auto;
/*grid-template-columns: 350px 1fr;*/
justify-content: center;
width: 100%;
padding: 10px 0 0 7px;
margin-left: -20px;
}

.print_main_grid_img{
grid-area: img;
grid-row:1/2;
grid-column:1/2;
}
.print_main_grid_gaiyo{
grid-area: gaiyo;
grid-row:1/2;
grid-column:2/3;
line-height: 1.7em;
padding-top: 35px;
}

.print_main_grid_gaiyo ul{
margin:0px 0 0 -30px;
}
.print_sumt {
/*height: 200px;*/
width: 100%;
}

.title_mae {
display: inline;
position: relative;
margin-right: -1px;
top: 2px;
}

.print_sumt img {
  width: 77%;
  height: auto;
  /* object-fit: cover; */
  /* object-position: -34px -45px; */
  border: 2px solid #eee;
  box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
  margin-left: 2em;
  max-width: 375px;
  margin: 0 auto;
}
.print_sumt img::after{
  content: "ここ";
  position: relative;
}

.icon_mae{
  display: inline-block;
    position: relative;
    top: 10px;
    margin-right: 6px;
}

.mondai_waku {
grid-area: printsums_link;
  text-align: center;
  padding: 1em;
  margin-top: -115px;
  z-index: 10;
}
.mondai_waku a{
  color: #fff;
}



.print_sec_tile {
  display: grid;
 grid-template-areas: "printsums_img"
 "printsums_yo_titles"
 "printsums_date";
 border: 1px solid #75757559;
 border-radius: 5px;
 margin: 1em 5px;
 box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
 width: 23%;
}

.kakudai {
/*  width: calc(100% + 120px);*/
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
margin: 0 auto !important;
}



.link_pdf {
  border: 1px solid #ccc;
  text-align: center;
  padding: 1em 30px;
  width: 100%;
/*  max-width: fit-content;*/
  margin: 0 auto;
  background-image: repeating-linear-gradient(-45deg, #eee, #eee 2px, #fff 2px, #fff 4px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.link_pdf span{
  background-color: #fff;
}
.link_pdf img{
  display: inline;
}

.link_pdf span {
  top: -9px;
  position: relative;
  border: 1px solid #757575b8;
  padding: 4px 10px 4px 7px;
  margin-left: 5px;
}

.kiji_title {
  text-align: center;
  color: #fff;
  margin: 0 5% -12px 0;
  width: 100%;
  background-image: repeating-linear-gradient(-45deg, #010101, #333 2px, #010101 2px, #555 4px) !important;
  border-radius: 4px 4px 0 0;
}

.kiji_title img{
  display: inline-block;
  vertical-align: middle;
}
.kiji_title h1{
  display: inline-block;
  vertical-align: middle;
}
.kiji_title h1 span{
  display: table-cell;

}
.kiji_title hr{
border-top: 3px solid #fff;
margin-top: -8px;
padding-bottom: 5px;
}

/*.container div.kiji_title a h1:before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 42px;
  vertical-align: -10px;
  background: url(images/school.svg) no-repeat;
  background-size: contain;
  margin-right: 8px;
}*/
.navs1 .table_st {
  margin-left: -10px;
  width: calc(100% + 20px);
}
.table_st table {
  border-collapse: collapse;
  margin: 0 10px 0 10px !important;
  padding: 0;
  width: 70%;
  table-layout: fixed;
  text-align: left;
  }
/*  thead th{
  padding: 1em .8em;
  border-right: 5px solid#fff;
  }*/
  .table_st table tr {
  background-color: #fff;
  padding: .35em;
  }
  .table_st table tr:nth-child(even){
  background-color: #f9f9f9;
  }
  .table_st table td {
    padding: 12px;
  border: 1px solid #eeeeee;
  border-collapse: collapse;
  }
  .table_st table th {
    /* font-size: .75em; */
    border: 1px solid #eeeeee;
    width: 10em;
    padding: 13px;
    font-weight: normal;
}
.sideh3 {
  background: initial;
  font-size: 2em !important;
  position: relative;
  top: 80px;
  left: 20px;
  color: #fff;
  font-weight: bold;
}
/* 前ページ、次ページへのリンク */

.nextbox {
  font-size: 0.8em;
  padding: 1em 0;
}
.nextbox hr {
  border: dashed 1px lightgray
}
.xPrevNextLink a{
  display: contents;}

.prev-next_img{
/*  width: 80px;
  height: auto;*/
}
.prev-next_img img{
  width:100%;
}

.xPrevNextLink{
  display: grid;
  grid-template-columns:15% 30% 30% 15%;
  grid-template-rows: 1fr;
  grid-gap: 10px;
}
.nextbox_bun{
  padding: 0.5em 0 0 0;
}
.xPrevNextLink_next::after {
  content: "≫";
  font-size: 1.2em;
  font-weight: bold;
  position: relative;
  top: 0px;
}

.xPrevNextLink_prev::before {
  content: "≪";
  font-size: 1.5em;
  margin-right: 3px;
  font-weight: bold;
  position: relative;
  top: 3px;
}
.xPrevNextLink_prev {
  padding-right: 1em;
}
.xPrevNextLink_next {
  padding-left: 1em;
  padding-top: 0.8em;
}
/*.xPrevNextLink::after {
  display: block;
  content: "";
  clear: both;
}

.xPrevNextLink_prev {
  display: block;
  float: left;
}
*/

.kiji_title_810 h2 {
  background: #1a73e8;
  padding: 2.5em 1em 2.5em 1.5em;
  color: #fff;
  position: relative;
  margin: 2.5em -2em 1.3em -2em;
  line-height: 2em;
  font-size: 1.5em;
}

.kiji_title_810 h2 :before {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
  top: -4px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  box-sizing: content-box;
  border-top: solid 2px #6495ed;
  border-bottom: solid 2px #6495ed;
  border-radius: 3px;
}

.tilebox{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
align-items: baseline;
  margin: 0 auto !important;
}

.tilebox .printsums{
  float: left;
}

.kiji_icon {
  top: -8px;
/*  filter: brightness(0) invert(1);*/
  margin-left: 10px;
}


.textbox_1 {
  font-size: 13px;
  padding: 0.1em 1em 0.5em 1em;
  line-height: 1.3em;
}
.textbox_1::first-letter{
  font-weight:600;
  font-size: 1.1em;
}
.page_list{
  margin-top: 1em;
}

.page_list h4{
  font-size: 1.2em;
  margin: 1.5em 0 -0.5em 0;
  background: linear-gradient(transparent 50%, #ffff667a 90%);
}

.page_list ul{
  line-height: 1.6em;
}

.page_list ul li{
  list-style: disc;
}
.page_list ul li span{
  font-weight: bold;
}

.link_list{
  margin: 1em 0;
}
.link_list div{
  margin: 1em 0;
}
.list_folder{
}

.list_folder li{
  line-height: 1.5em;
}

.list_folder span{
  margin-left: 10px;
}
.list_moji {
  margin: 15px 0 5px 2em;
  border-bottom: 1px solid #ccc;
}

.list_moji span{
margin-left: 2em;
margin-top: -5px;
font-size: 0.85em;
color: #666;}

.list_moji img{
display: inline;
position: relative;
top: 6px;
margin-right: 3px;
opacity: 0.4;
}


.list_moji_sam {
  display: flex;
  gap: 0px 10px;
  flex-wrap: wrap; /* フレックスアイテムを折り返すために必要 */
  justify-content: flex-start;
  margin: 1em 1em 1em 1em;
  padding: 1em;
  position: relative;
}

/*.list_moji_sam::before {
  content: "プリントイメージ";
  font-weight: bolder;
  margin-left: 24px;
  position: absolute;
  top: -8px;
  background-color: #fff;
  padding: 0 10px;
  left: -10px;
}*/

.af_print::after {
  content: "プリント";
  font-size: 0.6em;
  margin-left: 5px;
}


.list_moji_sam a {
  width: calc(100% / 5 - 10px) !important;
  text-decoration: none;
  display: block;
  /*flex: 1;  各アイテムを等しい幅にするために必要 */
  box-sizing: border-box; /* ボックスモデルを変更しないようにするために必要 */
  margin: 0; /* マージンをリセット */
  padding: 0; /* パディングをリセット */
}

.list_moji_sam img {
  max-width: 100%;
  border: 1px solid #cccccc96;
  height: auto;
  width: 100%; /* 画像を親要素に合わせて幅を100%に設定 */
}

/* 6番目から2行目に配置するためのスタイル */
.list_moji_sam a:nth-child(n+6) {
  margin-top: 1em; /* 2行目に配置するためにマージンを追加 */
}

.matome h3{
  font-size: 2em;
  text-indent: 13px;
}
.matome h3 span{
  font-size: 0.6em;
  margin-left:5px ;
}

summary{
  margin: 1.8em 0 0 1.5em;
}
       /* 初期状態のスタイル */
       summary::before {
        content: "＋ 画像なし一覧";
    }

    /* 開いた状態のスタイル */
    details[open] summary::before {
        content: "- クリックして閉じる";
    }


.link_tags{
    font-size: 1em;
    margin: 27px 0 -16px 25px;
}

.link_tags span:first-child{
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 1em;
}

.link_tags span:first-child:before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url(/images/tag.png);
  background-size: contain;
  top: 10px;
  position: relative;
  left: -10px;
  margin: 0 0 0 0;
}

.link_tags span{
  font-size: 0.7em;
  margin: 0 7px 0 4px;
}

summary {
  display: block;
  list-style: none;
}







.main .sp_non h2{
text-align: center !important;
}
.box_title {
  position: relative;
  margin: 2em auto;
  width: 100%;
  padding: 1em;
  border: 3px solid #b20023;
  border-radius: 8px;
  background: #fff; /* ボックスのデフォルト背景色を白に設定 */
  opacity: 1.0;
}

.box_title .box_title_a {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 15px;
  padding: 0 10px;
  line-height: 1;
  font-size: 18px;
  background: #fff; /* タイトルの背景色を白に設定 */
  color: #b20023;
  font-weight: bold;
}
a .box_title_a {
  opacity: 1.0;
  background-color: #FFF;
}
a .box_title_a:hover {
  opacity: 1.0;
  background-color: #FFF;
}

  .box_title p {
  padding: 15px 20px;
  margin: 0;
  }

.kotae a{
  color:red;
  font-size: 1.3em;

}
.kotae img {
  display: inline;
  width: 24px;
  height: 24px;
  position: relative;
  top: 4px;
  margin: 0 3px 0 5px;
}


.top_print {
  display: grid;
  position: relative;
  grid-template-areas: "img gaiyo"
  "img osusume";
  grid-template-columns: 63% 35%;
/*grid-template-rows: 0fr 1fr;*/
}
  .top_print_img{
  grid-area: img;
  grid-row:1/3;
  grid-column:1/2;
  }

  .top_print_img .thumbnails img {
    border: 2px solid #eee;
    box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
    /* padding: 1em 10px; */
    /* width: 80%; */
    height: auto;
    /* margin: 37px auto 0 10px; */
    margin: 31px 0;
}
  .top_print_gaiyo{
  grid-area: gaiyo;
  grid-row:1/2;
  grid-column:2/3;
  line-height: 1.7em;
  padding: 1em 0 10px 15px;
  }
  .top_print_osusume{
    grid-area: osusume;
    grid-row:2/3;
    grid-column:2/3;
    padding: 0 0 1em 15px;
  }


.top_print_setu{
    position: relative;
    top: 47px;
    left: 10px;
    display: inline-block;
    background-color: #ffffff;
    color: #888;
    padding:5px 25px;
    z-index: 10;
  }




  .subsetu, .top_tags{
    margin: 15px 34px;
  }

  .subsetu img{
float: left;
margin-top: -5px;
  }

  .subsetu span{

    position: relative;
    border: 1px solid #757575b8;
    padding: 4px 10px 4px 7px;
    margin-left: 5px;
  }

.top_tags{
  padding: 10px 0;
}
.top_tags strong{
  font-size: 0.8em;
}
.top_tags svg{
  position: relative;
  top: 2px;
}

.top_tags a:nth-child(2) svg {
  /* fillプロパティを使用して色を指定します */
  fill: #FF0000; /* 例: 赤色 */
}

.top_tags a:nth-child(3) svg {
  /* fillプロパティを使用して色を指定します */
  fill: #FFFF00; /* 例: 赤色 */
}
.top_tags a:nth-child(4) svg {
  /* fillプロパティを使用して色を指定します */
  fill: #00FF00; /* 例: 赤色 */
}

.top_tags a:nth-child(5) svg {
  /* fillプロパティを使用して色を指定します */
  fill: #FF00FF; /* 例: 赤色 */
}
.top_tags a:nth-child(6) svg {
  /* fillプロパティを使用して色を指定します */
  fill: #0000FF; /* 例: 赤色 */
}
.date_tag svg{
  fill:#fff;
}
.date_tag a{
  margin-left: 8px;
}
.date_tag a:first-child{
  margin-left: -5px;
}

.top_tags a{
  margin-left: 15px;
  font-size: 0.8em;
}

  .top_tags span {
    position: relative;
    border: 1px solid #75757552;
    padding: 4px 10px 4px 7px;
    border-radius: 5px;
    margin-left: 5px;
    line-height: 2em;
    white-space: nowrap;
}

.print_down, .print_open {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 1.7em 10px;
  text-align: center;
  vertical-align: middle;
  margin: 1em 3em;
  display: block; /* flexからblockに変更 */
  position: relative; /* 位置指定の基準点を設定 */
}

.print_open a, .print_down a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* 必要に応じてリンクの下線を消す */
}

.print_open a::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url(/images/article_black_24dp.svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 10px;
}

.print_down a::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url(/images/down.webp);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 10px;
}

.main_hukibox{
  margin: 2em auto 0 auto;
  max-width: 780px;
}

.main_hukibox100 {
  padding: 2rem 0;
  margin: 0 calc(50% - 47vw);
  width: 93vw;
  background: #fff;
}

.main-content span{
  display: block;
}
.main-content a{
  font-size: 1.3em;
}
.kobetu0 {
  text-align: center;
}
.kobetu0 div img{
  display: block; /* 画像をブロック要素に変更して中央揃えにする */
  margin: 0 auto 2.5em auto; /* 左右の余白を自動で設定して中央揃え */
  box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15); /* ボックスシャドウのスタイル */
}

.kobetu0 span {
  color: #666666;
  font-size: 0.9em;
  position: relative;
  top: -39px;
  display: block;
  background-color: #f9f9f9;
  height: 2.5em;
  padding: 5px 0 0 0;
  margin: 0 2px;
  border-bottom: 1px solid #ddd;
}


.kobetu1 {
  display: grid;
 /* grid-template-columns: 33% 33% 33%;*/
  /*grid-template-rows: repeat(auto-fit, 230px);*/
  gap: 10px;
  place-content: center;
  clear: both;/*要素の打ち消し */
}


.kobetu1 div{
  text-align: center;
  border: 1px solid #75757529;
  padding-bottom: 10px;
}

.kobetu1 img{
  object-fit:fill;
/*  box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);*/
}

.kobetu1 span{
  color: #666666;
  font-size: 0.9em;
}

.kobetu1 span:before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: -7px;
  background: url(/images/pdf_icon.png) no-repeat;
  background-size: contain;
  margin-right: 3px;
}
.title_img_sec{
  display: inline;
  position: relative;
  top: 15px;
  margin-right: 10px;
}
.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

}

.mannaka {
display: flex;
justify-content: center;
align-items: center;}


@media screen and (max-width : 480px){
	html,
	body {
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
    background-color:#fff;
	}
  .kanren_box_top {
    display: grid;
    grid-template-columns: repeat(4, 92px);
    grid-template-rows: repeat(2, 92px);
    gap: 1px;
}
  .kanren_box_top .kanren_titles{
    font-size: 0.5em;
    position: relative;
    top: -70px;
  }

  .favorite0 {
    display: none;}

  .resizeimage100 {
    width: 100%;
    height: auto;
}
.container div.main {
  width: 98%;
  margin: 0 auto !important;
  max-width: 370px;
  border-top: 1px solid #ccc;
}
.sidepc{
  display: none;
}
.menu{
  display: none;
}
.linkcard_gaiyo{
  font-size: 0.7em;
}
.linkcard_gaiyo ul {
  margin: 6px 0 0 -38px;
}
.linkcard_gaiyo ul li{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 2.2em;
  width: 14em;
}

.site_grid_gaiyo{
  font-size: 0.7em;
}
.site_grid_gaiyo ul {
  margin: 6px 0 0 -38px;
}
.site_grid_gaiyo ul li{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 2.2em;
}
.sp_none{
  display: none;
}
.link_kousiki .hida img{
  margin-top: 13px;
}
.kanren_under{
  text-align: center;
}
.link_url2 {
  max-width:23em ;
}
.ninki_titles {
  text-overflow: initial;
  overflow: initial;
  white-space: initial;
}

.linkcard_title h2 {
  font-size: 0.9em;}
  .fsimg{
    display: inline;
    margin-bottom: -1px;
    margin-top: -7px;
    width: 35px;
    height: auto;}

    .kanren_box{
      display: grid;
      grid-template-columns: 150px 150px;
      grid-template-rows: 150px 150px 150px;
      width: 87%;
    margin: 0 auto;
    gap: 10px;
    }
    .kanren_titles {
      font-size: 0.9em;
      position: relative;
      top: -119px;
      background-color: #f9f9f9cc;
      padding: 10px 0.3em;
      width: 96%;
      margin: 0 auto;
      font-weight: 600;
    }

    .kanren_box2{
      display: grid;
      grid-template-columns: 150px 150px;
      grid-template-rows: repeat(6, 190px);
      gap: 20px;
      width: 87%;
      margin: 0 auto;

    }
    .kanren_titles2 {
      font-size: 0.8em;
      position: relative;
      padding: 4px 2px 0 5px;
      margin: 0 auto;
      font-weight: 300;

    }

    .osusume_setu {
      padding: 5px 0em 1em 1px;
  }
  .ninki_date{
    display: none;
  }
  .ninki_titles {
    padding: 10px;
  }
  .column{
    column-count: 1;
  }
  .rankbox > a:nth-child(1) > .ninki > .ninki_titles {
    background-position-x: 8px !important;
    background-position-y: 12px !important;

  }
  .rankbox > a:nth-child(2) .ninki > .ninki_titles {
    background-position-x: 8px !important;
    background-position-y: 12px !important;

  }

  .rankbox > a:nth-child(3) .ninki > .ninki_titles {
    background-position-x: 8px !important;
    background-position-y: 12px !important;
  }

  .rankbox > a:nth-child(n + 3) .ninki > .ninki_titles {
    background-position-x: 8px !important;
    background-position-y: 12px !important;

  }
  .syouryaku3 {
      overflow: hidden;
    -webkit-line-clamp: 4;
}
/*p, .post h5 {
  margin-bottom: -10px;
}*/

.huki-text2 {
  margin-top: -20px;
  margin-left: 15px;
  padding: 2px;
}
.banner_linkbox3 img {
  width:28vw !important;
}
#toc {
  max-height: calc(80vh - 250px);
  max-width: calc(100vh - 300px);
  margin: 1em auto;
}
.title_m {
  line-height: 1.2em;

}

/*.kakudai {
  width: 100%;
  margin: 0 0;
  text-align: center;
}*/

.printsums {
  width: 46%;
}
.kiji_title{
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  background-color: #333333;
  color: #fff;
  margin-bottom: -12px;
}

.kiji_title div:nth-child(2){
  justify-self: start;
}


.main-content {
 height: auto;
 margin-bottom: 10px;
/* border-bottom: 1px solid #ccc;*/

}
.s_menu_img{
/*hanging-punctuation: ; */
 display: inline;
    margin-bottom: -15px;
    position: relative;
    top: -5px;
}

.container div.footer {
  bottom: 12px;
}



.label {
  display: block;
  margin-bottom: 5px;
  top: 15px;
}
.title_img_sec{
  display: none;
}


.panc2{
  margin: 1em 0 1em 0 !important;
}
.main hr:nth-child(2){
  margin-bottom: 2em;
}

.spcenter{
  text-align: center;
}

.main h2 {
  font-size: 0.9em;
  margin: 2.5em 0em 1.3em 0em;
}
.kiji_title {
  display: block;
  text-align: center;
  background-color: #333333;
  color: #fff;
  margin: 0 0 0 0;
  padding: 0 5px;
}
.kiji_title h1 {
  display: block;
}
.kiji_title img{
  display: none;
}
.container div.title {
  padding: 2em 0 0em 0em;
  display: none;

}
.printsums {
  width: 96%;
}
.mondai_waku {
  margin-top: -190px;
}
.kobetu {
  grid-template-columns: 88%;
}

.top_print {
  display: grid;
  position: relative;
  grid-template-areas:
  "img"
  "gaiyo"
  "osusume";
  grid-template-columns:100%;
/*  grid-template-rows: 1fr 1fr;*/
}
.top_print_img {
  grid-row: 1/2;
  grid-column: 1/2;
  padding: 0 10px;
}
.top_print_gaiyo {
  grid-row: 2/3;
  grid-column: 1/1;
  padding: 2em 10px 0 10px;

}
.top_print_osusume {
  grid-row: 3/4;
  grid-column: 1/1;
  padding: 0 10px;
}

.print_open:before {
  left: 30px;
}
.print_down:before {
  left: 16px;
}
.mannaka {
  padding: 0 30px;
}
.mondai_waku{
display: none;
  }
.container div.title a h2 {
    margin: -25px 10px 8px 18px;
    font-size: 0.8em;
    text-align: left;
}
.container div.title a h2:before {
    display: none;
}
.print_sec_tile{
  width: 45%;
}

}

.adsen{
  margin: 1em 0;
}


.kobetu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  /* margin: 0 auto !important; */
  margin: 0 0 0 -35px;
}

.kobetu div{
  text-align: center;
  padding-bottom: 10px;
 max-width: 380px;
/*   max-width: 240px;*/
margin: 0 5px;
}

.kobetu img{
  object-fit:fill;
/*  box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);*/
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.kobetu span {
  color: #666666;
  font-size: 0.9em;
  position: relative;
  top: -39px;
  display: block;
  background-color: #f9f9f9;
  height: 2.5em;
  padding: 5px 0 0 0;
  margin: 0 2px;
  border-top: 1px solid #ddd;
}

.kobetu span:before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: -7px;
  background: url(/images/pdf_icon.png) no-repeat;
  background-size: contain;
  margin-right: 3px;
}
/*.kobetu:has(> div:nth-child(10)) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
  gap: 10px;
  padding: 0 28px 0 19px;
}*/

@media screen and (min-width : 1280px){
  .main_hukibox100 {
 padding: 2rem 0;
    /* margin: 0 calc(50% - 25vw); */
    width: calc(900px - 8rem);
    background: #fff;
    margin: 0 auto;
}
.kobetu1 div{
  text-align: center;
  border: 1px solid #75757529;
  padding-bottom: 10px;
  max-width: 380px;
}

}
.articles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 各記事間の間隔 */
}
.articles_f {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 各記事間の間隔 */
}

.article {
  flex-basis: calc(25.33% - 10px); /* 3列表示 + 左右余白 */
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid #ccc; /* ボーダーの設定 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* ボックスシャドウの設定 */
  padding: 10px; /* 左右の余白を設定 */
}

.article img {
  width: 150px;
  height: 105px;
  object-fit: cover;
  object-position: 0 24%;
}



.article .custom-title {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.7em;
  margin: 10px 0 0 0;
  display: -webkit-box; /* 必須 */
  -webkit-box-orient: vertical; /* 必須 */
  -webkit-line-clamp: 2; /* 行数を制限 */
  overflow: hidden; /* はみ出た部分を非表示 */
}

.article .custom-title span::after {
  content: '...'; /* 点点を表示 */
}

.article .tag-nakami {
  font-size: 12px;
  color: #666; /* タグのテキストカラー */
  margin-top: -12px;
}

.icon-pencil {
  display: inline-block;
  width: 32px;
  height: 32px;
  fill: #333;
  margin-right: -4px;
  margin-left: -7px;
  top: 5px;
  position: relative;}


  .kanrensam {
    display: grid;
    grid-template-areas:"kanrensam_yo_titles"
    "kanrensam_img" "kanrensam_summry";

    border: 1px solid #757575;
    /* grid-template-rows: 1.5em 264px 2em; */
    margin: 1em auto;
    display: inline-grid;
    width: 47%;
    position: relative;
    border: 2px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }



    .kanrensam_titles {
      grid-area: kanrensam_yo_titles;
      padding: 18px 0.5em 0em 0.5em;
      background-color: #002a73;
      height: 4em;
      z-index: 1;
     border-bottom: 1px solid #ccc;
     font-weight: bold;
      color: #fff;
padding-bottom: 1em;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.95em;

  }


  .kanrensam_img {
  grid-area: kanrensam_img;
  text-align: center;
max-height: 280px !important;
overflow: hidden;
width: auto;
padding: 15px;
 }

.relatedbox{
  margin: 0 auto;
  width: calc(900px - 8rem);
}

 .relatedbox > a:nth-child(1) .kanrensam .kanrensam_titles {
  background-color: #002a73; /* 初期色 */
}

.relatedbox > a:nth-child(2) .kanrensam .kanrensam_titles {
  background-color: #2e88c1; /* 少し暗く */
}

.relatedbox > a:nth-child(3) .kanrensam .kanrensam_titles {
  background-color: #2878a7; /* さらに暗く */
}

.relatedbox > a:nth-child(4) .kanrensam .kanrensam_titles {
  background-color: #22688d; /* もっと暗く */
}

.relatedbox > a:nth-child(5) .kanrensam .kanrensam_titles {
  background-color: #1c5873; /* 最も暗く */
}

.relatedbox > a:nth-child(6) .kanrensam .kanrensam_titles {
  background-color: #184863; /* 最も暗く */
}
 .kanrensam_img img{
  border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 0 auto;
 }

  .printsums_img img{
    object-fit: contain;
  padding: 5px;
  margin: 0 auto;
/*  max-height: 400px;*/
  width: auto;
  }

  .printsumss_img img{
    object-fit: contain;
  padding: 5px;
  margin: 0 auto;
/*  max-height: 400px;*/
  width: auto;
  height: auto; /* 高さを自動調整 */
  display: block;
  }



  .kanrensam_summry {
    grid-area: kanrensam_summry;
    padding: 0.5em 1em 0 1em;
    line-height: 1.4em;
    font-size: 0.9em;
    height: 11em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 11;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;
    display: -moz-box;
    -moz-line-clamp: 11;
    -moz-box-orient: vertical;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    -ms-flex-preferred-size: 11em;
  }
  .kanrensam_summry::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4em; /* フェードアウトする部分の高さ */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  }
  .kanrensam_summry b {
    line-height: 2em;
  }
.kanrensam_summry b {
  line-height: 2em;
}
.btn_simple {
  display: inline-block;
  font-size: 1em;
  padding: 10px 1em;
  border: 1px solid #888;
  border-radius: 5px;
  position: absolute;
  right: 20px;
  bottom: 20px;
}


    .pre_print{
      display: flex;
    }

    .pre_print_box {
      display: grid;
      grid-template-areas: "pre_print_title"
            "pre_print_img";
      border: 1px solid #757575;
      /* grid-template-rows: 1.5em 264px 2em; */
      /* margin: 1em auto; */
      box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
      /* border-radius: 7px 7px 0 0; */
      /* width: 29%; */
      position: relative;
      padding: 1em;
  }


  .pre_print_title {
    grid-area: pre_print_title;
    padding: 0px 0.5em 0em 0.5em;
    /* background-color: #222839; */
    height: 4em;
    z-index: 1;
    border-bottom: 1px solid #ccc;
    /* font-weight: bold; */
    color: #4d4d4d;
    padding-bottom: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pre_print_img {
  grid-area: pre_print_img;
  text-align: center;
max-height: 280px !important;
overflow: hidden;
margin-bottom: 10px;
padding-left: 15px;
  }
  .pre_print_img img{
    object-fit: contain;
  padding: 5px;
  margin: 0 auto;

  }



  .rank_box {
    display: grid;
    grid-template-areas:
    "rank_box1 rank_box2";
    /* border-radius: 7px 7px 0 0; */
    /* width: 29%; */
    position: relative;
    padding: 1em;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;

}

.rank_box img{
  margin: 0 auto;
}

.rank_box1 {
  grid-area: rank_box1;
  padding: 0px 0.5em 0em 0.5em;
  /* background-color: #222839; */



  /* font-weight: bold; */
  color: #4d4d4d;
text-align: center;
}

.rank_box2 {
  grid-area: rank_box2;
  padding: 0px 0.5em 0em 0.5em;
  /* background-color: #222839; */

  color: #4d4d4d;
  padding-bottom: 1em;
  text-align: center;
}








.amalink{
  display: grid;
  grid-template-areas:
  "ama_title0 ama_title0"
  "ama_box1 ama_box2";
  position: relative;
  padding: 1em;



}

.ama_title0{
  grid-area: ama_title0;
  margin: 1em 0 0.5em 0;
  margin-bottom: 15px;
}
.ama_title0 h4{
  display: inline;
}
.ama_title0 img{
  display: inline;
}


.ama_box1 {
  grid-area: ama_box1;
  padding: 0.5em 1em 0em 0.5em;
  /* background-color: #222839; */



  /* font-weight: bold; */
  color: #4d4d4d;
text-align: center;
}

.ama_box2 {
  grid-area: ama_box2;
padding: 0.5em 0em 0em 0em;
color: #4d4d4d;
font-size: 0.85em;


}

[class^="printsums_yo_titles"] {
  font-size: 0.9em;
}

[class^="printsums_yo_titles"][class$="1"],
[class^="printsums_yo_titles"][class$="2"],
[class^="printsums_yo_titles"][class$="3"],
[class^="printsums_yo_titles"][class$="0"] {
  background-color: #333333;
}

[class^="printsums_yo_titles"][class$="4"],
[class^="printsums_yo_titles"][class$="5"],
[class^="printsums_yo_titles"][class$="6"] {
  background-color: #09304a;
}

[class^="printsums_yo_titles"][class$="7"],
[class^="printsums_yo_titles"][class$="8"],
[class^="printsums_yo_titles"][class$="9"] {
  background-color: #023030;
}
.img_in {
  display: inline;
  position: relative;
  top: 2px;
  margin-right: 0px;
}

.textBox {
  border: 2px solid #333;
  border-radius: 5px;
  padding: 30px;
  position: relative;
  margin: 2em 0;
  text-align: left;
  line-height: 1.8em;
  }

  .textBox::before {
  background-color: #fff;
  color: #333;
  content: "TOPICS";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -19px;
  }

  .textBox h3{
 text-align: left !important;
 margin-bottom: 15px;
  }


  .ribbons1 {
    display: inline-block;
    position: absolute;
    top: -6px;
    right: 10px;
    margin: 0;
    padding: 10px 0;
    z-index: 2;
    width: 40px;
    text-align: center;
    color: white;
    font-size: 17px;
    background: linear-gradient(#ff785b 0%, #e95738 100%);
    border-radius: 2px 0 0 0;
    }

  .ribbons1:before {
    position: absolute;
    content: '';
    top: 0;
    right: -6px;
    border: none;
    border-bottom: solid 6px #cf4a2d;
    border-right: solid 6px transparent;
  }
  .ribbons1:after {
    content: '';
    position: absolute;
    left: 0;
    top: 97%;
    height: 0;
    width: 0;
    border-left: 20px solid #e95738;
    border-right: 20px solid #e95738;
    border-bottom: 10px solid transparent;
  }



  .ribbons2 {
    display: inline-block;
    position: absolute;
    top: -6px;
    right: 10px;
    margin: 0;
    padding: 10px 5px;
    z-index: 2;
    width: 40px;
    text-align: center;
    color: white;
    font-size: 17px;
    background: linear-gradient(#cf4a2d 0%, #cf4a2d 100%);
    border-radius: 2px 0 0 0;
    }

  .ribbons2:before {
    position: absolute;
    content: '';
    top: 0;
    right: -6px;
    border: none;
    border-bottom: solid 6px #cf4a2d;
    border-right: solid 6px transparent;
  }
  .ribbons2:after {
    content: '';
    position: absolute;
    left: 0;
    top: 97%;
    height: 0;
    width: 0;
    border-left: 20px solid #cf4a2d;
    border-right: 20px solid #cf4a2d;
    border-bottom: 10px solid transparent;
  }



  .ribbons3 {
    display: inline-block;
    position: absolute;
    top: -6px;
    right: 10px;
    margin: 0;
    padding: 10px 0;
    z-index: 2;
    width: 40px;
    text-align: center;
    color: white;
    font-size: 17px;
    background: linear-gradient(#cf4a2d 0%, #cf4a2d 100%);
    border-radius: 2px 0 0 0;
    }

  .ribbons3:before {
    position: absolute;
    content: '';
    top: 0;
    right: -6px;
    border: none;
    border-bottom: solid 6px #cf4a2d;
    border-right: solid 6px transparent;
  }
  .ribbons3:after {
    content: '';
    position: absolute;
    left: 0;
    top: 97%;
    height: 0;
    width: 0;
    border-left: 20px solid #cf4a2d;
    border-right: 20px solid #cf4a2d;
    border-bottom: 10px solid transparent;
  }


  .cellh {
    display: grid;
    grid-template-areas:
    "cell_main cell_main"
    "cell_setu1 cell_setu1"
    "cell_setu2 cell_setu3"
    "cell_setu4 cell_setu4"
    "cell_setu5 cell_setu5"
    "cell_setu6 cell_setu6";
    border: 1px solid #757575;
    text-align: center;
    grid-template-rows: 1fr;
    margin: 1em -3px;
    box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
    display: inline-grid;
    border-radius: 7px 7px 0 0;
    width: 20%;
    padding: 10px 10px 20px 10px;
    position: relative;
  }
  .cell_main {
    grid-area: cell_main;
    text-align: center;

    padding: 0 0 0 0;

  }
  .cell_main h5 {
    /* background: linear-gradient(transparent 70%, #f1f1f1 95%); */
    font-size: 90px;
    margin: 0px 0 0 0;
    line-height: 1.3em;
    background-image: repeating-linear-gradient(-45deg,
        #666 0, #333 3px,
        transparent 3px, transparent 6px);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 5%;
    /* color: #fff; */
}

  .cell_setu1 {
    grid-area: cell_setu1;
    text-align: center;
  }
  .cell_setu1 img{
    display: inline;
    position: relative;
    top:10px;
  }
  .cell_setu2 {
    grid-area: cell_setu2;
    padding: 10px 0 18px 0;
    color: #888;
  }



  .cell_setu3 {
    grid-area: cell_setu3;
    padding: 10px 0 18px 0;
    color: #888;

  }

  .cell_setu4 {
    grid-area: cell_setu4;
border-top:1px solid #ccc ;
    font-size: 0.7em;
padding: 18px 0 5px 0;
  }

  .cell_setu5 {
    grid-area: cell_setu5;
    font-size: 0.7em;
  }

  .cell_setu6 {
    grid-area: cell_setu6;
  }

  .cell_setu4 img {
    display: inline;
    position: relative;
    top: 2px;
    margin-right: 7px;
}
.cell_setu5 img {
  display: inline;
  position: relative;
  top: 2px;
  margin-right: 7px;
}
.cellgyo {
  margin: 2em 0 0em 4%;
  text-align: left;
}

.cellgyo h4{
  display: inline;
  margin-right: 5px;
}
.cellgyo img{
  display: inline;
}



.kiji_sam{
margin-bottom: 6em;
}

.kiji_sam img{
  margin: 0 auto;
  max-width:578px !important;
  height: auto;
}

.gyo {
  display: grid;
  grid-template-areas: "gyo_cell1 gyo_cell2 gyo_cell3";
  grid-template-columns: 200px 1fr 1fr;
  grid-gap: 10px;
 border: 1px solid #757575;
  text-align: center;
  grid-template-rows: 1fr;
  margin: 1em 4%;
  box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
  /* display: inline-grid; */
  /* border-radius: 7px 7px 7px 7px; */
  padding: 10px 10px 10px 10px;
  position: relative;
  /*background: linear-gradient(transparent 76%, #ffff667a 100%);*/
}

.gyo_cell1 {
  grid-area: gyo_cell1;
  font-size: 80px;
  padding: 0 0 0 18px !important;
  text-align: left;
}



.gyo_cell2 {
  grid-area: gyo_cell2;
  position: relative;
}
.gyo_cell2 img {
  display: inline;
  position: relative;
  top: 12px;
}
.gyo_cell3 {
  grid-area: gyo_cell3;
  position: relative;
}
.gyo_cells{
  position: absolute;
  top: 65%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
}
.gyo_cell2 .gyo_cells{
  margin-top: -10px;
}

.gyo_cell3 img {
  display: inline;
}





.moji_hyo table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
 }
 .moji_hyo table th {
  padding: 10px;
  background: #e9faf9;
  border: solid 1px #778ca3;
 }
 .moji_hyo table td {
  padding: 10px;
  border: solid 1px #778ca3;
 }

 .moji_hyo h4 {
margin:3em 0 0.5em 0;
 }

 .kouhan{
  margin: 3em 5% 0 5%;
  text-align: center;
  border: #ccc 1px solid;
  padding: 2em;
  border-radius: 10px;
 }
 .adrange{
  padding: 1em;
  border: #ccc 1px solid;
  border-radius: 10px;
  width: 90%;
 }


.naraigoto h3{
  margin: 2em 0 3em 0;
}


.naraigoto_title{
  /*  display: grid;
    grid-template-columns: 65px 1fr;
    grid-template-rows: 1fr;
    place-items: center;*/
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    margin: 0 5% -12px 5%;

  }

  .naraigoto_title img{
    display: inline-block;
    vertical-align: middle;
  }
  .naraigoto_title h1{
    display: inline-block;
    vertical-align: middle;
  }
  .naraigoto_title h1 span{
    display: table-cell;

  }
  .naraigoto_title hr{
  border-top: 3px solid #000000;
  margin-top: -8px;
  padding-bottom: 5px;
  }
  .naraigoto_h1{
    background-color: #ffffff;
    padding: 1em 0;
    margin: 1em 0.5em 0.5em 0.5em;
    font-size: 1.2em;
    word-break: keep-all;
    line-height: 1.4em;
    text-align: center;
  }
  .naraigoto_h1 h1{
    color: #fff;
    text-indent: 1em;
    font-size: 1.3em;
  }


  .naraigoto_h1::first-letter {
    font-size: 1.4em;
    font-weight: 600;
    color: #000000;
  }
  .box2_h1 span{
    font-size: 0.8em;
    display: block;
  margin: -2em 1.5em -2em 0;
    /*text-align: right;*/
  }

  .lesson_box {
    display: grid;
    grid-template-areas: "lesson_title"
    "lesson_ex";
    border: 1px solid #757575;
    margin: 1em 5px;
    padding: 1em;
    box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
    border-radius: 7px;
    position: relative;
  }
  .lesson_box img{
    float: left;
    margin-right: 10px;
  }
  .lesson_title {
    grid-area: lesson_title;
    font-size: 1.2em;
    font-weight: bold;
   }
   .lesson_ex {
    grid-area: lesson_ex;
   }

   .box-design3 {
    margin: 20px auto;
    padding: 20px;
    background-color: #e1eef5;
    padding: 2em;
  }
.img_center{
  margin: 0 auto;
}
.box420{
  width: 420px;
  margin: 1em auto;
}
.box640{
  width: 640px;
  margin: 1em auto;
}
.box640 h4{
/*  margin-bottom:-15px;*/
  margin-top: 0px;
  }

.box640 h3{
text-align: left !important;
}
.box640 p{
  margin: 0 0 0 0 !important;
  }


.harfbox {
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 0 auto;
    max-width: 640px;

}





    ul.linkbox {
      display: block;
      overflow: hidden;
      padding-top: 1px;
      padding-bottom: 10px;
      padding-left: 3px;
      width: 485px;
      margin: 0 auto;
    }
    ul.linkbox li {
      display: block;
      width: 160px;
      float: left;
      margin-top: 1px;
      margin-bottom: 2px;
      padding-top: 1px;
      padding-right: 2px;
      padding-bottom: 2px;
      padding-left: 2px;
      text-align:center;
    }
    ul.linkbox li a { display: block; border: 1px solid #ddd; background-color: #ffffff; text-decoration: none; padding: 3px; color: #444; }
    ul.linkbox li a:hover { border-color: #fc6; background-color: #ffffff; }
    ul.linkbox li a strong { display: block; font-size: 1.2em; line-height: 1em; margin-bottom: 5px; color: #222; }
    ul.linkbox li a:hover strong { color: #f63; }


.linkbox2{
  display: grid;
  grid-template-columns: 174px 174px 174px 174px;
  grid-gap: 10px;
  margin: 0 0 0 -50px;


}
.linkbox2 div{
  text-align: center;
  border: 1px solid #9a9a9a;
  box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);

  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}

.linkbox2 strong{
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.kotoba_all{
  text-align: center;
}

.kotoba_all ul {
  column-width: 180px;
}
.kotoba_all ul li{
  line-height: 2em;
  position: relative;
  padding-left: 15px;
  text-align: left;
}

.kotoba_all ul li:before {
  content: "";
  position: absolute;
  top: .8em;
  left: 0;
  width: 7px;
  height: 7px;
  background-color: #8b6b4e;
  border-radius: 50%;
}
.kotoba_all .cell_main{
  margin-top: 4em;
}
.kotoba_all .cell_main h5{
  text-align: left;
  text-indent: 35px;
}
.kotoba_all .cell_main h5::after{
  content: "からはじまる言葉";
  font-size: 15px;
  line-height: normal;
  font-weight: normal;
}






/*================================
    デザインパターン    段落ブロック
================================*/
/*枠線　薄いグレー*/
.is-style-para-mark1 {
  border: 1px solid;
  background-color: #FFF !important;
}
/*塗りつぶし　薄いグレー*/
/*二重線　薄いグレー*/
.is-style-para-mark3 {
  border: 4px double;
}
/*太い枠線　塗りつぶし　薄いグレー*/
.is-style-para-mark4 {
  border: 8px solid;
}
/*点線　薄いグレー*/
.is-style-para-mark5 {
  border: 2px dashed;
}
/*ストライプ　薄いグレー*/
.is-style-para-mark6 {
  background-image: repeating-linear-gradient(-45deg, #eee, #eee 2px, #fff 2px, #fff 4px) !important;
}
/*メモ*/
.is-style-para-icon-mark1 {
  background: #eaeaea;
}
.is-style-para-icon-mark1:before {
  content: "\f304";
  background: #4D4D4D;
}
/*チェック*/
.is-style-para-icon-mark2 {
  background: #deefff;
}
.is-style-para-icon-mark2:before {
  content: "\f00c";
  background: #4285F4;
}
/*ポイント*/
.is-style-para-icon-mark3 {
  background: #fff7d8;
}
.is-style-para-icon-mark3:before {
  content: "\f0eb";
  background: #FBBC03;
}
/*注意*/
.is-style-para-icon-mark4 {
  background: #fde4e2;
}
.is-style-para-icon-mark4:before {
  content: "\f12a";
  background: #EA4335;
}
/*重要*/
.is-style-para-icon-mark5 {
  background: #dbf9e0;
}
.is-style-para-icon-mark5:before {
  content: "\f0a4";
  background: #2BB24C;
}
/*ハート*/
.is-style-para-icon-mark6 {
  background: #ffe3ee;
}
.is-style-para-icon-mark6:before {
  content: "\f004";
  background: #FF80AB;
}
.box-number{}

.box-number div:nth-of-type(1) h3:before {
  content: '\02460';
  margin-right:5px;
}

.box-number div:nth-of-type(2) h3:before {
  content: '\02461';
  margin-right:5px;
}

.box-number div:nth-of-type(3) h3:before {
  content: '\02462';
  margin-right:5px;
}

.box-number div:nth-of-type(4) h3:before {
  content: '\02463';
  margin-right:5px;
}

.box-number div:nth-of-type(5) h3:before {
  content: '\02464';
  margin-right:5px;
}
.box-number div:nth-of-type(6) h3:before {
  content: '\02465';
  margin-right:5px;
}

.box-number div:nth-of-type(7) h3:before {
  content: '\02466';
  margin-right:5px;
}


.box-number div:nth-of-type(8) h3:before {
  content: '\02467';
  margin-right:5px;
}


.box-number div:nth-of-type(9) h3:before {
  content: '\02468';
  margin-right:5px;
}


.box-number div:nth-of-type(10) h3:before {
  content: '\02469';
  margin-right:5px;
}

.link_text{
  margin: 3em 0 2em 0 !important;
  border: 1px solid #ccc;
  border-radius: 5px;
  line-height: 2.5em;
  padding: 1em 2.5em 1em 2em;
  position: relative;
}
.link_text::after {
  position: absolute;
  top: 50%;
  right: 1em;
  width: 0.5em;
  height: 0.5em;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  content: "";
}
.box-number a {
  text-align: center;
  font-size: 1.2em;
  display:block;
  margin: 1em auto !important;
  width: 80%;

}

.box-number b{
font-size: 1.2em;
margin: 10px 0 -18px 0;
display: block;
}


.li_point{

}

.li_point ul {
  list-style-type: none; /* 通常のリストスタイルを無効化 */
  padding-left: 0; /* 左のパディングを削除 */
}

.li_point li {
  background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
  background-size: 20px 20px; /* 画像のサイズを設定 */
  padding-left: 30px; /* テキストと画像の間隔を設定 */
  margin-bottom: 10px; /* リスト間の余白 */
}

.li_point li:nth-child(1) {
  background-image: url(../images/okan1.png); /* 1つ目の画像 */
}

.li_point li:nth-child(2) {
  background-image: url(../images/okan2.png); /* 2つ目の画像 */
}

.li_point li:nth-child(3) {
  background-image: url(../images/okan3.png); /* 3つ目の画像 */
}


.box-numbers{}

.box-numbers ul li{
  margin-top: 10px;
}

.box-numbers li:nth-of-type(1)::before {
  content: '\02460';
  margin-right:5px;
}

.box-numbers li:nth-of-type(2)::before {
  content: '\02461';
  margin-right:5px;
}

.box-numbers li:nth-of-type(3)::before {
  content: '\02462';
  margin-right:5px;
}

.box-numbers li:nth-of-type(4)::before {
  content: '\02463';
  margin-right:5px;
}

.box-numbers li:nth-of-type(5)::before {
  content: '\02464';
  margin-right:5px;
}
.box-numbers li:nth-of-type(6)::before {
  content: '\02465';
  margin-right:5px;
}

.box-numbers li:nth-of-type(7)::before {
  content: '\02466';
  margin-right:5px;
}


.box-numbers li:nth-of-type(8)::before {
  content: '\02467';
  margin-right:5px;
}


.box-numbers li:nth-of-type(91)::before {
  content: '\02468';
  margin-right:5px;
}


.box-numbers li:nth-of-type(10)::before {
  content: '\02469';
  margin-right:5px;
}

.w500{
  width: 500px;
}


/* CSS for the code block */
.code-block {
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: black;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.code-container {
  overflow: auto;
}

.copy-btn {
  margin-left: 10px;
  /* ここにその他のボタンスタイルを追加 */
}

.line-numbers {
  float: left;
  text-align: right;
  margin-right: 10px;
  color: #888;
}

.line-numbers span {
  display: block;
}

.code-block pre {
  overflow: auto;
}

/* 以上コードを埋め込むCSS */

/* キーボードデザイン */
.keyboard {
  padding: 1px 3px;
  background-color: #f9f9f9;
  background-image: -moz-linear-gradient(center top , #eee, #f9f9f9, #eee);
  border: 1px solid #aaa;
  border-radius: 2px;
  box-shadow: 1px 2px 2px #ddd;
  font-family: inherit;
  font-size: 0.85em;
}

/************************************
** アイコンつきリスト
************************************/
/* ボックス全体 */
.iconbox{
  margin: 0 auto 2em; /* 余白 */
  background: #fef9ed; /* 背景色 */
  border-radius:4px; /* 角丸 */
  max-width:600px; /* 横幅 */
  padding: 0; /* 余白 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
}
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 18px; /* 文字サイズ */
  background: #858583; /* 背景色 */
  text-align: center; /* 文字配置 */
  color: #fff; /* 文字色 */
  font-weight: bold; /* 文字太さ */
  letter-spacing: 0.05em; /* 文字間隔 */
  border-radius:4px 4px 0 0; /* 角丸 */
  line-height:1.5; /* 行間 */
  padding:1em 2em; /* 余白 */
}
/* 段落の余白リセット */
.iconbox p {
  margin: 0;/* 文字の余白リセット */
  padding: 0; /* 文字の内側余白リセット*/
}
/* ボックス 中 */
.iconbox .iconbox-wrap{
  display:-webkit-box; /* 配置 */
    display:-ms-flexbox; /* 配置 */
  display:flex; /* 配置 */
  padding:1.3em 2em; /* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
   width: 97%;/*横幅 */
   margin: 0 3% 0 0 !important;/* 余白 */
   line-height:1.8;/* 行間 */
  -ms-flex-item-align: center;/* 中央寄せ */
   align-self: center;/* 中央寄せ */
}
/* コンテンツ段落 */
.iconbox .iconbox-wrap .box-content p{
  margin-bottom:1em;/*余白 */
}
/* アイコン&吹き出し */
.iconballoon{
  -ms-flex-item-align: end; /* 下部に配置 */
  align-self: flex-end; /* 下部に配置 */
}
/* アイコン */
.iconballoon .icon{
  text-align:center;/* 位置を中央へ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width: 50px; /* 横幅 */
  margin:0; /* 余白 */
}
/* アイコン画像 (amp)*/
.iconballoon amp-img{
  max-width: 120px !important; /* 横幅 */
  margin:0; /* 余白 */
}
/* 吹き出し文字 */
.iconballoon .balloon p{
  line-height:1.4; /* 行間 */
}
/* 吹き出し */
.iconballoon .balloon{
  position:relative; /* 配置 */
  width:140px; /* 横幅 */
  background:#fff; /* 背景色 */
  padding:10px; /* 余白 */
  text-align:center; /* 中央寄せ */
  border:2px solid #999;/* 線(太さ 種類　色) */
  color:#555555;/* 文字色 */
  font-size:14px;/* 文字サイズ */
  font-weight:bold;/* 文字太さ */
  border-radius:10px;/* 角丸 */
  margin-bottom:10px;/* 余白 */
  line-height:1.5; /* 行間 */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after,.balloon:before{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  position:absolute;
  top:100%;
  left:50%;
}
.iconballoon .balloon:after{
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#FFFFFF;
}
.iconballoon .balloon:before{
   border-color:"rgba(153, 153, 153, 0)";
    border-top-width:12px;
    border-bottom-width:12px;
    border-left-width:12px;
    border-right-width:12px;
    margin-left: -12px;
    margin-top: 1px;
    border-top-color:#999999;
}

.icons{
  margin-left: 26px;
}
/*スマホ*/
@media screen and (max-width: 480px){
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 14px; /* 文字サイズ */
}
/* ボックス 中 */
.iconbox .iconbox-wrap {
    padding: 1em 1em 1em 1.5em;/* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
  font-size:12px;/*文字サイズ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width:50px;/* 横幅 */
  margin-top:5px;/* 余白 */
}
/* アイコン画像(amp) */
.iconballoon amp-img{
  max-width:80px !important;/* 横幅 */
  margin-top:5px;/* 余白 */
}
/* 吹き出し */
.iconballoon .balloon{
  width:80px;/* 横幅 */
  font-size:10px;/* 文字サイズ */
  padding: 1em 0;/* 余白 */
  border: 1px solid #999;/* 線(太さ 種類 色) */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after {
    border-top-width: 12px;
    border-bottom-width: 10px;
    border-left-width: 11px;
    border-right-width: 11px;
    margin-left: -11px;
    border-top-color: #FFFFFF;
}
}
/************************************
** 箇条書き(点)
************************************/
/* 箇条書き */
.iconbox .list {
  list-style: none;/* 行頭記号削除  */
  padding: 0 !important;/* 余白リセット */
  margin: 0 !important;/* 余白リセット */
  border:none;/* 線リセット */
}
/* 箇条書き 行 */
.iconbox .list li {
  position: relative;/* 行頭記号の配置  */
  margin: 0 0 0.5em 0 !important;/* 余白  */
  padding: 0 0 0.5em 1.4em !important;/* 余白 */
  line-height:1.8;/* 行間 */
}
/* 箇条書き 行頭記号 */
.iconbox .list li:before {
  background-color: #ffa952; /* 記号色 */
  position: absolute; /* 行頭記号の配置 */
  content: ''; /* 空文字 */
  top:13px; /* 上からの距離 */
  left: 0; /* 左からの距離 */
  width: 7px; /* 横幅 */
  height: 7px; /* 縦幅 */
  border-radius: 4px; /*角丸 */
}
/* 箇条書き 行頭記号リセット */
.iconbox .list-number li:after{
  content:'';
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き 行頭記号*/
   .iconbox .list li:before{
     top:8px;/* 上からの距離 */
   }
}
/************************************
** 箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.iconbox .list-number{
   counter-reset:number; /* 番号リセット */
   list-style: none !important;/* 行頭番号削除) */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.iconbox .list-number li {
   position: relative;/* 配置 */
   margin:0.5em 0 !important;/* 余白 */
   max-width:500px; /* 横幅 */
   padding: 0 0 0.5em 1.8em !important;/* 余白 */
   line-height:1.8;/* 行間 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
   counter-increment: number;/* 番号 */
   content: counter(number);/* 番号 */
   background-color: #858583; /* 背景色 */
   color: #fff; /* 番号色 */
   position: absolute;/* 配置 */
   font-weight:bold;/* 文字太さ */
   font-size: 14px;/* 文字大きさ */
   border-radius: 50%;/* 角丸 */
   left: 0;/* 左からの距離 */
   top:4px;/* 上からの距離 */
   width: 22px;/* 横幅 */
   height: 22px;/* 縦幅 */
   line-height: 22px;/* 行間 */
   text-align:center;/* 中央寄せ */
}
.iconbox .list-number span{
  display: block;
  margin: -20px 0 0 2em;
  color: #3f3f3f;
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き(番号) 行 */
  .iconbox .list-number li{
     padding: 0 0 0.5em 2em !important;/* 余白 */
  }
  /* 箇条書き(番号) 行頭番号 */
  .iconbox .list-number li:before {
    font-size:10px;/* 文字大きさ */
    width: 18px;/* 横幅 */
    height: 18px;/* 縦幅 */
    line-height: 18px;/* 行間 */
    top:2px;/* 上からの距離 */
  }
}

.title_box{
  background-image: repeating-linear-gradient(-45deg, #eee, #eee 2px, #fff 2px, #fff 4px) !important;
  background-color: #fff !important;
}
.fleximg{
  display: flex;
  align-items: center;
}

.fleximg_text{
  flex: 1; }
.fleximg_img{
  width: 100px;
  position: relative;
  bottom: -15px;
}

.zoomable {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.zoomable:hover {
  transform: scale(1.1);
}

.subfuki{
  position: relative;
  top: 10px;
  left: 20px;
}

.qa-8 {
  counter-reset: questionCounter; /* カウンターの初期化 */
}

.qa-8 dt {
  margin-bottom: 1em;
  color: #333333;
  font-weight: 600;
}

.qa-8 dt::before {
  counter-increment: questionCounter; /* カウンターを1増やす */
  content: "Q" counter(questionCounter) ". "; /* カウンター値の表示 */
  margin-right: .4em;
}

.qa-8 dd {
  margin: 0 0 2.5em;
  padding: 1em 1.5em;
  background-color: #f2f2f2;
  color: #333333;
}

.qa-8 dd::before {
  content: "A.";
  margin-right: .4em;
}
@media screen and (min-width: 1200px) {
body::before, body::after {
  content: '';
  margin: auto;
  pointer-events: none;
  position: fixed;
  left: -50vw;
  right: -50vw;
  width: 100%;
  height: 80%;
  height: 80dvh;
  z-index: -1;
}
body::before {
  content: '';
  background: url(/images/bg-top.png) no-repeat center top;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  opacity: 0.2;
}

body::before, body::after {
  content: '';
  margin: auto;
  pointer-events: none;
  position: fixed;
  left: -50vw;
  right: -50vw;
  width: 100%;
  height: 80%;
  height: 80dvh;
  z-index: -1;
}


body::after {
  background: url(/images/bg-un.png)  no-repeat center bottom;
  background-size: 100% auto;
  bottom: 0;
  min-width: 1800px;
  opacity: 0.2;
}
}



.article2 {
  flex-basis: 47%;
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid #ccc; /* ボーダーの設定 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* ボックスシャドウの設定 */
  padding: 10px; /* 左右の余白を設定 */
}

.article2 img {
  object-position: 0 24%;
  object-fit: contain;
  object-position: center;
  max-width: 100%;
  max-height: 100%;
}



.article2 .custom-title {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.7em;
  margin: 10px 0 0 0;
  display: -webkit-box; /* 必須 */
  -webkit-box-orient: vertical; /* 必須 */
  -webkit-line-clamp: 2; /* 行数を制限 */
  overflow: hidden; /* はみ出た部分を非表示 */
}

.article2 .custom-title span::after {
  content: '...'; /* 点点を表示 */
}

.article2 .tag-nakami {
  font-size: 12px;
  color: #666; /* タグのテキストカラー */
  margin-top: -12px;
}

/*セクション部分のレイアウトはじまり*/
#section_box .container {
  display: grid;
  grid-template-areas:
    "header menu"
    "title title"
/*      ".. pan"*/
    "main main"
    "nav nav"
    "footer footer";
/*    grid-template-rows: 4em 100px 12px 4em 1fr 1fr 4em;*/
  margin: 0 auto;
  grid-template-columns: 1fr 550px;
  justify-content: center;
  width: 96%;
    /*0823昔は90*/
  max-width: 1200px;
  /*0823昔は1100*/
}


#section_box .container div.nav {
  max-width: 1300px;
  margin: 0 auto; /* 左右のマージンを自動で中央寄せ */
  border-radius: 5px;
  padding: 1em;
  display: grid;
  justify-content: center; /* 横方向の中央寄せ */

  grid-template-areas:
    "nav_title nav_title nav_title"
    "nav1 nav2 nav3"
    "navi_tophe navi_tophe navi_tophe";
  grid-template-columns: 30% 30% 30%;
  grid-gap: 10px 3.5%;
}

#section_box .container div.nav_title {
grid-area: nav_title;
margin: 2em 0 1em 0;
font-size: 1.5em;
text-align: center;}

#section_box .container div.nav1 {
grid-area: nav1;}

#section_box .container div.nav2 {
  grid-area: nav2;
margin-top: -27px;}

#section_box .container div.nav3 {
    grid-area: nav3;
    margin-top: -27px;}

#section_box .container div.navi_tophe {
      grid-area: navi_tophe;
   }


#section_box .container div.main {
  border-radius: 5px;
  max-width: 1300px;
    /*0823昔は800*/
  padding: 0em 2em 2em 2em;
  position: relative;
}

#section_box .container div.pan {
  max-width: 600px;
}


.table_ichi {
  text-align: center; /* 外側のdivを中央揃えに */
}

.table_ichi table {
  margin-left: auto !important;
  text-align: left !important; /* テーブルの中身を左揃えに */
  display: inline;
}
.table_ichi table td:first-child, .table_ichi table th:first-child {
  padding: 3px 2em 2px 1em;
}

.left5em{
  margin-left: 5em;
}


@media screen and (max-width: 600px) {
  .box_h1 {
    word-break: initial;
  }
  .box2_h1 {
    margin: 2em 0.5em 0.5em 0.5em;
    font-size: 0.95em;
    font-weight: 500;
    text-align: center;
    word-break: initial;
    box-sizing: initial;
    min-height: 2em;
    max-height: 4em;
    margin-right: 0em !important;
    padding-top: 3em;
    width: 108%;
    margin-left: -4% !important;
  }

  .box2_h1 span{
/*    display: inline-block;*/
    margin: 1em 1.5em 0em 0;
  }



.adsen_box{
  width: 100% !important;
  height: auto;

}

.articles {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 各記事間の間隔 */
}
.articles_f {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px; /* 各記事間の間隔 */
}
.mcnone{
  display: none;
}
.article {
  flex-basis: calc(50% - 20px); /* 3列表示 + 左右余白 */
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid #ccc; /* ボーダーの設定 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* ボックスシャドウの設定 */
  padding: 10px; /* 左右の余白を設定 */
}

.articles .article:last-child {
  display: none;
}
.kiji_sam img{
  margin: 0 auto;
  max-width:578px !important;
  height: auto;
}

.kiji_sam img{
  max-width:90% !important;
  margin-top: -10px;
}
.sp_kieru{
  display: none;
}

.left5em{
  margin-left: 0em;
}

.huki-topl .huki-text {
  max-width: calc(84% - 100px) !important;
  margin: 25px 0 0 -20px !important;
  padding: 0px 0px 0px 0px;

}


.huki-topl .huki-text p {
  margin: -1em -5px  !important;
  font-size: 0.9em;
}

.huki-top .huki-text {
  max-width: calc(84% - 80px) !important;
  margin: 25px 0 0 -20px !important;
  padding: 0px 0px 0px 0px;

}

.huki-top .huki-text p {
  margin: -1em -5px  !important;
  font-size: 0.9em;
}

.huki-topl {
  margin: -30px;

}

.huki-left .huki-imgname {
  margin-right: 13px;
}

.huki-text {
  padding: 0em !important;
}
}

.li_lists li{
  line-height: 5em;
  list-style: disc;
}
.li_lists span{
 display: block;
 margin-top: -3.5em;
 margin-left: 1em;
 color: #757575;
}

.list_maru li {
  line-height: 1.2em;
  list-style: disc;
  margin-left: 2em;
}
.setumeis {
  width: 640px;
  margin: 1em auto;
}
.setumeis p{
margin: -0.8em 0 0 0 !important;
}



.balloon5 {
  display: flex; /* Flexboxを有効化 */
  align-items: flex-start; /* アイテムを上端に揃える */
  margin: 1.5em 0;
}

.balloon5 .faceicon {
  margin-right: 10px; /* アイコンと吹き出しの間隔を設定 */
}
  .balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
  display: block;
  }


  .chatting {
    flex: 1; /* 吹き出し部分が余ったスペースを埋めるように拡張 */
    background: #d7ebfe; /* 吹き出しの背景色 */
    border-radius: 12px; /* 吹き出しの角丸 */
    padding: 10px; /* 内部の余白 */
  }

  .says {
    margin: 0; /* 余計なマージンを削除 */
    padding: 0; /* 余計なパディングを削除 */
  }


.balloon1 {
  display: flex; /* Flexboxを有効化 */
  align-items: flex-start; /* アイテムを上端に揃える */
  margin: 1.5em 0;
}

.balloon1 .faceicon {
  margin: 0 -3px 0 20px; /* アイコンと吹き出しの間隔を設定 */
}
.balloon1 .faceicon img{
  width: 100%;
  height: auto;
  display: block;
  }
  .balloon1 .chatting {
    flex: 1; /* 吹き出し部分が余ったスペースを埋めるように拡張 */
    background: #fff; /* 吹き出しの背景色 */

    padding: 1px; /* 内部の余白 */
  }

  .balloon1 .says {
    margin: 0; /* 余計なマージンを削除 */
    padding: 0; /* 余計なパディングを削除 */
  }

  .background-top {
    background-image: url('/images/top_syurui2.webp'); /* 背景画像のパス */
    background-size: cover; /* 背景画像を要素のサイズに合わせて調整 */
    background-position: center; /* 背景画像を中央に配置 */
    position: relative; /* 子要素の配置の基準点となる */
    padding: 20px; /* 内容と背景画像の間のスペース */
}
.background-top2 {
  background-image: url('/images/top_asobi.webp'); /* 背景画像のパス */
  background-size: cover; /* 背景画像を要素のサイズに合わせて調整 */
  background-position: center; /* 背景画像を中央に配置 */
  position: relative; /* 子要素の配置の基準点となる */
  padding: 20px; /* 内容と背景画像の間のスペース */
}
.content-top {
    position: relative; /* 親要素に対して相対的に配置 */
    color: rgb(4, 4, 4); /* テキストの色を白に設定（背景に応じて変更可） */
    /* 必要に応じて追加のスタイリング */
}
.content-top h2{
  font-weight: bold;
  font-size: 34px;
  top: -30px;
  position: relative;
}


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

  .balloon5 .faceicon {
    margin-bottom: -80px; /* アイコンと吹き出しの間隔を設定 */
  }

  .balloon5 .faceicon img {
    width: 60px !important;
    height: auto;
    position: relative;
    top: 70px;
    left: 87%;
}



  .box640 .balloon-211 h3{
      font-size: 14px;
    }

    .article .custom-title {
      display: block;

    }
    .kotoba_all ul {
      column-width: 120px;
      margin-left: -16px;
    }
    .article {
      flex-basis: 47%;
      display: flex;
      flex-direction: column;
      text-align: center;
      border: 1px solid #ccc;
      box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
      padding: 2px;
      margin: 0 auto;
  }

        .article:nth-child(3) {
          display: none;
        }
        .article:nth-child(4) {
          display: none;
        }
        .article:nth-child(5) {
          display: none;
        }

        .kanrensam {
          grid-template-areas: "kanrensam_yo_titles"
            "kanrensam_img"
            "kanrensam_summry";
        }
        .kanrensam_summry {
             padding: 0.5em 1em;

      }
  .rank_box {
    display: block;
    grid-template-areas:
         "rank_box1"
         "rank_box2"
  ;
    }
    .cellh {
      width: 80%;
    }

    .gyo {
      display: grid;
      grid-template-areas: "gyo_cell1"
        "gyo_cell2"
        "gyo_cell3";
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 2em 2em;
      /* text-align: center; */

  }
  .gyo_cell1 {
    padding: 0 0 0 20px !important;
  }
  .gyo_cell2, .gyo_cell3{
    padding: 0 0 0 40px !important;
  }

  /*.adrange{
    width: 90%;
   }*/

   .box640{
    width: 100%;
    margin: 1em auto;
  }

  .setumeis{
    width: 100%;
    margin: 1em auto;
  }
  .balloon5 {
    display: block;
  }

    .chatting{
      padding: 3px;
    }
.content-top h2 {
  font-size: 16px;
  }
.main h2 {
 display: block;
}
.content-top h2{
  top:0px;
}

}

.setu_box{
  text-align: left;
  margin: 2.5em 0;
  padding: 0 1em;
}
.setu_box h3{
  text-align: left;
  margin: 1.8em 0 0 1em;
}

.setu_box ul li{
  margin: 0 0 1.1em 1em;
  list-style-type: circle;
}
.setu_box ul li span{
  font-weight: bold;
}

.setu_box p{
  margin: 0 1.5em;
  line-height: 1.3em;
}

/*サイドバー*/
#sidebar_best {
  margin-top: 2em;
}

#sidebar_best ol {
  counter-reset: number;
  list-style-type: none !important;
  font-weight: bold;
  margin: 0.1em  1em 1em 1em;
}

#sidebar_best ol li {
  position: relative;
  line-height: 2.5em;
  padding: .65rem 0 .65rem 45px;
  border-bottom: dotted 1px #ccc;
  font-size: 1.2em;
}

#sidebar_best ol li:last-child {
  border-bottom: none;
}

#sidebar_best ol li:before {
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  background: #666;
  color: white;
  font-weight: bold;
  font-size: 15px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
}

#sidebar_best ol li:hover {
  opacity: .5;
  }

#sidebar_best ol li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: #555;
}

#sidebar_best ol li img {
  height: 13px;
  margin-right: 2.5rem;
}



@media screen and (max-width: 1080px) {
  #sidebar_best ol {
      font-size: 14px;
  }

  #sidebar_best ol li {
      padding: .65rem 0 .65rem 28px;
  }

  #sidebar_best ol li:before {
      width: 22px;
      height: 22px;
      line-height: 22px;
      left: 0;
  }

}

.print_setu{
  text-align:center;
  margin:2em 0 0.4em 0;
}
.print_setu span{
  font-weight: bold;
  letter-spacing:5px;
  font-size: 1.2em;
  line-height: 2em;
  background:linear-gradient(transparent 60%, rgba(255, 255, 255, 0) 60%, #FFF6B4 85%);
}


.box_title_c {
  position: relative;
  margin: 2em auto;
/*  width: 90%;
  padding: 1em;
  border: 3px solid #b20023;
  border-radius: 8px;
  background: #fff; */
  opacity: 1.0;

}

.box_title_c .box_title_c_a {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 50%; /* 要素を左から親の50%の位置に移動 */
  transform: translateX(-50%); /* 要素を自身の幅の50%分左にずらし、真ん中に配置 */
  padding: 0 10px;
  line-height: 1;
  font-size:30px;
  color: #b20023;
  font-weight: bold;
}
a .box_title_c_a {
  opacity: 1.0;
  background-color: #FFF;

}
a .box_title_c_a:hover {
  opacity: 1.0;
  background-color: #FFF;
}

  .box_title_c p {
  padding: 15px 20px;
  margin: 0;
  }
  .box_title_c span {
    font-weight: bold;
    }

.grid-osusume {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4つの等幅のカラム */
  grid-column-gap: 8px; /* グリッドアイテム間のギャップ */
  grid-row-gap: 50px;
}
.grid-osusume2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 8px;
  grid-row-gap: 50px;
  margin-top: 1.5em;
  background-image: repeating-linear-gradient(-45deg, #eee, #eee 2px, #fff 2px, #fff 4px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  padding: 70px;
}
.grid-osusume2t {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 8px;
  grid-row-gap: 0px;
  margin-top: 1.5em;
  background-image: repeating-linear-gradient(-45deg, #eee, #eee 2px, #fff 2px, #fff 4px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  padding: 40px 70px;
}

.grid-osusume5t {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 8px;
  grid-row-gap: 0px;
  margin-top: 1.5em;
  background-image: repeating-linear-gradient(-45deg, #eee, #eee 2px, #fff 2px, #fff 4px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  padding: 40px 70px;
}

.ribbont2t2 {
  position: absolute !important;
  top: 58px;
  left: 2px;
  width: 0;
  height: 0;
  border-left: 50px solid #e67e22;
  border-bottom: 50px solid transparent;
  z-index: 99;
}

.grid-osusume3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 最小幅250px、最大幅1frで可能な限り並べる */
  grid-gap: 8px; /* グリッドアイテム間のギャップ */
  margin: 1.5em 3em;

}

.grid-osusume3 span{
  color: #333;
  font-weight: bold;
  background: linear-gradient(transparent 50%, rgba(255, 240, 0, .45) 50%);
}

.grid3no {
  font-size: 1.3em;
  display: inline;
  position: relative;
  top: -185px;
  background-color: #fff;
  padding: 0.7em 1em;
}

.grid3not {
  font-size: 1.3em;
  display: inline;
  position: relative;
  top: -185px;
  background-color: rgba(255, 255, 255, 0.8); /* 背景色を半透明に */
  padding: 0.7em 1em;
  backdrop-filter: blur(2px); /* ぼかし効果を追加 */
  -webkit-backdrop-filter: blur(2px); /* Chrome, Safari の場合 */
}

.grid3no2 {
  font-size: 1em;
  display: block;
  position: relative;
  top: -61px;
  background-color: #fff;
  padding: 0.5em 1em 0.2em 1em;
  margin: 1em 1em 0 1em;
  border-top: 1px dashed #ccc;
}
.grid3no3 {
  font-size: 0.9em;
  display: block;
  position: relative;
  top: -37px;
  background-color: #fff;
  padding: 0.5em 1em 0.2em 1em;
  border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.grid3no4 p {
  padding:0em !important;
}

.grid3no4 p::before {
  content: "\\ ";
  margin-right: 3px;
  color: #757575;
}

.grid3no4 p::after {
  content: " /";
  margin-left: 3px;
  color: #757575;
}

.grid3no4 {
  font-size: 0.9em;
  display: block;
  position: relative;
  top: 3px;
  padding: 0em 1em 0.2em 1em;
  color: #4d4d4d;
}

.grid-osusume5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 4つの等幅のカラム */
  grid-column-gap: 8px; /* グリッドアイテム間のギャップ */
  grid-row-gap: 19px;
  font-size: 0.8em;
}
.box_lc{
  text-align: left;
}

.box_lc strong {
  background: linear-gradient(transparent 50%, rgba(255,240,0, .45) 50%);
}

.kiepc{
  display: none;
  }

  .box2_h1u{
    background-color: #333333f0;
    padding: 1em 0;
    margin: 1em 0.5em 0.5em 0.5em;
    font-size: 1.2em;
    word-break: keep-all;
    line-height: 1.4em;
    text-align: center;
    color: #fff;
  }
  .box2_h1u b{
    color:#ffff67;
  }
.tuduki{
  margin: 0.5em 0 0 1.5em;
  text-align: center;
  font-size: 0.8em;
}
.tuduki a{
  color: #666;
}

.tudukir{
  margin: 0.5em 0 0 1.5em;
  text-align: right;
  font-size: 0.8em;
}
.tudukir a{
  color: #666;
}


@media (max-width: 767px) {

  .box2_h1u{
    padding: 1em 0;
    margin: 0em 0em 0em 0em;
    font-size: 0.9em;
    width: 108%;
    margin-left: -4% !important;
  }


.topmain .grid-osusume2 {
  grid-row-gap: 15px !important;
  grid-row-gap: 50px;
}
.topmain .grid-osusume2t {
  grid-row-gap: 15px !important;
}

.topmain .grid-osusume5t {
  grid-row-gap: 15px !important;
}
.topmain .grid-osusume {
  grid-row-gap: 15px !important;
}
  .kiepc{
    display: inline;
    }

  .grid-osusume {
    grid-template-columns: repeat(2, 1fr);
    font-size: 0.8em;
  }

  .box_lc{
font-size: 0.9em;
margin: 0 1em;
  }





  .grid-osusume2 {
    grid-template-columns: repeat(2, 1fr);
    font-size: 0.8em;
    padding: 50px 0 50px 0;
  }
 .grid-osusume2 .grid-itemo:nth-child(3) {
  display: none;
}

  .grid-osusume2t {
    grid-template-columns: repeat(2, 1fr);
    font-size: 0.8em;
    padding: 50px 0 50px 0;
  }

  .grid-osusume5t {
    grid-template-columns: repeat(2, 1fr);
    font-size: 0.8em;
    padding: 50px 0 50px 0;
  }
  .box_title_c {
    width: 100%;
}
.box_title_c .box_title_c_a {
  font-size: 0.8em;
}
.huki-text p{
  font-size: 0.9em !important;

}
.kobetu {
  margin: 0 0 0 0px;
}

.kobetu div{
  max-width: 98%;
  border: none;
}

.kobetu img{
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/*.img_sec {
  width: 110% !important;
  margin-left: -4% !important;
}*/

.he_sec {
  width: 110% !important;
  margin-left: -4% !important;
}



}

.grid-itemo {
  width: 100%; /* グリッドアイテムの幅を親コンテナに合わせる */
  overflow: hidden; /* 画像がコンテナからはみ出ないようにする */
  text-align: center;
  position: relative;
}

.grid-itemo img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.grid-itemo b {
  color: red;
  font-size: 1.3em;
  margin-right: 2px;

}
.grid-itemot {
  width: 100%; /* グリッドアイテムの幅を親コンテナに合わせる */
  overflow: hidden; /* 画像がコンテナからはみ出ないようにする */
  text-align: center;
  position: relative;
}

.grid-itemot img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding-top: 23px;
  background-color: #fff;
}

.grid-itemot b {
  color: red;
  font-size: 1.3em;
  margin-right: 2px;

}

.okan1 {
  background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
  background-size: 20px 20px; /* 画像のサイズを設定 */
  padding-left: 24px; /* テキストと画像の間隔を設定 */
  margin-bottom: 10px; /* リスト間の余白 */
  background-image: url(../images/okan1.png); /* 1つ目の画像 */
}
.okan2 {
  background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
  background-size: 20px 20px; /* 画像のサイズを設定 */
  padding-left: 24px; /* テキストと画像の間隔を設定 */
  margin-bottom: 10px; /* リスト間の余白 */
  background-image: url(../images/okan2.png); /* 1つ目の画像 */
}
.okan3 {
  background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
  background-size: 20px 20px; /* 画像のサイズを設定 */
  padding-left: 24px; /* テキストと画像の間隔を設定 */
  margin-bottom: 10px; /* リスト間の余白 */
  background-image: url(../images/okan3.png); /* 1つ目の画像 */
}
.tuika{

}
.tuika::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url(../images/icon_images.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: -7px;
  margin-right: 4px;
}

.box_tuika{
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 1em;
  border-radius: 5px;
  text-align: center;
  margin: 2em 0 3em 0;
}

.note {
	padding-right: 1.5em;
	padding-left: 1.5em;
	line-height: 3em;
	background-image: linear-gradient(transparent 0, transparent 97%, #ddd 100%);
	background-size: 100% 3em;
}

.note2 {
	padding-right: 1.1em;
	padding-left: 1.1em;
	line-height: 2em;
	background-image: linear-gradient(transparent 0, transparent 97%, #ddd 100%);
	background-size: 100% 3em;
  font-size: 11px;
}
.w800{
  width: 800px;
  margin: 0 auto;
}
.w600{
  max-width: 600px;
  margin: 0 auto;
}

.w500{
  width: 500px;
  margin: 0 auto;
}
.w400{
  width: 400px;
  margin: 0 auto;
}
.note-count {
  counter-reset: note-counter;
}

.note-count .note {
  counter-increment: note-counter;
  margin-top: 1em;
}

.note-count .note h3 {
  text-align: left !important;
  margin: 0 -28px;
  text-indent: 18px;
  position: relative;
  top: 10px;
  background: linear-gradient(transparent 70%, #ffff667a -51%) !important;
  display: inline;
  padding-right: 1em;
}
.note-count .note h3:before {
  content: counter(note-counter) ". ";
}
h2.normalh2 {
  display: flex;
  justify-content: left;
  font-size: 22px;
  margin: 4em 0 1em -1em;
  font-weight: bold;
  align-items: normal;
}

h2.normalh2::before,
  h2.normalh2::after {
	content: '';
	width: 0px;
	height: 0px;
	background-color: #ccc;
}
h2.normalh2::before {
  content: '■';
  margin-right: 26px;
}


@media (max-width: 480px) {
/* div.box2_h1 の直前の hr */
div.box2_h1 + hr {
  width: 139%;
  color: black;
  margin: 0 0 20px -15px;
}

.kiji_title{
  min-width: 113% !important;
  margin-left: -25px;
}

/* div.box2_h1 の直後の hr */
div.box2_h1 + hr {
  width: 139%;
  color: black;
  margin: 0 0 20px -15px;
}
.kiji_title hr {
  border-top: 3px solid #fff;
  margin-top: -8px;
  padding-bottom: 5px;
  min-width: 113% !important;
  margin-left: -25px;
}
.box2_h1 {
  padding: 13px 0 15px 0;
  width: 108%;
  margin-left: -4% !important;
}
#top > div.kiji_title > h1 > span.spnone {
  display: none !important;
}
#top > div.kiji_title{
  text-align: center !important;
}
#top > div.kiji_title > h1 > span {
  display: block;
  text-align: center !important;}

  .main_hukibox100 {
    padding: 0 0;
  }

  .w800{
    width:98%;
    margin: 0 auto;
  }
  .w500{
    width:98%;
    margin: 0 auto;
  }

  .note {
    padding-right: 0.5em;
    padding-left: 0.5em;
    line-height: 1.8em;
    background-image: linear-gradient(transparent 0, transparent 97%, #ddd 100%);
    background-size: 100% 1.8em;
  }

  .note-count .note h3 {
    margin: 0 -9px;
}

h2.normalh2 {
  margin: 4em 0 1em 0em;
  font-size: 1em;
}
}


.img_sec {
  max-width: 100%; /* 画像が元々のサイズより大きくならないように設定 */
  height: auto; /* 画像の比率を維持 */
  display: block; /* 画像をブロック要素として扱う */
  margin-left: auto; /* 左マージンを自動に設定 */
  margin-right: auto; /* 右マージンを自動に設定 */
}

/* 600px以下の画面でのスタイル */
@media (max-width: 600px) {
  .img_sec {
    width: 140%;
    max-width: none; /* max-widthを無効にして130%に拡大 */
    position: relative; /* 相対位置 */
    left: 50%; /* 左から50%の位置に移動 */
    transform: translateX(-50%); /* X軸に沿って自身の幅の50%分左にずらす */
  }
}

.list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list-container li {
  width: 25%;
  margin-bottom: 20px;
  box-sizing: border-box;
  font-size: 0.8em;
}
.list-container li span{
display: block;
}

.list-container5 {
  display: grid;
  position: static;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 2em;
  width: 95%;
}

.list-container5 li {
  font-size: 0.8em;
  list-style: decimal-leading-zero;
}


.list-container4 {
  display: grid;
  position: static;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 2em;
  width: 95%;
}

.list-container4 li {
  font-size: 0.8em;
  list-style: decimal-leading-zero;
}




.list-container3 {
  display: grid;
  position: static;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 2em;
  width: 95%;
}

.list-container3 li {
  font-size: 0.8em;
  list-style: decimal-leading-zero;
}


.setum-box{
  margin: 1em 0;
  padding: 0 1em;
}

.text-with-icon {
  margin-bottom: 0px !important;
  background: linear-gradient(transparent 10%, #ffff66 70%); /* 下線部分を50%ではなく0%から開始 */
  background-size: 100% 2px; /* 下線の太さを2pxに設定 */
  background-position: 0 100%

}


.text-with-icon:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('/images/article_black_24dp.svg');
  background-size: cover;
  margin-right: 3px;
  vertical-align: middle;
  top: -3px;
  position: relative;

}

.text-with-icon span{
  margin-left: 2em;
}



.grid-aiueo {
  margin: 0;
  padding: 0;
  display: flex;
  width: fit-content; /* Add this line */
  flex-wrap: wrap; /* Add this line */
}


  .grid-aiueo li {
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    float: left;
    width: 3em;
    height: 3em; /* 正方形のために高さを追加 */
    border: 1px solid black;
    aspect-ratio: 1/1; /* 正方形の比率 */
  }
  .grid-aiueo ul li:nth-of-type(10n+1) {
    clear: both; /* 要素の左右に浮いた要素の影響を受けないようにする */
  }
  #aiueo ul li a {
    display: block;         /* aタグをブロック要素に */
    width: 100%;            /* aタグの幅を親要素に合わせる */
    height: 100%;           /* aタグの高さを親要素に合わせる */
    text-align: center;     /* テキストを中央揃え */
    text-decoration: none;  /* aタグの下線を消す */
    color: inherit;         /* aタグの文字色を親要素に合わせる */
    display: flex;          /* aタグをフレックスボックスに */
    justify-content: center; /* aタグ内のコンテンツを水平方向に中央配置 */
    align-items: center;    /* aタグ内のコンテンツを垂直方向に中央配置 */
}
  /* スマホ用のスタイル */
@media (max-width: 767px) {
  .list-container li {
    width: 28%;
    font-size: 0.75em;
    line-height: 1em;
    margin-bottom: 10px;
}
  .list-container {
    margin-left: -30px;
  }
  .text-with-icon span{
    margin-left: 0em;
    line-height: 1.5em;
  }
  .grid-aiueo{
    margin-left: -20px !important;
  }
  .grid-aiueo li {
font-size: 1.4em;
  }
  .grid-aiueo ul li:nth-of-type(5n+1) {
    clear: both; /* 要素の左右に浮いた要素の影響を受けないようにする */
  }
  .linkbox2{
    display: grid;
    grid-template-columns: 174px 174px;
    grid-gap: 10px;
    margin: 0 0 0 0px;


  }
}
.aiueo_top{
  margin-top: 2.5em;
  border: 1px solid #333;
  padding: 1em;
}

.grid_qa {
  display: grid;
  grid-template-columns: 50px auto;
  grid-column-gap: 15px;
  align-items: center;
  margin: 1em 0;
}

.box_q {
  width: 50px;
  height: 50px;
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #fff;
  font-weight: bold;
  border-radius: 5%; /* Make the box circular */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
  transition: transform 0.2s ease; /* Add a smooth transition effect */
}
.box_a {
  width: 50px;
  height: 50px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #fff;
  font-weight: bold;
  border-radius: 5%; /* Make the box circular */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
  transition: transform 0.2s ease; /* Add a smooth transition effect */
}
.grid_qa > div:last-child {
  font-size: 1.3em;
  display: block;
}

.grid_qa > div:last-child span {
  display: block;
  font-size: 0.8em;
}

.grid_3f {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  text-align: center;
}

.grid_3f > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.grid_3f > div img {
  margin-top: 0px;

}

.grid_3fn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  text-align: center;
  margin: -1.5em 0 0 2em;
}

.grid_3fn > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.grid_3fn > div a {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.grid_3fn > div img {
  margin-top: 0px;
}
.grid_3fn > div img:not([src*="/images/tushin/"]) {
  margin-top: 5px;
}

.grid_3fn div:nth-child(1) strong::before {
  content: url("/images/okan1.webp");
}

.grid_3fn div:nth-child(2) strong::before {
  content: url("/images/okan2.webp");
}

.grid_3fn div:nth-child(3) strong::before {
  content: url("/images/okan3.webp");
}

.cm_pr {
  background-color: gray;
  padding: 1.1em;
  color: #fff;
  margin: 0 -1.5em 2em -1.5em;
}

.cm_honbun{
  font-family: "Noto Sans JP", sans-serif;
  margin: 2em 1em 0 1em;
  padding: 0 1.5em 1.5em 1.5em;
  border: 1px solid #888;
  border-radius: 5px;
}
.cm_koe1{
  margin: -0.5em 0 1em 67px;
}
.cm_koe2{
  margin: 0em 0 2em 0.5em;
}
.cm_koe2 span{
/*display: inline-block;*/
font-size: 2em;
font-weight: bold;
text-indent: 1em;
background: linear-gradient(transparent 50%, #ffff667a 90%);
}
.arrow_box {
  position: relative;
  display: inline-block;
  background: #fff;
  border: 2px solid #333; /* 線幅を2pxに変更 */
  padding: 20px;
  margin: 0;
}
.arrow_box:after, .arrow_box:before {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  border: solid transparent;
}
.arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 8px; /* 線幅を10pxに変更 */
  margin-left: -8px;
}
.arrow_box:before {
  border-color: rgba(51, 51, 51, 0);
  border-top-color: #333;
  border-width: 11px; /* 線幅を14pxに変更 */
  margin-left: -11px;
}



.tsnc-btn {
  display: inline-block;
  min-width: 48%;
  padding: 12px 16px;
  border-radius: 4px;
  color: #fff;
  background: #1a73e8;
  font-weight: 700;
  transition: opacity 0.3s;
  box-sizing: border-box;
}

.tsnc-btn {
  border: 1px solid;
  background-color: #fff;
  transition: box-shadow .3s;
}

/*--------------------------------------
  吹き出し
--------------------------------------*/
.huki-box {
  margin-bottom: 0em;
}
.huki-right {
  text-align: right;
}
.huki-imgname {
  display: inline-block;
  text-align: center;
}
.huki-left .huki-imgname {
  margin-right: 20px;
}
.huki-right .huki-imgname {
  margin-left: 20px;
}
.pf-face-img, .wp-user-avatar {
  display: block;
  border-radius: 50%;
  object-fit: cover;
  box-sizing: border-box;
}

.huki-text p {
  margin-bottom: 0;
}
.huki-text {
  display: inline-block;
  position: relative;
  vertical-align: top;
  padding: 1em;
  border-radius: 4px;
  background: #f4f4f5;
  text-align: left;
}
/* blocksからの移植 */
.huki-text-before,
.huki-text-after {
  position: absolute;
  border-style: solid;
  content: "";
}
.huki-text-before {
  top: 17px;
}
.huki-text-after {
  top: 18px;
}
.huki-left .huki-text-before {
  border-width: 13px 15px 13px 0;
  border-color: transparent #f4f4f5 transparent transparent;
  left: -15px;
}
.huki-right .huki-text-before {
  border-width: 13px 0 13px 15px;
  border-color: transparent transparent transparent #f4f4f5;
  right: -15px;
}
.huki-left .huki-text-after {
  border-width: 12px 14px 12px 0;
  border-color: transparent #f4f4f5 transparent transparent;
  left: -12px;
}
.huki-right .huki-text-after {
  border-width: 12px 0 12px 14px;
  border-color: transparent transparent transparent #f4f4f5;
  right: -12px;
}
/* style-under */
.huki-box.is-style-huki-under {
  display: flex;
  flex-direction: column;
}
.huki-box.huki-right.is-style-huki-under {
  flex-direction: column-reverse;
}
.huki-right.is-style-huki-under .huki-imgname {
  display: flex;
  width: fit-content;
  align-items: flex-end;
  margin-right: 0;
  margin-bottom: 0.75em;
  margin-left: 0;
  align-self: flex-end;
  flex-direction: row-reverse;
}
.huki-left.is-style-huki-under .huki-imgname {
  display: flex;
  width: fit-content;
  align-items: flex-end;
  margin-right: 0;
  margin-bottom: 0.75em;
  margin-left: 0;
}
.huki-left.is-style-huki-under .huki-text-after {
  top: -16px;
  left: 42px;
  transform: rotate(90deg);
}
.huki-right.is-style-huki-under .huki-text-after {
  top: -16px;
  right: 42px;
  transform: rotate(-90deg);
}
.huki-left.is-style-huki-under .huki-text-before {
  top: -20px;
  left: 42px;
  border-width: 12px 14px 12px 0;
  transform: rotate(90deg);
}
.huki-right.is-style-huki-under .huki-text-before {
  top: -20px;
  right: 42px;
  border-width: 12px 0 12px 14px;
  transform: rotate(270deg);
}
.is-style-huki-under .huki-text {
  max-width: 100%;
}
@media (max-width: 1029px) {
  .huki-left.is-style-huki-under .huki-text-after {
      left: 28px;
  }
  .huki-right.is-style-huki-under .huki-text-after {
      right: 28px;
  }
  .huki-left.is-style-huki-under .huki-text-before {
      left: 28px;
  }
  .huki-right.is-style-huki-under .huki-text-before {
      right: 28px;
  }}
/* style-mind */
.is-style-huki-mind .huki-text-before {
  display: none;
}
@media (min-width: 1030px){
  .is-style-huki-mind.huki-left .huki-imgname {
      margin-right: 50px;
  }
  .is-style-huki-mind.huki-right .huki-imgname {
      margin-left: 50px;
  }
  .is-style-huki-mind .huki-text {
      max-width: calc(100% - 228px);
      border-radius: 32px;
  }
  .is-style-huki-mind .huki-text-after {
      top: 60px;
      width: 12px;
      height: 12px;
      border: none;
      border-radius: 50%;
      background: inherit;
  }
  .huki-left.is-style-huki-mind .huki-text-after {
      left: -43px;
  }
  .huki-right.is-style-huki-mind .huki-text-after {
      right: -43px;
  }
  .is-style-huki-mind .huki-text:before {
      position: absolute;
      top: 44px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: inherit;
      content: "";
  }
  .huki-left.is-style-huki-mind .huki-text:before {
      left: -28px;
  }
  .huki-right.is-style-huki-mind .huki-text:before {
      right: -28px;
  }}
@media (max-width: 1029px) {
  .huki-box.is-style-huki-mind {
      display: flex;
      flex-direction: column-reverse;
  }
  .huki-box.huki-right.is-style-huki-mind {
      flex-direction: column;
  }
  .is-style-huki-mind .huki-imgname {
      display: flex;
      width: fit-content;
      align-items: flex-end;
      margin-top: 10px;
      margin-right: 0;
      margin-left: 0;
  }
  .is-style-huki-mind.huki-right .huki-imgname {
      flex-direction: row-reverse;
      place-self: flex-end;
  }
  .is-style-huki-mind .huki-text-after {
      top: calc(100% + 20px);
      width: 12px;
      height: 12px;
      border: none;
      border-radius: 50%;
  }
  .huki-left.is-style-huki-mind .huki-text-after {
      left: 70px;
  }
  .huki-right.is-style-huki-mind .huki-text-after {
      right: 70px;
  }
  .is-style-huki-mind .huki-text:before {
      position: absolute;
      bottom: -20px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: inherit;
      content: "";
  }
  .huki-left.is-style-huki-mind .huki-text:before {
      left: 82px;
  }
  .huki-right.is-style-huki-mind .huki-text:before {
      right: 82px;
  }
  .is-style-huki-mind .huki-text {
      max-width: 100%;
      border-radius: 32px;
  }}
/* style-underimg */
.huki-box.is-style-huki-underimg {
  position: relative;
}
.is-style-huki-underimg .huki-text-before,
.is-style-huki-underimg .huki-name,
.is-style-huki-underimg .huki-text-after {
  display: none;
}
.huki-left.is-style-huki-underimg .huki-imgname {
  position: absolute;
  top: calc(100% - 32px);
  left: -14px;
  z-index: 1;
  margin-right: 0;
}
.is-style-huki-underimg .huki-imgname {
  position: absolute;
  top: calc(100% - 32px);
  z-index: 1;
}
.huki-left.is-style-huki-underimg .huki-imgname {
  left: -14px;
  margin-right: 0;
}
.huki-right.is-style-huki-underimg .huki-imgname {
  right: -14px;
  margin-left: 0;
}
.is-style-huki-underimg .huki-text {
  padding: 1.25em 1em 1.75em 1em;
}
@media (max-width: 1029px){
  .is-style-huki-underimg .huki-text {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
  }}
/* pc-sp */
@media (min-width: 1030px) {
  .huki-imgname {
      width: 100px;
  }
  .huki-imgname .pf-face-img,
  .huki-imgname .wp-user-avatar{
      width: 80px;
      height: 80px;
      border: 1px solid #eee;
      top: -12px;
  position: relative;
  }
  .huki-text {
      max-width: calc(100% - 228px);
  }
  .is-style-huki-underimg .huki-text {
      max-width: 100%;
  }
  .is-style-huki-underimg .pf-face-img {
      width: 60px;
      height: 60px;
  }
  .is-style-huki-underimg .huki-imgname {
      margin-right: 0;
  }
  .huki-left.is-style-huki-underimg .huki-imgname {
      width: 60px;
  }
  .huki-right.is-style-huki-underimg .huki-imgname {
      width: 60px;
  }}
@media (max-width: 1029px) {
  .huki-imgname {
      width: 70px;
  }
  .huki-imgname .pf-face-img,
  .huki-imgname .wp-user-avatar{
      width: 70px;
      height: 70px;
      border: 1px solid #eee;
  }
  .huki-text {
      max-width: calc(100% - 99px);
  }
  .is-style-huki-under .huki-text {
      max-width: 100%;
  }
  .is-style-huki-underimg .pf-face-img {
      width: 50px;
      height: 50px;
  }
  .is-style-huki-underimg .huki-imgname {
      margin-right: 0;
  }
  .huki-left.is-style-huki-underimg .huki-imgname {
      width: 50px;
  }
  .huki-right.is-style-huki-underimg .huki-imgname {
      width: 50px;
  }}


  .print_list{
    font-size: 1.5em;
    text-align: center;
  }
  .print_list a {
    padding: 0.5em 1.8em;
    border: #111 1px solid;
    border-radius: 5px;
    margin: 1em auto;
    display: block;
    min-width: 500px;
    width: fit-content;
    text-align: center;
  }
  .print_tangenm{
    margin: 1em 0;
    text-align: center;
  }
  .print_tangenm {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
  }
  .print_tangenm a {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  .print_tangenm a:hover {
    background-color: #0056b3;
  }

  #tangen{
    margin-left: 20%;
  }
  #tangen h2 {
    display: block;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 1.3em; /* 必要に応じて適切なフォントサイズを指定 */
    text-align: left;
    margin: 2em 0 0 -5%; /* 必要に応じて適切なマージンを指定 */
    color: #f00;
    font-weight: bold;
}

#tangen h3 {
  background: none; /* 背景をリセット */
  text-align: left; /* テキストを左揃えに */
  margin: 1em 0 0 -3%; /* 必要に応じてマージンをリセット */
  padding: 0; /* 必要に応じてパディングをリセット */
  font-size: 1.1em; /* 必要に応じてフォントサイズをリセット */
  font-weight: bold;
}
#tangen p {
  margin: 0; /* 上下の隙間をリセット */
  padding: 0.15em 0; /* 上下の隙間をliと同じくらいに調整 */
  list-style-type: disc; /* liのようにディスクをつける */
  display: list-item; /* リストアイテムとして表示 */
}


@media screen and (max-width: 600px) {
  .navs1 .table_st {
/*    margin-left: 0px;
    width: calc(100% - 20px) !important;*/
  }

  /*スマホ用セクション部分のレイアウトはじまり*/
  #section_box .container {
    display: grid;
  grid-template-areas:
     "header"
      "menu"
      "main"
      "nav"
      "footer";
  /*    grid-template-rows: 4em 100px 12px 4em 1fr 1fr 4em;*/
    margin: 0 auto;
   grid-template-columns:100%;
    justify-content: center;
    width: 96%;
      /*0823昔は90*/

    justify-items: center !important;
    align-items: center !important;
  }

  #section_box .container div.nav {

    margin-left: 0%;
    margin-right: 0%;
    border-radius: 5px;
    padding: 1em 1em 2em 1em;
    align-self: normal;
    display: grid;
    grid-template-areas:
    "nav_title"
    "nav1"
    "nav2"
    "nav3"
    "navi_tophe"
    ;
    grid-template-columns: 100%;
    justify-items: center;
    align-items: center;

  }

  #section_box .container div.nav_title {
  grid-area: nav_title;
  margin: 2em 0 1em 0;
  font-size: 1.5em;
  text-align: center;}

  #section_box .container div.nav1 {
  grid-area: nav1;
  width: 100%;}

  #section_box .container div.nav2 {
    grid-area: nav2;
  margin-top: -27px;
  width: 100%;
  }

  #section_box .container div.nav3 {
      grid-area: nav3;
      margin-top: -27px;
      width: 100%;
  }

  #section_box .container div.navi_tophe {
        grid-area: navi_tophe;
     }


  #section_box .container div.main {
    border-radius: 0px;
    max-width: 600px;
      /*0823昔は800*/
    padding: 0em 0em 2em 0em;
    position: relative;
    border-top: 1px solid #ccc;
  }

  #section_box .container div.pan {
    max-width: 600px;
  }
  .article img {
    width: 100%;
    height: auto;
    object-position: 0 0;
  }
  #tangen{
    margin-left: 8%;
  }

  #tangen h2 {
    text-indent: -1em;}
  .print_list{
    font-size: 1em;
  }
  }




.li_folder ul {
  column-count: 3;
  list-style-position: inside;
  column-gap: 20px; /* 列と列の間隔を20pxに設定 */
}



.side_imgbox{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5em 1.5em 1em 1.5em;
}

.side-huki .huki-text {
  width: calc(100% - 10px) !important;
  margin: 15px 0 0 0px !important;
  padding: 0px 0px 0px 0px;
  max-width: calc(100% - 150px);
}

.nav2 h4{
  margin-bottom: 0.5em;
}

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

  .nav2 h4{
    margin-left: 1em;
  }
  .cm_honbun {
    padding: 0 0 1.5em 7px;
    border: none;
    border-radius: 0;
    margin: 2em 0em 0 0em;
}

  .grid_qa {
    grid-template-columns: 30px auto;
    grid-column-gap: 10px;

}
.cm_koe1 {
  margin: -0.5em 0 1em 0px;
}
  .grid_qa > div:last-child {
    font-size: 1.0em;
  }

  .box_q {
    width: 30px;
    height: 30px;
    font-size: 1em;
}
.box_a {
  width: 30px;
  height: 30px;
  font-size: 1em;
}

.grid_3fn {
  margin: -1.5em 0 0 0em;
}
.grid_3fn {
  grid-template-columns: repeat(2, 1fr);
}
.grid_3fn > *:nth-child(3) {
  display: none;
}
.cm_koe2 span {
  margin-left: 5px;
}

  .fixed-message {
    width: 100%;
    text-align: center;
    background: #fff;
    padding: 5px 0;
    position: fixed;
    bottom: 75px;
    z-index: 10;
    border-top: 1px solid #ccc;
    font-size: 0.8em;
    background: #666;
    color: #fff;
    box-shadow: 10px 0px 7px 0px #fff;
}

  .footer_sumaho {
    width: 100%; /* フッターの幅を画面幅に合わせる */
    overflow: hidden; /* 余分な部分を隠す */
    position: fixed; /* 画面に固定 */
    bottom: 0; /* 画面の下端に配置 */
    z-index: 1000; /* fixed-messageより少し後ろに */
  }


  .print_list a {
    padding: 0.5em 0.8em;
    min-width: 340px;
}

.grid-osusume3 {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-gap: 5px;
  margin: 1.5em 0em;
}
.grid3no {
  font-size: 1em;
  top: -130px;
  padding: 0.7em 0em;
}

/*  .menu_fs .spacer {
    width: 390px;
    flex: 0 0 390px;
}*/

.li_folder ul {
  column-count: 1;
}


.side-huki .huki-text {
  max-width: calc(100% - 103px);
}


.relatedbox {
  margin: 0 auto;
  width: 100%;
}

}
.sima {
  background-color: #fff;
  background-image: linear-gradient(#fbfbfb 50%, transparent 50%, transparent);
  background-size: 10px 10px;
  padding: 3.5em 2em 1em 2em;
  margin: 0 -2em;
  border-bottom: 1px solid #ddd;
}


.sima2 {
  background-color: #fff;
  background-image: linear-gradient(#6495ed0f 50%, transparent 50%, transparent);
  background-size: 10px 10px;
  padding: 3.5em 2em 1em 2em;
  margin: 0 -2em;
  border-bottom: 1px solid #ddd;
}


.sima3 {
  background-color: #fff;
  background-image: linear-gradient(#ed64640f 50%, transparent 50%, transparent);
  background-size: 10px 10px;
  padding: 0.1em 2em 1em 2em;
  margin: 0 -2em;
  border-bottom: 1px solid #ddd;
}



 .sima4 {
  background-color: #fff;
  background-image: linear-gradient(#7a288a0f 50%, transparent 50%, transparent);
  background-size: 10px 10px;
  padding: 3.5em 2em 1em 2em;
  margin: 0 -2em;
  border-bottom: 1px solid #ddd;
}

.sima h2, .sima2 h2, .sima3 h2, .sima4 h2 {
  margin: 1em 0 0 0 !important;
}


.is-style-para-icon-mark3:before h2{
 margin: 1em 0 0 0 !important;
}

.tests {
  text-align: center;
}

.tests div {
  position: relative;
  display: inline-block;
/*  margin: 10px;*/
}
.tests strong {
  font-size: 1.2em;
  background: linear-gradient(transparent 50%, #ffff667a 50%);
  padding: 0 15px;
}
.tests img {
  width: 100%;
  height: auto;
  border: 2px solid #ccc; /* 枠線の色を設定 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* シャドウを追加 */
}
.imgwaku{
  padding: 15px;
}

.caption {
  position: absolute !important;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.6);
  color: black;
  padding: 10px;
  text-align: center;
  width: 95%;
  box-sizing: border-box;
}


.ribbont {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid #002a73;
  border-bottom: 50px solid transparent;
  z-index: 99;
}

.ribbont span {
  position: absolute;
  top: 2px;
  left: -36px;
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.ribbont2 {
  position: absolute !important;
  top: 34px;
  left: 2px;
  width: 0;
  height: 0;
  border-left: 50px solid #002a73;
  border-bottom: 50px solid transparent;
  z-index: 9;
}

.ribbont2 span {
  position: absolute;
  top: 2px;
  left: -37px;
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.ribbont2t {
  position: absolute !important;
  top: 26px;
  left: 2px;
  width: 0;
  height: 0;
  border-left: 50px solid #002a73;
  border-bottom: 50px solid transparent;
  z-index: 9;
}

.ribbont2t span {
  position: absolute;
  top: 4px;
  left: -39px;
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.ribbont2t2 span {
  position: absolute;
  top: 4px;
  left: -39px;
  color: white;
  font-size: 14px;
  font-weight: bold;
}
.additional-text {
  display: none;
}
.okannonet2t {
  position: relative;
  top: 66px;
  background-color: #fff;
  padding: 5px 5px 10px 5px;
  left: 6px;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #ffff66;
  text-decoration-thickness: 4px;
  text-decoration-skip-ink: none;
  display: flex;
  justify-content: flex-start;
  display: inline;
  font-size: 0.95em;
  border-radius: 25px;
}


.kiji_setu {
  margin: 0em 0 1.5em 0;
  font-size: 0.85em;
  text-align: left;
  position: relative;
  padding: 1.2em 1em 1em 1em;

}

.kiji_setu::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background: url(images/card.svg) no-repeat center center;
  background-size: contain;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.2em;
  margin-top: -0.1em;
}

.printsums_img {
  position: relative;
  overflow: hidden;
}
.printsumss_img {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
.image-link:hover .additional-text {
  display: none;
  position: absolute;
  top: 0;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 24px);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px 1.5em;
  box-sizing: border-box;
  z-index: 20;
}}

/*.image-link:hover .additional-text {
  display: flex;
}*/
.h2sapo {
  font-size: 0.9em;
  margin: 0 0 -1.3em 0;
  position: relative;
  left: 185px;
  color: #888;
  letter-spacing: -1px;
  }

.center-sapo {
  text-align: center;
}

.sidebar_best2{
  margin-top: 3em;
}


.ranking_best {
  display: grid;
  grid-template-areas:
  "r_number r_number r_number "
  "r_title r_title r_title"
  "r_sam nakami nakami"
  "r_sam ulink ulink";
  grid-template-columns: 130px 1fr 1fr;
  grid-template-rows: 1.2em 2.5em 1fr 2em;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  min-height: 130px;
  margin-bottom: 50px;
  padding: 0 0 0 10px;
}
.ranking_best div.r_number {
  grid-area: r_number;
}

.ranking_best div.r_title {
  grid-area: r_title;
  background: #fff;
  padding: 5px 0 0 5px;
  font-size: 1.2em;
  font-weight: 600;
  border-bottom: #333 1px dashed;
  margin-bottom: 2px;
}

.ranking_best div.r_sam {
  grid-area: r_sam;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 10px;
}

.ranking_best div.r_sam img {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ranking_best div.nakami {
  grid-area: nakami;
  background: #fff;
  padding: 15px 0em 0.5em 15px;
  font-size: 0.9em;}

  .ranking_best div.nakami:first-letter {
    font-size: 1.2em;
    font-weight: 400;
  }

  .ranking_best div.ulink {
    grid-area: ulink;
    background: #fff;
    text-align: right;
    padding: 15px 1em 0 0;
  }

  .textaka{
    color: crimson;
  }

.side_eyebox{
  margin: 1em 0;
  padding: 0 0.5em;
}
.side_eyebox img{
  display: inline;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}
.grid_under{
  margin-top: -2em;
}

.text_container{
  counter-reset: section;
  padding: 0 1.5em;
}

.link_textbox {
  margin: 1em auto;
  display: list-item;
  max-width: 640px;
  counter-increment: section;
  position: relative;
  list-style: none;
  border-bottom: 1px solid #ddd;
  padding: 0 2.5em 1em 2.2em;
}

.link_textbox::before {
  content: counter(section);
  position: absolute;
  left: -5px;
  top: 0px; /* 上からの距離を5pxに設定 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F4511E; /* 背景色 */
  color: #fff; /* 文字色 */
  width: 30px; /* 幅 */
  height: 30px; /* 高さ */
  border-radius: 50%; /* 角の丸み */
  font-family: 'Arial', sans-serif; /* フォント */
  margin-top: -2px; /* 上の余白 */
  padding-top: 3px;
}

.link_title {
  text-align: left;
  font-weight: 500;
}
.link_title  h3{
  text-align: left;
}


.link_textsetu{

}

.link_textsetu span {
  font-size: 0.8em;
  position: relative;
}

.link_textsetu span::before,
.link_textsetu span::after {
  position: relative;
  vertical-align: middle;
}

.link_textsetu span::before {
  content: "（";
  margin-right: 0.1em;
}

.link_textsetu span::after {
  content: "）";
  margin-left: 0.1em;
}



.link_textboxgl{
  float: left;
}

.link_textboxgr {
  float: right;
  text-align: center;
  font-size: 0.8em;
  color: #333;
  display: flex;
  flex-direction: column; /* 縦方向に配置 */
  align-items: center; /* 横方向の中央揃え */
  justify-content: center; /* 親要素内で中央揃え */
  height: 100%; /* 必要に応じて高さを調整 */
  padding: 1.5em 0 0 0;
}
.link_textboxgr2 {
  float: right;
  text-align: center;
  font-size: 0.8em;
  color: #333;
  display: flex;
  flex-direction: column; /* 縦方向に配置 */
  align-items: center; /* 横方向の中央揃え */
  justify-content: center; /* 親要素内で中央揃え */
  height: 100%; /* 必要に応じて高さを調整 */
}


.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.p100h3{
  font-size: 2em;
  color: #FFF;
  font-weight: bold;
  padding: 20px 30px;
  margin-bottom: 1em;
  color: #ffffff;
  text-align: left;
  background: #FA1E0E;
}
.p100box{
  margin: 0 3em 0 2em;
}
.p100box ul li{
list-style:decimal;
}
.p100box2{
  margin: 0 3em 0 2em;
}
.p100box2 ul li{
list-style:decimal;
}
.onlinebox{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
align-items: baseline;
  margin: 0 auto;
}



/* スマホの時 */
@media screen and (max-width: 768px) {
.spcentr{
  text-align: center;
}

  .side_eyebox a:nth-of-type(3) {
    display: none;
  }
  .side_eyebox {
    margin-top: 1.5em;
    display: flex;
    justify-content: center;
  }
  .side_eyebox img{
    margin: 0 10px;
}
.grid3no2 {
  font-size: 0.9em;
  padding: 0.5em 0.5em 0.2em 0.5em;
}
.grid_under{
  margin-bottom: 2em;
}

.grid3no4 {
  font-size: 0.85em;
}


.link_textbox {
  padding: 0 0em 1em 0.5em;
}


.link_textsetu span {
  display: block; /* 改行 */
  margin-left: 0.3em;

}

.link_textsetu span::before,
.link_textsetu span::after {
  display: none; /* 非表示 */
}
.link_textboxgr,.link_textboxgr2 {
  float: none; /* floatを解除 */
  width: 100%; /* 幅を100%に */
  margin: 0; /* マージンをリセット */
  display: flex;
  flex-direction: column; /* 縦方向に配置 */
  align-items: flex-end; /* 横方向の右端に揃え */
}
.link_textboxgr img,.link_textboxgr2 img{
  margin-right: 1.2em;
}
.link_textbox::before {
  top:0;
  margin-top: -3px;
}
.link_title {
  margin-left: 1.5em;
}
.link_textsetu{
  margin: 0 0 -50px 1em;
}
.p100box{
  margin: 1.5em 1em 0 2em;
}

.p100box2{
  margin: 1.5em 1em 0 0em;
}
.p100h3{
  margin: 0 -1em;
  padding-left: 1.5em;
}

.link_textbox::before {
  width: 24px; /* 幅 */
  height: 24px; /* 高さ */
  margin-top: 1px; /* 上の余白 */
  font-size: 0.8em;
}
.grid-osusume5 {
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 5px;

}



.list-container5 {
  display: grid;
  position: static;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 2em 0 0 0;
  width: 95%;
}

.list-container5 li {
  font-size: 0.8em;
  list-style: decimal-leading-zero;
}

.list-container4 {
  display: grid;
  position: static;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 2em 0 0 0;
  width: 95%;
}

.list-container4 li {
  font-size: 0.8em;
  list-style: decimal-leading-zero;
}




.list-container3 {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 2em 0 0 0;
  width: 98%;
}

.list-container3 li {
  font-size: 0.75em;
  list-style: decimal-leading-zero;

}
.kanrensam {
  width: 100%;
}
.link_pdf {
  padding: 1em 10px;
}
/*.kobetu:has(> div:nth-child(10)) {
  gap: 6px;
  padding: 0 0px 0 0px;
  font-size: 0.6em;
}*/

.onlinesums {
  display: grid;
  grid-template-areas:
  "onlinesums_titles"
  "online_img"
  "onlinesums_setu"
  "online_kaisetu";
  border: 1px solid #757575;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 1em 5px;
  box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
  width: 99%;
  position: relative;

}

.onlinesums_titles {
  grid-area: onlinesums_titles;
  font-size: 0.95em;
  text-align: center;
  color: #FFF;


}

.onlinesums_setu {
  grid-area: onlinesums_setu;
  padding: 0 1em 1em 1em;
  color: #000;
}
.onlinesums a {
  display: contents !important;
}
.online_img {
  grid-area: online_img;
  text-align: center;
  margin: 20px auto 5px auto !important;
  overflow: hidden;
  width: 180px !important;
  height: 120px !important;
  justify-content: center;
  align-items: center;
}
  .online_img img{
  /*object-fit: contain;*/
  padding: 5px;
  margin: 0 auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
  }

  .online_kaisetu {
    grid-area: online_kaisetu;
    line-height: 1.2em;
    font-size: 0.85em;
    padding: 1em 0.5em 1em 1em;
    margin-top: 2px;
    background-color: #cb9c9c0f;
    height: fit-content;
    z-index: 1;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: -20px;
    text-align: center;
    text-align: right;

  }


}

/* 1つ目の link_textbox のスタイル */
.link_textbox-1::before {
  background: #F4511E; /* 濃い色 */
}

/* 2つ目の link_textbox のスタイル */
.link_textbox-2::before {
  background: #888; /* 少し薄い色 */
}




.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid #e0e0e0;
  counter-reset: product-counter; /* カウンターをリセット */
}

.product-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "ama_image ama_title""ama_image ama_description""ama_image ama_comment""ama_image ama_rating";
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
  counter-increment: product-counter; /* カウンターをインクリメント */
}

.product-row:nth-child(odd) {
  background-color: #f9f9f9;
}

.product-row:nth-child(even) {
  background-color: #fdfdfd;
}

.ama_image {
  grid-area: ama_image;
  max-width: 160px;
  padding: 10px 20px 10px 10px;
}

.ama_image img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ama_title::before {
  content: counter(product-counter) ". "; /* カウンターの値を表示 */font-weight: bold;
  margin-right: 5px;
}

.ama_title {
  grid-area: ama_title;
  font-weight: bold;
  margin: 12px 0 5px 0;
  font-size: 0.9em;
}

.ama_description {
  grid-area: ama_description;
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ama_comment {
  grid-area: ama_comment;
  font-size: 12px;
  font-style: italic;
  color: #444;
}

.ama_rating {
  grid-area: ama_rating;
  font-weight: bold;
  color: #f90;
}
.grid_stitle {
  display: grid;
  grid-template-columns: 50px 1fr; /* 画像とテキストを同幅で配置 */
  align-items: center; /* 項目を縦方向に中央揃え */
  gap: 0; /* 画像とテキストの間のギャップを0に設定 */
  grid-template-rows: 3em; /* 行の高さを3emに設定 */
}

.multiplication-container {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: 0px;
  width: 100%;
  margin: auto;
}

.multiplication-container div{
  padding: 10px 10px 0px 30px;
}
.gridheader {
  grid-column: span 2;
  font-weight: bold;
  margin: 20px 0 0 0;
  background-color: #f0f0f0;
  padding: 10px;
}

.subgheader {
  text-align: left;
  background-color: #fff;
  padding: 10px;
  font-weight: bold;
}
.print-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.print-list li {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  color: #333;
}

.print-list li span {
  font-weight: bold;
  color: #000;
}

.keywords {
  padding: 5px 15px 7px 1.5em;
  font-size: 0.8em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.keywordsl {
  padding: 5px 15px 7px 1.5em;
  font-size: 0.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link_pdf h3{
   font-size: 0.95em;
  font-weight: bold;
  background: none;
  margin-bottom: 7px;
}
.eye100 {
  width: 100%;
  height: 200px;
  overflow: hidden;
  display: flex;
  justify-content: left;
  align-items: self-start;
}

.eye100 img {
  height: auto; /* 高さを100%に */
  max-width: 100%; /* 幅を自動調整 */
  border: 2px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.eye100::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%; /* 下部の高さ */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* 上部から下部に向かって白色のグラデーション */
}

.eye1002 {
  width: 100%;
  height: 200px;
  overflow: hidden; /* 画像がコンテナ外に出ないようにする */
  display: flex;
  justify-content: left;
  align-items: flex-start; /* 上揃え */
  position: relative; /* 子要素の相対位置指定用 */
}

.eye1002 img {
  position: relative; /* 相対位置指定 */
  top: -130px; /* 画像を上に30pxずらす */
  height: auto; /* 高さを自動調整 */
  max-width: 100%; /* 幅を最大100%に制限 */
  border: 2px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.eye1002::before,
.eye1002::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6%; /* グラデーションの高さ */
  pointer-events: none; /* グラデーションがクリックを妨げないように */
  z-index: 1; /* グラデーションを画像の上に */
}

.eye1002::before {
  top: 0; /* 上部に配置 */
  background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* 上部から白色へのグラデーション */
}

.eye1002::after {
  bottom: 0; /* 下部に配置 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* 下部から白色へのグラデーション */
}




.okan1in {
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-image: url(../images/okan1.png);
  position: relative;
  top: 140px;
  background-color: rgba(255, 255, 255, 0.7); /* 白色を半透明に */
  padding: 15px 5px 15px 32px;
  background-position: 6px 16px;
}
.okan2in {
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-image: url(../images/okan2.png);
  position: relative;
  top: 140px;
  background-color: rgba(255, 255, 255, 0.5); /* 白色を半透明に */
  padding: 15px 5px 15px 32px;
  background-position: 6px 16px;
}

.okannone {
  position: relative;
  top: 40px;
  background-color: #fff;
  padding: 5px 5px 10px 0px;
  left: -8px;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #ffff66;
  text-decoration-thickness: 4px;
  text-decoration-skip-ink: none;
  display: flex;
  justify-content: flex-start;
  display: inline;
}
.okannone2 {
  position: relative;
  top: 40px;
  padding: 5px 5px 10px 0px;
  left: -8px;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #ffff66;
  text-decoration-thickness: 4px;
  text-decoration-skip-ink: none;
  display: flex;
  justify-content: flex-start;
  display: inline;
  color: #fff;
  background-color: rgb(0 0 0 / 43%);
}
.okannonet {
  position: relative;
  top: 39px;
  background-color: #fff;
  padding: 5px 5px 10px 5px;
  left: 6px;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #ffff66;
  text-decoration-thickness: 4px;
  text-decoration-skip-ink: none;
  display: flex;
  justify-content: flex-start;
  display: inline;
  font-size: 0.95em;
  border-radius: 25px;
}

/*.okan3in {
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-image: url(../images/okan3.png);
  position: relative;
  top: 140px;
  background-color: rgba(255, 255, 255, 0.5);  白色を半透明に
  padding: 15px 5px 15px 32px;
  background-position: 6px 16px;
}*/




#quiz-container {
  background-color: white;
  padding: 20px;
/*  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
  max-width: 600px;
  width: 100%;
  font-size: 1.4em;
  text-align: center;
  margin: 3em auto 2em auto;
}
#quiz-container h1{
  margin-bottom: 1em;
  line-height: 1.4em;
}
#quiz-container h1 span{
  display: block;
}
#quiz-area{
  border-top: dashed 1px lightgray;
  margin-top: 1em;
}

#question{
  margin:0em 0 0em 0 ;
}

#quiz-area h1{
  margin: 1em 0 1em 0;
  font-size: 0.9em;
}

#retry-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2em 2px 1em 2px;
  transition-duration: 0.4s;
}
#retry-button:hover {
  background-color: #45a049;
}
#progress-bar {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: hidden;
}
#progress {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  border-radius: 5px;
  transition: width 0.5s ease-in-out;
}

#progress-text {
  text-align: left;
  color: #666;
  font-size: 14px;
  padding-top: 5px;
  text-indent: 6px;
}
.fade-out {
  opacity: 0;
  transition: opacity 0.5s;
}
#question-count{
  text-align: center;
}

#question-count-selector {
  margin-bottom: 20px;
}
.hidden {
  display: none;
}
#start-button{
  margin-top: 3em !important;
  display: block;
  margin: 0 auto;
  width: 12em;
}
#progress-container {
  display: none; /* 初期状態では非表示 */
  margin-top: 2em;
  padding-left: 1em;
}
.question-number{
  font-size: 0.8em;
  display: flex;
}
.question-content{
  margin-top: 15px;
  font-size: 2em;
}
#quiz-area table {
  border-collapse: collapse;
  margin: 20px 0 3em 0 !important;
  font-size: 0.8em;
}
#quiz-area td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
  padding: 5px 1px 5px 1em;
}

#quiz-area td:first-child {
  font-weight: bold;
  background-color: #f2f2f2;
}

#result-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
#start-area label, select {
  display: block;
}


#result-message {
  font-size: 1.2em;
  font-weight: bold;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.correct {
  background-color: rgba(0, 255, 0, 0.8);
  color: #006400;
}

.incorrect {
  background-color: rgba(255, 0, 0, 0.8);
  color: #ffffff;
}

.hidden {
  display: none !important;
}
#difficulty-container{
  text-align: center;
  display: grid;
}
#difficulty-select {
  font-size: 0.8em; /* 文字サイズ */
  padding: 10px; /* 内側の余白 */
  border: 2px solid #ccc; /* 枠線 */
  border-radius: 5px; /* 角を丸く */
  width: 100%; /* フォームの幅を100%に */
  background-color: #f9f9f9; /* 背景色 */
  appearance: none; /* デフォルトの矢印を非表示 */
  -webkit-appearance: none; /* Safari向け */
  -moz-appearance: none; /* Firefox向け */
  text-align: center;
}

/* 矢印アイコンを追加（オプション） */
#difficulty-select {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij4gICAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDE1LjVMMTkuMzcgOFEyMCA3LjcgMTkgNi41TDEyIDExLjVMNSAyLjVMMiAzLjUgTDEyIDE1LjVaIi8+PC9zdmc+');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

#control-buttons {
  margin-top: 20px;
}
#control-buttons button {
  margin-right: 10px;
  padding: 5px 10px;
}
#start-area{
  padding: 2em;
  display: grid;
  justify-content: center;
}

#quiz-container button {
  padding: 10px;
  font-size: 16px;
  min-width: 2em;
  min-height: 2em;
}



#answers {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr); /* 2列のグリッドを作成 */
  grid-template-rows: repeat(2, auto); /* 2行のグリッドを作成 */
  gap: 20px; /* ボタン間の間隔 */
  justify-items: center; /* ボタンを中央揃えにする */
}

#answers button {
  width: 6em;
  height: 6em;
  font-size: 16px; /* ボタンのフォントサイズ */
}

.quiz_table h3{
font-size: 1em;
display: block;
text-align: left;
text-indent: 1.5em;
}

.quiz_table table{
  width: 100%;
  font-size: 0.8em;
}

.quiz_table th, td {
  padding: 6px;
  text-align: left; /* 文字を左揃えにする */
  text-indent: 0.5em;
}

.quiz_table th {
  background-color: #f2f2f2;
  color: #333; /* 文字色 */
  padding: 10px 0; /* 余白 */
}
.quiz_table tr:nth-child(even) {
  background-color: #f9f9f9;
}
.kaito{
  font-size: 15px;
  text-align: left;
}
#control-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.matomeq{
  width: 100%;
}
#csv-info-container{
  font-size: 0.7em;
  }
  .tile_red{
    background: linear-gradient(176deg, #b30000, #e50000)!important;
  }

@media screen and (max-width: 767px) {
  .additional-text {
    display: flex;
    position: static;
    background: none;
    padding: 10px 15px;
    font-size: 16px;
    color: #333;
  }

/*  .kiji_setu {
    border-top: 1px dashed #ccc;
  }*/
  .additional-text {
    position: relative;
    /* padding: 0.5rem 0; */
    margin-bottom: 0.2rem;
    border-top: 1px dashed #888888a6;
    padding: 0 0;
    margin-top: -2px;}

.kiji_setu {
  color: #666;
        }
.box-numbers ul{
  margin-left: -40px;
}
.h2sapo {
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  }
.ranking_best {
    margin-right: 0.5em;}

.ranking_best div.r_sam {
display: initial;
padding-top: 20px;
  }

.okannone {
    top: 89px;
    left: 3px;
 }
 .okannonet {
  top: 32px;
  left: 3px;
}
.ribbont2 {
  top: 42px;
  left: 2px;
}
.ribbont2t {
  top: 20px;
  left: 2px;
}
.ribbont2t2 {
  top: 41px;
}
.okannonet2t {
  top: 51px;
}
table {
	width: calc(100% - -5px) !important;
	margin: 0px !important;}

  .quiz_table th, td{
    font-size: 0.8em;
     padding-left:2em;
    text-indent: 0em;
  }

  .quiz_table table {
    position: relative;
    left: -20px; /* 親要素のpaddingの分だけ左に移動 */
    width: calc(100% + 40px) !important; /* 親要素の幅 + 両側のpaddingの分 */
  }

}


#problem-type {
  text-align: center; /* テキストを中央揃え */
}
.nav_sptitle{
  display: none;
}

.navs1{
  border: 1px solid #ddd ;
  padding: 0 0 0 0;
}

.navs1 h3{
  margin-top: -1em !important;
}


.huki_ul{}
.huki_ul li{
  text-indent: 1em;
}
.huki_ul li a{
  text-indent: 1em;
  text-decoration: underline; /* リンクに下線を追加します */
  color: blue; /* リンクの色を青にします */
  font-weight: bold; /* テキストを太字にします */

}

.fade-in {
  animation: fadeIn 0.5s;
}
.fade-out {
  animation: fadeOut 0.5s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.answer-button {
  margin: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
}
.answer-button:hover {
  background-color: #f0f0f0;
}
.answer-button:active {
  transform: scale(0.98);
}
.list-container li.hidden {
  display: none;
}
#toggleButton {
  margin-top: 1em;
  padding: 0.5em 2em;
  font-size: 0.8em;
  cursor: pointer;

}
.img_dai {
  width: 565px;
  height: 401px;
  overflow: hidden;
}

.img_dai img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0px -10px;
}
.linksbox ul{
  margin-left: -1.5em;
}
.linksbox time{
 margin-left: -1em;
}
.linksbox ul li{
  margin:0 0 1em 0;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 5px;
}

.characters {
  display: flex;
  flex-wrap: wrap; /* 折り返しを設定 */
  list-style-type: none;
  padding: 0;
  margin: 0 -5px 3em -5px; /* マージンを調整 */
}

/*.character {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  min-width: 60px;
  white-space: nowrap;
}*/

.character {
  display: inline-block; /* インラインブロック要素にする */
  margin: 5px; /* 上下のマージンを設定 */
}

.character a {
  display: block; /* ブロックレベル要素にする */
  width: 60px; /* 幅を固定 */
  height: 60px; /* 高さを固定 */
  line-height: 60px; /* 高さと同じにするために行の高さを指定 */
  padding: 0; /* パディングを0に設定 */
  border: 1px solid #ccc;
  border-radius: 50%; /* 角丸にすることで正方形に見える */
  text-align: center;
  text-decoration: none; /* リンクの下線を削除 */
  background-color: #f0f0f0; /* 背景色を設定 */
  color: #333; /* 文字色を設定 */
  transition: background-color 0.3s ease; /* ホバー時のトランジション */
}

.character a:hover {
  background-color: #ddd; /* ホバー時の背景色を設定 */
}
.heading-container {
  text-align: left;
}

.sub-heading {
  font-size: 1em;
  margin-bottom: -0.5em;
}

.main-heading {
  font-size: 1.2em;
  position: relative;
  display: inline-block;
  margin-left: 1em;
}

.main-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 50%;
  width: 100%;
  background-color: yellow;
  z-index: -1;
}

.box-design1 {
  margin: 2em 0;
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

.box-design1 .box-title {
  padding: 13px 17px 14px 17px;
  color: #fff;
  background: #666;
  height: 50px;
  margin-left: 0em !important;
  position: relative;
  z-index: 3;
  margin-top: 30px !important;
  display: block;
}

.box-design1 .box-title:before {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
  top: -4px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  box-sizing: content-box;
  border-top: solid 2px #666;
  border-bottom: solid 2px #666;
}

.box-naka{
  padding: 1em;
}
.product-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-card {
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  /*align-items: center;     中央揃え */
  border: 1px solid #ddd; /* 枠線 */
  border-radius: 3px;
  max-width: 330px;       /* カードの幅 */
  margin: auto;           /* 中央に配置 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 0 0 20px 0;
}

.product-title {
  font-size: 0.9em;
  text-align: center;
  padding: 20px 2.5em 15px 2.5em;
  border-bottom: 1px solid #ccc;
  font-weight: bold;
  margin: 0 -2px 12px -2px;
  color: #fff;
  background-color: #666666;
  border-radius: 3px 3px 0 0;
  white-space: nowrap; /* テキストを折り返さない設定 */
  overflow: hidden; /* オーバーフローした部分を隠す設定 */
  text-overflow: ellipsis; /* オーバーフローしたテキストを省略記号で表示 */
  max-width: 102%; /* 親要素の幅に合わせる */
  box-sizing: border-box; /* paddingとborderを含めた要素の幅を調整 */
}

.product-image-wrapper {
  text-align: center;
  padding: 10px 0 10px 0;
  min-height: 191px;
}

.product-image-wrapper img {
  display: block;     /* 画像をブロックレベル要素に設定 */
  margin: 0 auto;     /* 自動で左右中央寄せ */
  max-width: 100%;    /* 画像の幅を親要素に収める */
  height: auto;       /* 縦横比を保持 */
  margin-bottom: 5px; /* 下部に余白を追加 */
}


.product-description {
  font-size: 0.9rem;
  margin-bottom: 3px;
  text-align: center;
  padding: 0 10px 10px 10px;
  border-bottom: 1px solid #ccc;

  /* 高さの設定 */
  line-height: 1.2; /* 1行あたりの高さ (rem単位) */
  min-height: calc(1.2rem * 5); /* 最小5行分の高さ */
  max-height: calc(1.2rem * 5); /* 最大5行分の高さ */

  overflow: hidden; /* オーバーフローした部分を隠す */
  display: -webkit-box; /* ブラウザー互換性のために必要 */
  -webkit-line-clamp: 5; /* 表示する最大行数 */
  -webkit-box-orient: vertical; /* ブロックレイアウトを縦方向に設定 */
  position: relative; /* 相対位置指定 */
}

.product-description::after {
  content: ''; /* 疑似要素の内容 */
  position: absolute; /* 絶対位置指定 */
  bottom: 0; /* 下端に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 幅100% */
  height: 20px; /* グラデーションの高さ */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* グラデーション */
}

.product-price {
  font-size: 20px;
  font-weight: bold;
  color: #d32f2f;
  text-align: center;
  margin-bottom: 5px;
  padding-top: 10px;
}

.purchase-button {
  display: inline-block;
  background-color: #f0c14b;
  color: #111;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  cursor: pointer;
  width: fit-content;
  margin: 0 auto;
  white-space: nowrap; /* テキストを折り返さない設定 */
  overflow: hidden; /* オーバーフローした部分を隠す設定 */
  text-overflow: ellipsis; /* オーバーフローしたテキストを省略記号で表示 */
  max-width: calc(14 * 1em);
}

.product-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #ffa500;
  margin-bottom: 10px;
}

.product-rating span {
  margin-left: 5px;
  color: #666;
}

.table-aiueo table {
  border-collapse: collapse;
  margin: 0 auto !important; /* テーブルを中央に配置 */
  table-layout: fixed; /* セルの幅を固定 */
  width: auto !important; /* テーブルの幅を自動調整 */
}

.table-aiueo td {
  border: 1px solid #ccc;
  width: 50px; /* セルの幅を指定 */
  height: 50px; /* セルの高さを指定 */
  font-size: 15px;
  text-align: center;
  vertical-align: middle; /* 縦方向の中央寄せ */
  padding: 0; /* セル内の余白を削除 */
text-indent: 0em;
}
.table-aiueo th {
  font-weight: bold; /* ヘッダーの文字を太字に */
  text-align: center;
  vertical-align: middle; /* 縦方向の中央寄せ */
  padding: 0; /* セル内の余白を削除 */
text-indent: 0em;
}
.imgwt {
  /* color: #fff; */
  display: inline;
  width: 30px;
  height: 30px;
  margin-left: 5px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.tokubetu-tile {
  position: relative;
  width: 720px;
  height: 395px;
  padding: 0 0 1em 0;
  margin: 0px 10px 10px 10px;
  border: 2px solid #555;
  top:-8px;
}

.tokubetu-tile2 {
  position: relative;
  width: 720px;
  height: 645px;
  padding: 0 0 1em 0;
  margin: 0px 10px 10px 10px;
  border: 2px solid #555;
  top:-8px;
}
.ribbonl2 {
  position: absolute !important;
  top: 0px;
  right: 0px;
  width: 0;
  height: 0;
  border-right: 60px solid #002a73;
  border-bottom: 60px solid transparent;
  z-index: 9;
}

.ribbonl2 {
  position: absolute !important;
  top: 0px;
  right: 0px;
  width: 0;
  height: 0;
  border-right: 60px solid #fff;
  border-bottom: 60px solid transparent;
  z-index: 9;
}

.ribbonl2 .text-container {
  position: absolute;
  top: -4px;
  left: 34px;
  transform: rotate(-50deg);
  transform-origin: center;
}

.ribbonl2 .letter {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  transform: rotate(50deg);
}
.ribbonl2 .letter2 {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  transform: rotate(50deg);
  position: relative;
  top:-6px;
}
.tokubetu-tile a,
.tokubetu-tile2 a {
  transition: background-color 0.3s ease;
}

a:hover .tokubetu-tile,
a:hover .tokubetu-tile2 {
  border: 2px solid #555;
}




.tokubetu-title{
  padding: 18px 0.5em 0em 1.2em;
  height: 3.7em;
  background-image: repeating-linear-gradient(-45deg, #010101, #333 2px, #010101 2px, #555 4px) !important;
  color: #fff;
}

.tokubetu-box{
  padding: 15px 1em 5px 1em;
  text-align: center;
}
.tokubetu-box img{
  display: inline;}
.tokubetu-box strong{
  font-size: 1.3em;
}

.tokubetu-ebox {
  width: 100%;
  height: 578px; /* 高さを固定 */
  overflow: hidden;
}

.tokubetu-ebox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tokubetu-box {
  width: 100%;
}
.tokubetu-ebox {
  width: 100%;
}

.tokubetu-tile table,
.tokubetu-tile2 table {
  width: 100%;
  border-collapse: collapse;
  margin: 2px 0;
  font-size: 0.9em;
  text-align: left;
  background: linear-gradient(to bottom, #f9f9f9 0%, #ffffff 100%);
}

.tokubetu-tile th,
.tokubetu-tile td,
.tokubetu-tile2 th,
.tokubetu-tile2 td {
  padding: 9px 2px;
  border-bottom: 1px solid #ddd;
}

.tokubetu-tile th:first-child,
.tokubetu-tile td:first-child,
.tokubetu-tile2 th:first-child,
.tokubetu-tile2 td:first-child {
  border-right: 1px solid #ddd;
}

.tokubetu-tile th,
.tokubetu-tile2 th {
  background-color: #fff;
  text-indent: 7px;
}

.tokubetu-tile tr:nth-child(even),
.tokubetu-tile2 tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Add this rule to remove right borders from all but the last column */
.tokubetu-tile tr :not(:last-child) :not(:first-child),
.tokubetu-tile2 tr :not(:last-child) :not(:first-child) {
  border-right: 0;
}

/* Remove bottom border from the last row */
.tokubetu-tile tr:last-child td,
.tokubetu-tile2 tr:last-child td {
  border-bottom: 0;
}

.tokubetu-tile td:not(:first-child),
.tokubetu-tile2 td:not(:first-child) {
  text-align: center; /* 左右中央揃え */
}

.tokubetu-tile th:not(:first-child),
.tokubetu-tile2 th:not(:first-child) {
  text-align: center; /* 左右中央揃え */
}


.allp_box h3 {
  padding: 24px 17px 24px 1.5em;
  color: #fff;
  position: relative;
  z-index: 3;
  margin: 3em -5px 0.5em -5px !important;
  display: block;
  text-align: center;
    word-break: keep-all;
  font-size: 1.8em;
  line-height: 1.5em;
  background-image: repeating-linear-gradient(-45deg, #010101, #333 2px, #010101 2px, #555 4px) !important;
  border-radius: 4px 4px 0 0;
}
.allp_box h3:before {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
  top: -4px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  box-sizing: content-box;
  border-top: solid 2px #111;
  border-bottom: solid 2px #111;
}


.allp_box h2 {
  display:block;
  font-size: 1.5em;
  text-align: left;
  margin: 1em 0 0.3em 0;
  }
  .allp_box h2::before,
  .allp_box h2::after {
    content:none;
  }

  .allp_box h2::before {
    margin-right: 0px;
  }
  .allp_box h2::after {
    margin-left: 0px;
  }

  .toggle-list {
   /*  display: none; 初期状態で非表示 */
    list-style: none;
    padding-left: 0;
    margin: 1.5em 0 0 0;
    counter-reset: list-counter; /* カウンターの初期化 */
}

.toggle-list li {
    display: flex; /* 横並びにする */
    align-items: center; /* 縦方向の中央揃え */
    counter-increment: list-counter; /* 各<li>でカウンターを増加 */
    margin-bottom: 10px; /* リストアイテム間の間隔を設定 */
    position: relative;
    padding-left: 3em; /* 数字のスペースを確保 */
}

.toggle-list li::before {
    content: counter(list-counter); /* カウンターの値を通常の数字で設定 */
    font-size: 1.2em;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    border-radius: 50%;
    background-color: #4CAF50;
    color: white;
    margin-right: 10px; /* 丸数字とテキストの間隔 */
    flex-shrink: 0; /* サイズが変わらないように固定 */
}

  .toggle-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    text-align: center;
    width: 100%;
    cursor: pointer;
    border: none;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .toggle-btn:hover {
    background-color: #45a049;
  }

  .tog-section {
    margin: 0 auto;
    padding: 0 80px;
    width: 650px;
  }


  .links-container {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2rem 1rem;
    background-color: #ffffff;
  }

  .category {
    margin-bottom: 3rem;
  }

  .category h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1a202c;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
  }

  .links-grid {
    display: grid;
  /*  gap: 1.25rem;*/
    grid-template-columns: 1fr;
  }

  .link-card {
    display: block;
    background-color: #ffffff;
  /*  border-radius: 0.5rem;*/
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    color: inherit;
  }

  .link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .link-content {
    display: flex;
    align-items: flex-start;
  gap: 0.8rem;
    padding: 1.5rem 1rem 0.7rem 1rem;
  }

  .rank-badge {
    background-color: #2d3748;
    color: #ffffff;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
  }

  .link-details {
    flex-grow: 1;
  }

  .link-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2563eb;
    background: none;
    text-align: left;
  }

  .source {
    font-size: 0.875rem;
    color: #6b7280;
  }

  .description {
    color: #4b5563;
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
  }
.list_moji2 {
  margin: 15px 0 5px 2em;
  border-bottom: 1px solid #ccc;
}

.list_moji2 span{
margin-left: 2em;
margin-top: -5px;
font-size: 0.85em;
color: #666;}

.list_moji2 img{
display: inline;
position: relative;
top: 6px;
margin-right: 3px;
opacity: 0.4;
}

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

.list_moji2 {
  margin: 15px 0 5px 0em;
  font-size: 0.8em;

}

.list_moji2 span{
margin-left: 0.5em;
margin-top:0em;
display: block;
}

  .tokubetu-box {
    padding: 1.2em 1em 5px 1em;
}

.tokubetu-ebox {
  border: 1px solid #002a73;
  padding: 5px 1em 5px 1em;
}

.tokubetu-tile,
.tokubetu-tile2 {
    width: 114%;
    height: auto !important;
    padding: 0 0 1em 0;
    margin: 0px 0px 10px 10px;
     position: relative;
    top: 8px;
}

.ribbonl2 {
  border-right: 55px solid #fff;
  border-bottom: 55px solid transparent;
  position: absolute;
  right: 0px;
}

.ribbonl2 .letter {
  font-size: 11px;

}
.ribbonl2 .letter2 {
  font-size: 11px;
  top:-6px;

}

  .nav_sptitle {
    display: block;
padding: 0.9em 1em 0.7em 1em;
    background-color: #4d4d4d;
    color: #fff;
}
  .nav2 h4{
    margin-left: 1em;
  }
  .cm_honbun {
    padding: 0 0 1.5em 7px;
    border: none;
    border-radius: 0;
    margin: 2em 0em 0 0em;
}

  .grid_qa {
    grid-template-columns: 30px auto;
    grid-column-gap: 10px;

}
.cm_koe1 {
  margin: -0.5em 0 1em 0px;
}
  .grid_qa > div:last-child {
    font-size: 1.0em;
  }

  .box_q {
    width: 30px;
    height: 30px;
    font-size: 1em;
}
.box_a {
  width: 30px;
  height: 30px;
  font-size: 1em;
}

.grid_3fn {
  margin: -1.5em 0 0 0em;
}
.grid_3fn {
  grid-template-columns: repeat(2, 1fr);
}
.grid_3fn > *:nth-child(3) {
  display: none;
}
.cm_koe2 span {
  margin-left: 5px;
}

  .fixed-message {
    width: 100%;
    text-align: center;
    background: #fff;
    padding: 5px 0;
    position: fixed;
    bottom: 75px;
    z-index: 10;
    border-top: 1px solid #ccc;
    font-size: 0.8em;
    background: #666;
    color: #fff;
    box-shadow: 10px 0px 7px 0px #fff;
}

  .footer_sumaho {
    width: 100%; /* フッターの幅を画面幅に合わせる */
    overflow: hidden; /* 余分な部分を隠す */
    position: fixed; /* 画面に固定 */
    bottom: 0; /* 画面の下端に配置 */
    z-index: 9; /* fixed-messageより少し後ろに */
    background-color: #fff;
  }

  .menu_fs {
    display: flex; /* フレックスボックスを使用 */
    flex-wrap: nowrap; /* 折り返さない */
    overflow-x: auto; /* 横方向スクロールを有効に */
    overflow-y: hidden; /* 縦方向のスクロールを無効に */
    width: 100%; /* コンテナの幅を画面幅に合わせる */
    scrollbar-width: none; /* スクロールバーを非表示に */
    -webkit-overflow-scrolling: touch; /* iOSデバイスでのスムーズなスクロール */
    height: 75px;
    padding: 15px 0 3px 0;
    background: #fff;
  }

  .menu_fs::-webkit-scrollbar {
    display: none; /* Chrome, Safariのスクロールバーを隠す */
  }

  .menu_fs li {
    flex: 0 0 25%; /* 各アイテムを画面幅の25%に設定し、拡大縮小しない */
    display: block; /* ブロック表示に */
    text-align: center; /* テキストを中央揃え */
  }
  .print_list a {
    padding: 0.5em 0.8em;
    min-width: 340px;
}

.grid-osusume3 {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-gap: 5px;
  margin: 1.5em 0em;
}
.grid3no {
  font-size: 1em;
  top: -130px;
  padding: 0.7em 0em;
}
.grid-osusume2 {
  grid-row-gap: 10px;
}
/*  .menu_fs .spacer {
    width: 390px;
    flex: 0 0 390px;
}*/

.li_folder ul {
  column-count: 1;
}


.side-huki .huki-text {
  max-width: calc(100% - 103px);
}


.relatedbox {
  margin: 0 auto;
  width: 100%;
}
.onlinebox{
  margin: 0 0 0 -20px;
  width: calc(100% + 28px);
}
.img_dai {
  width: 370px !important;
}

.linksbox{
  padding: 0 15px 0 5px;
  font-size: 0.9em;
}
h3{
  font-size: 1em !important;
}
body{
  font-size: 15px;
}
.printsumss {
  border: 1px solid #c0c0c0;
  margin: 1em 2px;
  width: 48%;
}

.printsums_yo_titless {
  padding: 1px 0.5em 0em 0.5em;}


  .toggle-list li {
    padding-left: 0em;
    margin: 5px 0px 5px 0px;
}
.tog-section {
  padding: 0 15px;
  width: 100%;
}
.tokubetu-box table td:nth-child(2),
.tokubetu-box table th:nth-child(2) {
  display: none;

}

.empty-tile {
  height: 0;
  visibility: hidden;
  border: 0px solid #fff;
}

.printsumss_img {
  position: relative;
}


.printsumss_img {
  position: relative; /* 子要素を絶対配置する基準 */
  display: inline-block; /* サイズを画像に合わせる */
}

.overlay-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  color: #333;
  padding: 8px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
  border-top: 1px #D8D8D6 solid;
}
.overlay-text .tag-size,
.overlay-text .tag-pagess {
  display: inline; /* 一列に並べる */
  margin: 0 1px; /* テキスト間の余白を設定 */
}

.overlay-text .tag-pagess {
  font-weight: bold;
}

.tile_red{
  background: linear-gradient(176deg, #b30000, #e50000)!important;
}
.product-card {
  width: 100% !important;
max-width: 500px;}
.product-container {
  padding: 0px;
}
.topimage img{
  max-width: 100%;
  height: auto;
}

}
/* 通常の表示用スタイル */
.image-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7列 */
  grid-template-rows: repeat(10, 1fr); /* 10行 */
  gap: 0; /* 列間・行間の隙間をゼロ */
  justify-items: center;
  align-items: center;
/*  width: auto;*/
  width: fit-content; /* コンテンツに合わせて幅を調整 */
  max-width: 800px;
  margin: -180px auto 0px auto;
  transform: scale(0.5); /* 70%縮小 */
  transform-origin: center;
  height: auto; /* 高さを自動調整 */
}
.print-erea1{
  margin: 0;
/* height: 300px;*/
}
/* 通常時のタイトルを非表示 */
.print-title {
margin-bottom: -110px;
}


#imageGrid img {
  width: 100%; /* グリッドセルを完全に埋める */
  height: 100%; /* グリッドセルを完全に埋める */
  object-fit: contain; /* アスペクト比を維持 */
  margin: 0; /* マージンを0に */
  padding: 0; /* パディングを0に */
  border: 0; /* ボーダーを0に */
}
#imageGrid2 img {
  width: 100%; /* グリッドセルを完全に埋める */
  height: 100%; /* グリッドセルを完全に埋める */
  object-fit: contain; /* アスペクト比を維持 */
  margin: 0; /* マージンを0に */
  padding: 0; /* パディングを0に */
  border: 0; /* ボーダーを0に */
}
.print-title {
  display: none;}



.container2{
  margin: 2em auto 0 auto;
}

@media screen and (max-width: 600px) {
  .print-title {
    margin-bottom: 60px;
    }
}




.container2{
  text-align: center;
  margin: 0 auto 50px auto;
}
.ulkazu ul{
  list-style: decimal;

}

.input-container {
  text-align: center;
  font-family: sans-serif;
}

input[type="text"] {
  width: 100%;
  max-width: 400px;
  font-size: 1.5em;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 10px;
  outline: none;
  text-align: center;
  transition: border-color 0.3s;
}

input[type="text"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


/* 横用通常の表示用スタイル */
.image-grid2 {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 7列 */
  grid-template-rows: repeat(7, 1fr); /* 10行 */
  gap: 0; /* 列間・行間の隙間をゼロ */
  justify-items: center;
  align-items: center;
/*  width: auto;*/
  width: fit-content; /* コンテンツに合わせて幅を調整 */
  max-width: 1300px;
  margin: -0px auto 0px auto;
  transform: scale(0.75); /* 70%縮小 */
  transform-origin: center;
  height: auto; /* 高さを自動調整 */
}




.print-title2 {
  margin-bottom: -60px;
  }

  .print-title2 {
    display: none;}

.huki-print{
margin: 4em auto -2em auto;
width: 580px;
}

@media screen and (max-width: 600px) {
    .print-title2 {
      margin-bottom: -23px;
      }

      input[type="text"] {
        max-width: 400px;
        font-size: 0.9em;
          }

.huki-print{
            margin: 4em auto -2em auto;
            width: 365px;
            }


  }
  .levelbox {
margin: 2em auto 0 auto;
text-align: left;
width: 400px;
}

/*.level-options {
}*/
.buttons {
  display: inline-block;
  padding: 12px 46px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: #fff;
  text-decoration: none;
  border-radius: 3px;
  border: 2px solid #333;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.buttons:hover {
  background-color: #333;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0,0,0,0.2);
}

/* ボタンを横並びに */
.button-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: #fff;
  text-decoration: none;
  border-radius: 3px;
  border: 2px solid #333;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

button:hover {
  background-color: #333;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0,0,0,0.2);
}


/*#generateButton {
  background-color: #28a745;
  color: white;
}

#generateButton:hover {
  background-color: #218838;
}

#printButton {
  background-color: #007bff;
  color: white;
}

#printButton:hover {
  background-color: #0056b3;
}

button:active {
  transform: scale(0.95);
}*/
.custom-list {
  list-style: none !important; /* デフォルトのリストマーカーを削除 */
  padding-left: 0;
}

.custom-list li {
  counter-increment: list-counter; /* カウンターを増やす */
  position: relative;
  padding-left: 2em; /* 丸数字のための余白 */
}

.custom-list li::before {
  content: "①"; /* デフォルトの丸数字（1番目） */
  font-size: 1.2em;
  position: absolute;
  left: 5px;
  top: -3px;
}

/* 2番目以降を動的に変更 */
.custom-list li:nth-child(2)::before { content: "②"; }
.custom-list li:nth-child(3)::before { content: "③"; }
.custom-list li:nth-child(4)::before { content: "④"; }
.custom-list li:nth-child(5)::before { content: "⑤"; }
.custom-list li:nth-child(6)::before { content: "⑥"; }
/* 必要に応じて追加 */

.radio-link {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  gap: 8px; /* ラベル間の余白 */
}

.radio-link label {
  display: flex;
  align-items: center; /* ○とテキストを揃える */
  cursor: pointer;
}

.radio-link input {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #666;
  border-radius: 50%;
  position: relative;
  margin-right: 8px;
  cursor: pointer;
}

.radio-link input:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.radio-link input:disabled {
  opacity: 0.5; /* 無効なボタンを薄くする */
  cursor: not-allowed;
}
.ptsample{
  margin: 1em 0 2em 0;
  text-align: center;
}

.ptsample img{
  display: inline-block;
  margin-right: 10px; /* 画像の間隔を調整 */
}
/* 全体のコンテナ */
.box_zentai {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 左をメインの幅、右を残り */
  gap: 10px; /* ボックス間の間隔 */
}

/* 左側のボックス */
.box_harlf1 {
  padding: 0 50px 0 0;
}

/* 右側のボックス */
.box_harlf2 {
  border: 3px solid #333;
  padding: 0px;
  border-radius: 5px;
  display: inline-grid;
  position: relative;
}
.box_harlftitle{
  padding: 18px 0.5em 0em 0.5em;
  height: 3.5em;
  z-index: 1;
  color: #fff;
  display: table;
  background-image: repeating-linear-gradient(-45deg, #010101, #333 2px, #010101 2px, #555 4px) !important;
  justify-content: center;
  align-items: center;
  position: relative;
}
.box_harlftitle span {
  display: table-cell; /* テーブルセルとして動作 */
  vertical-align: middle; /* 上下中央揃え */
  padding: 0 0; /* テキストの左右に少し余白を追加 */
  position: relative;
  top: -20px;
}

.box_harlf2b{
  padding:0.3em 1em 1em 1em;
  font-size: 0.9em;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.3em; /* 文字間隔 */
}
.boxs_kuchi{
  text-align: left;
  font-size: 0.9em;
  margin: -25px 1em 0 1em;
}

.boxs_kuchi2{
  text-align: left;
  font-size: 0.9em;
  margin: 5px 1em 0 1em;
}








.clock-selector {
  background: white;
  padding: 30px;
}
.select-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 10px;
}
select {
  padding: 10px 15px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 0 5px;
  background-color: white;
}
.clock-selector label {
  font-weight: bold;
  margin-left: 20px;
}
.clock-selector button {
  display: block;
  margin: 20px auto;
  padding: 12px 25px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.clock-selector button:hover {
  background-color: #3a7fcb;
}
.preview {
  text-align: center;
  margin: 20px 0;
}
.preview img {
  max-width: 300px;
  padding: 10px;
  background: white;
  margin: 0 auto;
}
.info {
  margin-top: 30px;
  padding: 2em 1.5em 1em 1.5em;
  background-color: #e8f4ff;
  border-radius: 5px;
  color: #555;
}


.mojiren_table {
  display: table;
/*  width: 600px;*/
  border-collapse: collapse;
  margin: 20px auto;
}
.mojiren_table > div {
  display: table-row;
}
.mojiren_table > div > div {
  display: table-cell;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  vertical-align: middle; /
}
.mojiren_table > div:first-child > div {
  background-color: #f4f4f4;
  font-weight: bold;
}




.mojiren_table2 {
  display: table;
/*  width: 600px;*/
/*  border-collapse: collapse;*/
  margin: 20px auto;
  border-spacing: 15px
}
.mojiren_table2 > div {
  display: table-row;
  text-align: center;
}
.mojiren_table2 > div > div {
  display: table-cell;
  border: 1px solid #757575;
  padding: 33px;
  text-align: center;
  position: relative;
  z-index: 200;
}
.mojiren_back {
  background-color: #f4f4f4;
  font-weight: bold;
}

.mojiren_table2 img {
width:240px;
height: auto;
}






.mojiren_box{

}

.mojiren_box table{
  width: 600px;
  margin: 0 auto;
}

input[type="text"] {
  font-size: 16px;
}


.full-row {
  grid-column: span 4;
  font-size: 0.9em;
  text-indent: -2em;
padding-left: 2em;
padding-top: 2em;
text-align: center;
}

/* スマホ時（幅が768px以下のとき）に上下レイアウトに変更 */
@media (max-width: 768px) {


.full-row {
  grid-column: span 2;
}

  .box_zentai {
      grid-template-columns: 1fr; /* 1列に変更 */
  }

  .mojiren_table {
    width: 100%;
    max-width:400px;
  }


 .mojiren_table2 {
    width: 100%;
    max-width: 400px;
    display: block; /* 変更: 横並びを縦並びにするため */
  }

  .mojiren_table2 > div {
    display: block; /* 変更: div内を縦に並べる */
    margin-bottom: 20px;
  }

  .mojiren_table2 > div > div {
    display: block; /* 変更: 横並びのセルを1列に変更 */
    margin-bottom: 20px; /* 余白を追加 */
  }

  .mojiren_table2 img {
    width: 100%; /* 画像を親要素の幅に合わせて大きく表示 */
    max-width: 100%; /* 最大幅を100%に設定 */
    display: block;
    margin: 0 auto;
  }


.sima {
  padding: 3.5em 1.5em 1em 1.5em;
  margin: 0 -2em;
}


.sima2 {
  padding: 3.5em 1.5em 1em 1.5em;
  margin: 0 -2em;
}


.sima3 {
  padding: 0.1em 1.5em 1em 1.5em;
  margin: 0 -2em;
}



 .sima4 {
  padding: 3.5em 1.5em 1em 1.5em;
  margin: 0 -2em;
}





}

.menu_fs {
  width: 100%;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
  scroll-behavior: auto;
}

.printsums_img {
  position: relative;
  width: 100%;
  height: auto;
}

.main-image {
  width: 100%;
  height: auto;
}

.main-image img {
  width: 100%;
  height: auto;
  display: block;
}

.attention-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none; /* クリックイベントが下のリンクに通るようにする */
}

.attention-overlay img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.post-date{
  margin: 0 0 -10px 0;
}



.listm_moji_sam {
  display: flex;
  gap: 0px 10px;
  flex-wrap: wrap; /* フレックスアイテムを折り返すために必要 */
  justify-content: flex-start;
  margin: 1em 1em 1em 1em;
  padding: 1em;
  position: relative;
}

.listm_moji_sam a {
  width: calc(100% / 2 - 10px) !important;
  text-decoration: none;
  display: block;
  /*flex: 1;  各アイテムを等しい幅にするために必要 */
  box-sizing: border-box; /* ボックスモデルを変更しないようにするために必要 */
  margin: 0; /* マージンをリセット */
  padding: 0; /* パディングをリセット */
}

.listm_moji_sam img {
  max-width: 100%;
  border: 1px solid #cccccc96;
  height: auto;
  width: 100%; /* 画像を親要素に合わせて幅を100%に設定 */
}

.maze-container {
            max-width: 1200px;
            margin: 0 auto;
        }


        .level-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 40px;
        }

        .info-card {
            background: #f8f9fa;
            color: #333;
            border: 2px solid #e9ecef;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            text-align: center;
            grid-column: span 4;
            margin-bottom: 20px;
        }

        .info-card h2 {
            font-size: 1.8em;
            margin-bottom: 15px;
            color: #495057;
            margin: 0.2em 0 0 0;
        }

        .info-card p {
            font-size: 1.1em;
            line-height: 1.6;
            color: #6c757d;
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-decoration: none;
            color: inherit;
        }

        .level-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        }

        .level-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--level-color);
        }

        .level-number {
            font-size: 3em;
            font-weight: bold;
            color: var(--level-color);
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .level-title {
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 8px;
            color: #333;
        }

        .level-subtitle {
            font-size: 1.1em;
            color: #666;
            margin-bottom: 15px;
        }

        .level-description {
            font-size: 0.9em;
            color: #888;
            line-height: 1.4;
        }

        .difficulty-indicator {
            display: flex;
            gap: 5px;
            margin-top: 15px;
        }

        .difficulty-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #e0e0e0;
        }

        .difficulty-dot.active {
            background: var(--level-color);
        }

        /* レベル別カラー */
        .level-1 {
            --level-color: #4CAF50;
        }

        .level-2 {
            --level-color: #8BC34A;
        }

        .level-3 {
            --level-color: #FFEB3B;
        }

        .level-4 {
            --level-color: #FF9800;
        }

        .level-5 {
            --level-color: #FF5722;
        }

        .level-6 {
            --level-color: #F44336;
        }

        .level-7 {
            --level-color: #9C27B0;
        }

        /* スマホ対応 */
        @media (max-width: 768px) {


            .level-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }

            .info-card {
                grid-column: span 2;
                padding: 20px;
            }

            .info-card h2 {
                font-size: 1.5em;
            }

            .info-card p {
                font-size: 1em;
            }

            .level-card {
                padding: 20px;
            }

            .level-number {
                font-size: 2.5em;
            }

            .level-title {
                font-size: 1.3em;
            }

            .level-subtitle {
                font-size: 1em;
            }
        }

        @media (max-width: 480px) {

            .level-card {
                padding: 15px;
            }

            .level-number {
                font-size: 2em;
            }

            .level-title {
                font-size: 1.2em;
            }
        }

        /* アニメーション */
        .info-card {
            animation: fadeInUp 0.6s ease forwards;
            opacity: 0;
            transform: translateY(30px);
        }

        .level-card {
            animation: fadeInUp 0.6s ease forwards;
            opacity: 0;
            transform: translateY(30px);
        }

        .info-card { animation-delay: 0.1s; }
        .level-card:nth-child(2) { animation-delay: 0.2s; }
        .level-card:nth-child(3) { animation-delay: 0.3s; }
        .level-card:nth-child(4) { animation-delay: 0.4s; }
        .level-card:nth-child(5) { animation-delay: 0.5s; }
        .level-card:nth-child(6) { animation-delay: 0.6s; }
        .level-card:nth-child(7) { animation-delay: 0.7s; }
        .level-card:nth-child(8) { animation-delay: 0.8s; }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* タッチデバイス用のアクティブ状態 */
        .level-card:active {
            transform: translateY(-2px);
            transition: transform 0.1s ease;
        }





.summersums {
  display: grid;
  grid-template-areas:
  "summersums_titles summersums_titles summersums_titles"
  "summer_img summersums_setu summersums_setu"
  "summer_kaisetu summer_kaisetu summer_kaisetu";
  border: 1px solid #757575;
  /* grid-template-rows: 1.5em 264px 2em; */
  margin: 1em 5px;
  box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
  width: 99%;
  position: relative;
}

.summersums_titles_ss {
  grid-area: summersums_titles;
  padding: 18px 0.5em 0.6em 1em;
  color: #000;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  font-weight: bold;
  background-image: repeating-linear-gradient(-45deg, #010101, #333 2px, #010101 2px, #555 4px);
  color: #fff;
}




.summersums_setu {
  grid-area: summersums_setu;
  padding: 1em;
  color: #000;
}
.summersums a {
  display: contents !important;
}
.summer_img {
  grid-area: summer_img;
  text-align: center;
  margin: 20px !important;
  overflow: hidden;
  width: 180px !important;
  height: 180px !important;
}
  .summer_img img{
  /*object-fit: contain;*/
  padding: 5px;
  margin: 0 auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
  }

  .summer_kaisetu {
    grid-area: summer_kaisetu;
    line-height: 1.2em;
    font-size: 0.85em;
    padding: 1em 0.5em 1em 1em;
    margin-top: 2px;
    background-color: #cb9c9c0f;
    height: fit-content;
    z-index: 1;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: -20px;
    text-align: center;

  }

/* HTML側で雲を表示するための要素を追加する必要があります */
/* 例: <div class="cloud-container"><div class="cloud-set-1">...</div></div> */
.summersums_titles {
  grid-area: summersums_titles;
  padding: 18px 0em 18px 3em;
  color: #fff;
  font-size: 1.4em;
  font-weight: bold;
  text-align: left;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #29b6f6 0%, #81d4fa 100%);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 0;
}
.summersums_titles::before { /* 太陽 */
    content: '☀';
    position: absolute;
    top: -10px;
    left: 15px;
    font-size: 2.5em;
    color: #FFD700;
    opacity: 0.9;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.7);
    transform: rotate(-15deg);
    z-index: 1;
}

 /* スマホ対応 */
@media (max-width: 768px) {

.summersums {
  display: grid;
  grid-template-areas:
  "summersums_titles"
  "summer_img"
  "summersums_setu"
  "summer_kaisetu";
  border: 1px solid #757575;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 1em 5px;
  box-shadow: 0 32px 30px -30px rgb(53 47 47 / 15%);
  width: 99%;
  position: relative;

}

.summersums_titles {
  grid-area: summersums_titles;
  font-size: 0.95em;
  color: #FFF;
  padding: 18px 0em 18px 3.5em;


}

.summersums_setu {
  grid-area: summersums_setu;
  padding: 0 1em 1em 1em;
  color: #000;
}
.summersums a {
  display: contents !important;
}
.summer_img {
  grid-area: summer_img;
  text-align: center;
  margin: 20px auto 5px auto !important;
  overflow: hidden;
  width: 180px !important;
  height: 120px !important;
  justify-content: center;
  align-items: center;
}
  .summer_img img{
  /*object-fit: contain;*/
  padding: 5px;
  margin: 0 auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
  }

  .summer_kaisetu {
    grid-area: summer_kaisetu;
    line-height: 1.2em;
    font-size: 0.85em;
    padding: 1em 0.5em 1em 1em;
    margin-top: 2px;
    background-color: #cb9c9c0f;
    height: fit-content;
    z-index: 1;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: -20px;
    text-align: center;
    text-align: right;

  }
}
 /* ページネーションのコンテナ */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin: 40px 0;
            padding: 0;
            list-style: none;
            flex-wrap: wrap;
        }

        /* 各ページネーション項目 */
        .pagination li {
            margin: 0;
        }

        /* リンクの基本スタイル */
        .pagination li a {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 12px;
            min-width: 44px;
            height: 44px;
            text-align: center;
            text-decoration: none;
            color: #374151;
            background-color: #ffffff;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
            box-sizing: border-box;
        }

        /* ホバー効果 */
        .pagination li a:hover {
            background-color: #f3f4f6;
            border-color: #9ca3af;
            color: #1f2937;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* アクティブページのスタイル */
        .pagination li.active a {
            background-color: #3b82f6;
            border-color: #3b82f6;
            color: #ffffff;
            font-weight: 600;
            cursor: default;
        }

        .pagination li.active a:hover {
            background-color: #3b82f6;
            border-color: #3b82f6;
            transform: none;
            box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
        }

        /* Prev/Nextボタンの特別スタイル */
        .pagination li:first-child a,
        .pagination li:last-child a {
            font-weight: 600;
            padding: 10px 16px;
            min-width: auto;
            width: auto;
        }

        /* フォーカス状態 */
        .pagination li a:focus {
            outline: 2px solid #3b82f6;
            outline-offset: 2px;
        }

        /* レスポンシブ対応 */
        @media (max-width: 640px) {
            .pagination {
                gap: 4px;
                margin: 20px 0;
            }

            .pagination li a {
                padding: 8px 10px;
                min-width: 36px;
                height: 36px;
                font-size: 13px;
            }

            .pagination li:first-child a,
            .pagination li:last-child a {
                padding: 8px 14px;
                min-width: auto;
            }
        }
#tiletop {
  scroll-margin-top: 5em;
}

.simple-box{
  border: 1px solid #ddd;
  padding: 1em;
}