@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/
body {
  font-size: 0.8rem;
  font-family: "noto sans jp", "Yu Gothic", "游ゴシック", "YuGothic",
    "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  font-weight: 350;
  color: #484848;
  word-wrap: break-word;
  /* padding-top: 9.8rem; */
}

.wdxl-lubrifont-sc-regular {
  font-family: "WDXL Lubrifont SC", "SimSun", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  body {
    font-size: 1rem;
  }
}

ul,
li {
  list-style: none;
}

h2 {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.1em;
}

/* small {
	background: #333;
	color: #fff;
	display: block;
	text-align: center;
	padding: 20px;
} */

/* section {
	padding: 30px;
}

section:nth-child(2n) {
	background: #f3f3f3;
} */

a {
  color: #001b3f;
  text-decoration: none;
}

a:hover {
  color: #acacac;
}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
}

button a {
  color: #fff;
}

button a:hover {
  color: #fff;
}

button:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
}

* {
  box-sizing: border-box;
}

h4 {
  font-size: 120%;
  letter-spacing: 0.1ems;
  padding: 0 1% 1% 0;
}

h5 {
  font-size: 110%;
  letter-spacing: 0.1ems;
  font-weight: normal;
  padding: 1% 1% 0 1%;
}

p {
  letter-spacing: 0.1ems;
  padding: 0 1% 1% 1%;
}

/*========= headerCSS ===============*/
header {
  display: flex;
  padding: 8px 0 0 0;
  background: #fff;
  border-bottom: 2px solid rgb(255, 123, 0);
  z-index: 1;
}

.header {
  /*追随css*/
  position: sticky;
  top: 0;
}

/*==header-contact-bnr*/
.contact-bnr {
  background: rgb(255, 123, 0);
  text-align: center;
  padding: 3.2% 1%;
  color: #fff;
  /* position: static; */
  width: 120px;
  position: fixed;
  top: 0px;
  /* 上から20pxの位置 */
  right: 0px;
  /* 右から20pxの位置 */
  z-index: 1;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .contact-bnr {
    padding: 1%;
    font-size: 14px;
  }
}

.contact-bnr a {
  color: #fff;
}

.contact-bnr:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
}

.logo {
  margin-left: 1%;
  width: 240px;
}

.logo img {
  width: 100%;
  margin-top: 10%;
}

/*========= Fv CSS ===============*/

.fv img {
  width: 100%;
}

.fv-text {
  margin-top: -32%;
  margin-left: 4%;
}

.fv h1 {
  font-size: 0.8rem;
  color: #333;
  text-shadow: rgb(248, 247, 246) 1px 0 10px;
}

.fv h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 4% 0 8% 0;
  color: rgb(255, 123, 0);
  text-shadow: rgb(255, 190, 137) 1px 0 10px;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .fv-text {
    margin-top: -32%;
    margin-left: 8%;
  }

  .fv h1 {
    font-size: 1.2rem;
    color: #333;
    text-shadow: rgb(248, 247, 246) 1px 0 10px;
  }

  .fv h2 {
    font-size: 2.4rem;
    margin: 8% 0 16% 0;
    color: rgb(255, 123, 0);
    text-shadow: rgb(255, 190, 137) 1px 0 10px;
  }
}

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
nav {
  /*background:#333;
	color:#fff;*/
  color: #333;
  text-align: center;
}

/*ナビゲーションを横並びに*/
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

/*2階層目以降は横並びにしない*/
nav ul ul {
  display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li {
  position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 20px 20px;
  transition: all 0.3s;
}

nav ul li li a {
  padding: 10px 35px;
}

nav ul li a:hover {
  color: #999;
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 25px;
  width: 8px;
  height: 8px;
  /* border-top: 2px solid #999;
	border-right: 2px solid #999; */
  border-top: 2px solid rgb(255, 123, 0);
  border-right: 2px solid rgb(255, 123, 0);
  transform: rotate(135deg);
}

/*3階層目を持つliの矢印の設定
nav ul ul li.has-child::after{
	content:'';
	position: absolute;
	left:6px;
	top:17px;
	width:6px;
	height:6px;
    rotateborder-top: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(45deg);
}
*/
/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul {
  /*絶対配置で位置を指定*/
  position: absolute;
  left: 0;
  top: 62px;
  z-index: 4;
  /*形状を指定*/
  background: #757778;
  width: 200px;
  /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
  /*アニメーション設定*/
  transition: all 0.3s;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul {
  visibility: visible;
  opacity: 1;
}

/*==ナビゲーションaタグの形状*/

nav li.has-child ul li a {
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
}

nav li.has-child ul li:last-child > a {
  border-bottom: none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active {
  background: #cacbcc;
}

/*==3階層目*/

/*3階層目の位置
nav li.has-child ul ul{
	top:0;
	left:182px;
	background:#66ADF5;
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
	background:#448ED3;
}
*/

/*==980px以下の形状*/
@media screen and (max-width: 980px) {
  nav {
    padding: 0;
  }

  nav ul {
    display: block;
  }

  nav li.has-child ul,
  nav li.has-child ul ul {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    visibility: visible;
    /*JSで制御するため一旦表示*/
    opacity: 1;
    /*JSで制御するため一旦表示*/
    display: none;
    /*JSのslidetoggleで表示させるため非表示に*/
    transition: none;
    /*JSで制御するためCSSのアニメーションを切る*/
  }

  nav ul li a {
    color: #fff;
    border-bottom: 1px solid #ffffff;
  }

  /*矢印の位置と向き*/

  nav ul li.has-child::after {
    right: 20px;
  }

  nav ul ul li.has-child::after {
    transform: rotate(135deg);
    right: 20px;
  }

  nav ul li.has-child.active::after {
    transform: rotate(-45deg);
  }
}

/*========= オーバーレイCSS ===============*/
.sp-menu {
  margin-left: auto;
  margin-right: 32%;
}

.sp-menu #open {
  font-size: 50px;
  line-height: 64px;
  cursor: pointer;
}

.sp-menu #open.hide {
  display: none;
}

/* main {
	padding: 0 16px;
} */

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  padding: 64px 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s;
  z-index: 1;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.overlay #close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 32px;
  cursor: pointer;
  color: #fff;
}

.overlay ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.overlay li {
  /* margin-top: 24px; */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s;
}

.overlay.show li {
  opacity: 1;
  transform: none;
}

.overlay.show li:nth-child(1) {
  transition-delay: 0.1s;
}

.overlay.show li:nth-child(2) {
  transition-delay: 0.2s;
}

.overlay.show li:nth-child(3) {
  transition-delay: 0.3s;
}

.pc-menu {
  display: none;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .pc-menu {
    display: block;
    margin-left: auto;
    margin-right: 12%;
    font-size: 14px;
  }

  .sp-menu {
    display: none;
  }
}

/*========= オーバーレイCSS ===============*/

/*========= container CSS ===============*/
main {
  margin: 0;
}

.main {
  margin-top: 2%;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .main {
    margin-top: 4%;
  }
}

.cont {
  padding: 2% 2% 0 2%;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .cont {
    margin: 0 auto;
    width: 1120px;
  }
}

.products_content {
  padding: 2%;
}

.fade {
  /* background: #1688fa; */
  opacity: 0;
  /* 最初は非表示にしておく */
  transition: all 2s;
  /* 動きを滑らかに */
}

.fadeIn {
  opacity: 1;
}

.cont h3 {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  color: rgb(255, 123, 0);
  margin-bottom: 5%;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .cont h3 {
    margin-bottom: 2%;
    padding-bottom: 2%;
  }
}

.products_content h3 {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  color: rgb(255, 123, 0);
  margin-bottom: 5%;
}

.tittle01 {
  width: 100%;
  border-bottom: 2px solid rgb(255, 123, 0);
  box-sizing: border-box;
  padding-bottom: 0.8%;
}

/*========= TOP products item CSS ===============*/
.slider {
  width: 96%;
}

.slide_box {
  background-color: #ffffff;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  padding: 4%;
  text-align: center;
}

.slider img {
  margin: 8% auto;
}

.item_text {
  font-size: 14px;
  font-weight: 600;
  background: #f3f3f3;
  color: #515151;
  padding: 2% 8%;
  margin-bottom: 2%;
  border-radius: 100px;
  border: 1px solid #c7c7c7;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .item_text {
    font-size: 14px;
    font-weight: 600;
    background: #f3f3f3;
    color: #515151;
    padding: 2% 16%;
    margin-bottom: 2%;
    border-radius: 100px;
    border: 1px solid #c7c7c7;
  }
}

/*========= content-bg CSS ===============*/
.bg_b {
  background: #f6fcff;
}

.bg_y {
  background: #fffcf5;
  padding-bottom: 1%;
}

.bg_b2 {
  background: #f6fcff;
  padding: 2% 1% 0% 1%;
}

/*========= btn CSS ===============*/
.tc {
  text-align: center;
}

.link_button {
  width: 50%;
  text-align: center;
  padding: 2% 2%;
  margin: 2% auto;
  border: 1px solid #999;
  border-radius: 100px;
}

/* ==980px以上の形状 */
@media (min-width: 980px) {
  .link_button {
    width: 240px;
    padding: 1% 2%;
  }
}

/*========= about_us CSS ===============*/
.about_us {
  display: block;
}

.about_us_box {
  margin: 2% auto;
  width: 100%;
}

.about_us_box img {
  width: 100%;
  text-align: center;
}

.about_us button {
  width: 50%;
  padding: 2% 4%;
  margin: 4% auto 4% 24%;
  border: 1px solid #999;
  border-radius: 100px;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .about_us {
    display: flex;
  }

  .about_us_box {
    margin: 5% auto;
    width: 50%;
    box-sizing: border-box;
  }

  .about_us_box img {
    width: 88%;
    margin: 1% 8%;
  }

  .about_us button {
    width: 240px;
    padding: 2% 4%;
    margin: 32% auto 4% auto;
    border: 1px solid #999;
    border-radius: 100px;
  }
}

/*========= button chevron-right CSS ===============*/
.bi-chevron-right {
  color: rgb(255, 123, 0);
  margin-left: 2%;
}

/*========= PICK_UP CSS ===============*/
.pickup_box {
  width: 100%;
  padding: 4%;
  box-sizing: border-box;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .pickup_box {
    width: 100%;
    padding: 4% 16%;
    box-sizing: border-box;
  }
}

/*========= NEWS CSS ===============*/
.news_box {
  width: 100%;
  margin: 4% auto;
  padding: 4%;
  border: 1px solid rgb(228, 228, 228);
  box-sizing: border-box;
}

.news_box dl {
  margin: 1% 0;
}

.news_box dt {
  margin-top: 1%;
}

.news_box dd {
  padding-bottom: 1%;
  border-bottom: 1px dotted #c7c7c7;
}

/*========= JOURNAL CSS ===============*/
.journal {
  display: grid;
}

.journal li {
  width: 80%;
  text-align: center;
  margin: 2% auto;
}

.journal li img {
  width: 100%;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .journal {
    display: flex;
  }

  .journal li {
    width: 42%;
    text-align: center;
    margin: 2% auto;
  }

  .journal li img {
    width: 80%;
  }
}

/*========= INFOMATION CSS ===============*/
.info {
  display: grid;
}

.info li {
  width: 80%;
  text-align: center;
  margin: 2% auto;
}

.info li img {
  width: 90%;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .info {
    display: flex;
  }

  .info li {
    width: 30%;
    text-align: center;
    margin: 2% auto;
  }

  .info li img {
    width: 88%;
  }
}

/*========= CONTACT CSS ===============*/
.contact {
  display: grid;
}

.contact {
  background: #fafafa;
  border: 1px solid #c5c5c5;
  border-radius: 8px;
  text-align: center;
}

.cont_box01 {
  width: 100%;
  margin: 2%;
}

.contact h4 {
  width: 92%;
  background: rgb(255, 123, 0);
  padding: 2%;
  margin: 3%;
  color: #fff;
  text-align: center;
  border-radius: 4px;
}

.contact_text {
  text-align: left;
  margin: 2%;
  font-weight: 600;
}

.contact_tel a {
  color: rgb(255, 123, 0);
  font-size: 320%;
  font-weight: 600;
}

.bi-telephone {
  margin-right: 1%;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .contact {
    display: flex;
  }

  .contact {
    width: 80%;
    margin: 0 auto;
  }

  .cont_box01 {
    width: 50%;
    /* margin: 2%; */
  }
}

.contact_btn {
  background: rgb(255, 123, 0);
  width: 64%;
  text-align: center;
  color: #fff;
  padding: 4% 8%;
  margin-top: 5%;
  border-radius: 100px;
}

.contact_btn {
  font-size: 90%;
}

.bi-envelope-fill {
  margin-right: 5%;
}

/*========= FOOTER CSS ===============*/
footer {
  margin-top: 4%;
  border-top: 2px solid rgb(255, 123, 0);
  text-align: center;
  font-size: 10px;
  margin-bottom: 2%;
}

.footer_nav {
  display: flex;
}

.footer_nav {
  width: 94%;
  margin: 2% auto;
  box-sizing: border-box;
}

.footer_nav li {
  border-right: 1px solid #f1f1f1;
  padding: 0 2%;
}

.footer_nav li:last-child {
  border-right: 0px solid #f1f1f1;
  padding: 0 2%;
}

.footer_copy {
  display: flex;
  margin-top: 2%;
}

.footer_copy_text {
  text-align: right;
  margin-top: 1%;
  margin-left: 30%;
}

footer img {
  width: 12%;
  margin: 0 2%;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  footer {
    font-size: 12px;
  }

  .footer_nav {
    display: flex;
  }

  .footer_nav {
    width: 40%;
    margin: 2% auto;
  }

  .footer_copy_text {
    text-align: right;
    margin-top: 1%;
    margin-left: 60%;
  }

  footer img {
    width: 10%;
    height: 10%;
    margin: 0 2%;
  }
}

.bi-arrow-up-circle-fill {
  font-size: 240%;
  margin: 4% auto;
}

/*========= CONTENT CSS ===============*/
.cont_tittle {
  background: rgb(235, 235, 235);
  color: #484848;
  padding: 2%;
  margin: 0;
}

.pan_menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin-top: 1%;
  color: #484848;
  font-size: 96%;
}

.pan_menu li {
  margin-left: 0.8em;
}

.pan_menu a {
  color: #484848;
  text-decoration: underline;
}

.pan_menu li:not(:first-child) {
  /* 2番目以降のHliに適用 */
  position: relative;
  padding-left: 1em;
  /* アイコンとテキストの間に隙間 */
}

.pan_menu li:not(:first-child):before {
  /* アイコンを擬似要素で生成 */
  content: "/";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /* アイコンを垂直中央に */
}

/*========= products items CSS ===============*/
.products_items {
  display: block;
  flex-wrap: wrap;
  padding: 0;
}

.products_items li {
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  padding: 0;
  margin: 1% 0; /* モバイル表示の余白はそのまま残します */
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

/* ==980px以上の形状 */
@media (min-width: 980px) {
  /* products_areaは中央寄せのために必要であれば残しますが、
     itemsが中央寄せであれば不要な場合もあります。*/
  .products_area {
    /* text-align: center; は、子要素のインライン要素を中央寄せにするため、
       items自体を中央寄せにするには不向きです。 */
  }

  .products_items {
    /* 中央に固定幅で表示するための設定 */
    width: 100%; /* 全幅を使用 */
    max-width: 1200px; /* 例えば、最大幅を1200pxに固定（適宜調整してください） */
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto; /* 中央寄せ */
    padding: 0; /* 左右のpaddingをリセット */
    /* 左右の余白を制御しやすくするため、親要素ではなくliで調整することを推奨します */
  }

  .products_items li {
    /* 3カラム固定のための設定 */
    /* 幅を約1/3に設定し、marginを調整して3カラムにします。
       ここでは、左右に1%ずつマージンを取り、計2%の空間を3つのアイテムで分けます。
       (100% - 2% * 3) / 3 = 31.333% となりますが、ここでは簡潔に */
    width: calc(100% / 3 - 2%); /* 100%を3で割り、左右のマージン2%を引く */
    margin: 1%; /* 上下左右に1%のマージン */
    box-sizing: border-box; /* paddingとborderをwidthに含める場合は追加 */
    
    flex: 0 0 auto; 
    
    padding: 20px; /* 必要であればコンテンツのパディングを設定 */
  }

  .products_items li img {
    width: 100%;
    height: auto; /* 画像のアスペクト比を維持 */
  }
}

.products_head_img {
  width: 100%;
}

.products_items h4 {
  /* background: #015994; */
  color: #252525;
  padding: 2%;
  border-bottom: 1px solid #c7c7c7;
}

.products_items p {
  text-align: left;
  margin: 2% 4%;
}

.link_btn {
  display: flex;
  justify-content: space-between;
  /* ボタンを左右に均等に配置 */
  /* margin-top: auto; */
  /* link_btn要素を下に揃える */
  /* これにより、.link_btnがフレックスコンテナ (.products_items li) の下部に押し下げられます */
  margin-top: auto;
}

.link_btn button {
  width: 33%;
  background: #86ba32;
  color: #fff;
  border-radius: 8px;
  padding: 2% 4%;
  margin: 5% 2%;
  text-align: center;
}

.bi-box-arrow-up-right {
  margin-left: 2.8%;
  color: rgb(255, 123, 0);
}

.products_items a {
  color: #ffffff;
  text-decoration: none;
  font-size: 86%;
}

.products_items a:hover {
  color: #3c3c3c;
}

.item_name a {
  color: #3c3c3c;
}

.item_name a:hover {
  color: #337905;
}

.items_nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

/* .items_nav li {
	margin-right: 20px;
}

.items_nav li:last-child {
	margin-right: 0;
}

.items_nav li a {
	text-decoration: none;
} */

/*========= 共通 CSS ===============*/
.items_nav {
  display: flex;
  /* flexboxを利用して横並びにする */
  flex-wrap: wrap;
  /* 横幅が足りなくなった場合に折り返す */
  list-style: none;
  /* リストのデフォルトのマーカーを非表示 */
  padding: 0;
  margin: 0;
}

.items_nav li {
  margin-right: 10px;
  /* 各項目の間にスペースを空ける */
  margin-bottom: 10px;
  /* 折り返した際の行間を空ける */
}

.items_nav a {
  position: relative;
  /* アイコンを絶対配置するために必要 */
  display: inline-block;
  padding: 5px 40px 5px 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-decoration: none;
  color: #333;
}

.items_nav a:hover {
  color: #bbbbbb;
}

.bi-chevron-down {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* .items_nav li:not(:first-child) { */
/* 2番目以降に適用 */
/* border-left: 0; */
/* }*/

.bi-chevron-down {
  margin-left: 1%;
}

.items_cont_box {
  display: block;
}

.reverse {
  flex-direction: row-reverse;
}

.cont_line {
  border-top: 1px dotted #adadad;
  margin: 0 auto;
}

.items_box {
  width: 100%;
  text-align: center;
  margin-bottom: 2%;
}

.items_box img {
  width: 88%;
}

.items_box p {
  text-align: left;
}

.items_box li {
  text-align: left;
  /* margin-left: 2%;
	margin-bottom: 3%; */
}

.items_box button {
  width: 320px;
  background: #0d8802;
  color: #fff;
  border-radius: 8px;
  padding: 2% 4%;
  margin: 2% auto;
  text-align: center;
  display: block;
}

.line_box {
  border: 1px solid #c7c7c7;
  padding: 5%;
}

.items_box2 {
  width: 100%;
  text-align: center;
  margin-bottom: 5%;
}

.items_box2 p {
  text-align: left;
}

@media (min-width: 980px) {
  .items_cont_box {
    display: flex;
    margin: 0 1%;
  }

  .items_box {
    width: 50%;
    text-align: center;
  }

  .items_box2 {
    width: 50%;
    text-align: center;
  }

  .ml-6 {
    margin-left: 6%;
  }
	.ml-12 {
    margin-left: 6%;
    display: flex;
  }
}

.products_cont_box {
  width: 96%;
  margin: 4% 0;
}

.products_line_box {
  background: #f1f1f1;
  border: 1px solid #c7c7c7;
  padding: 2%;
  width: 100%;
}

/* ==980px以上の形状 */
@media (min-width: 980px) {
  .products_line_box {
    width: 80%;
    /* margin-left: 10%; */
    margin: 0 auto 4% auto;
  }
}

.products_cont_box h4 {
  font-size: 100%;
  margin: 1% 0;
  line-height: 2;
  letter-spacing: 0.1em;
}

.products_cont_box h5 {
  font-size: 100%;
  margin-top: 1%;
  line-height: 2;
  letter-spacing: 0.1em;
}

.tittle-01 {
  text-align: left;
  border-bottom: 2px dotted rgb(255, 123, 0);
  padding: 0;
}

.tittle-h4 {
  background: rgb(255, 123, 0);
  color: #ffffff;
  border-radius: 16px;
  padding: 1% 4%;
}

.tittle-h5 {
  text-align: left;
  color: rgb(255, 123, 0);
  border-bottom: 1px dotted rgb(255, 123, 0);
  padding: 0 2%;
}

@media (min-width: 980px) {
  .tittle-h4 {
    padding: 0.8% 2%;
  }
}

.products_cont_box p {
  margin: 1% 0;
}

.products_img_box {
  margin: 5% auto 1% auto;
  text-align: center;
}

.products_img_box img {
  width: 100%;
  margin-bottom: 1%;
}

/* ==980px以上の形状 */
@media (min-width: 980px) {
  .products_img_box img {
    width: 80%;
  }
}

.products_list_box {
  width: 98%;
  margin: 2%;
  font-size: 120%;
}
.purpose_box p {
  font-size: 120%;
}

/* ==980px以上の形状 */
@media (min-width: 980px) {
  .products_list_box {
    width: 80%;
    margin: 5% 10%;
  }
}

.products_list_box li {
  border-bottom: 1px dotted #ccc;
  margin: 2% 0;
  padding-bottom: 1%;
}

.products_list_box i {
  color: #ff7b00;
  margin-right: 1%;
  font-size: 140%;
}

.products_tb_box {
  display: flex;
  border: 1px solid #929292;
  margin: 0 1%;
}

.products_tb_box:not(:first-child) {
  display: flex;
  border: 1px solid #929292;
  border-top: 0px;
}

.products_tb_box li {
  padding: 1% 2%;
  text-align: left;
}

.li_standard_tittle {
  width: 30%;
  background: #f1f1f1;
}

.li_standard_text {
  width: 70%;
  border-left: 1px solid #929292;
}

.products_cont_box button {
  width: 320px;
  background: #0d8802;
  color: #fff;
  border-radius: 8px;
  padding: 4%;
  margin: 2% auto;
  text-align: center;
  display: block;
}

/* ==980px以上の形状 */
@media (min-width: 980px) {
  .products_cont_box button {
    width: 420px;
    background: #0d8802;
    color: #fff;
    border-radius: 8px;
    padding: 2% 4%;
    /* margin: 2% auto; */
    margin: 2% auto 2% 32%;
    text-align: center;
    display: block;
  }

  .tc {
    text-align: center;
  }
}

/* ==テキスト関連 */
.fc_org {
  color: #ff7b00;
  font-weight: 600;
}

.fc_g {
  color: green;
  font-weight: 600;
}
.fs{
  font-size: 80%;
}
.tl {
  text-align: left;
}
.ffm {
  font-family: Meiryo;
}
.tr {
  text-align: right;
  font-size: 0.6rem;
}
/* ==980px以上の形状 */
@media (min-width: 980px) {
  .tr {
    text-align: right;
    font-size: 0.8rem;
  }
}

.italic {
  font-style: italic;
}

.txt01 li {
  font-size: 140%;
}

@media (min-width: 980px) {
}

.cont_box {
  width: 100%;
  margin: 2% 1%;
}

/*========= common CSS ===============*/
.common {
  display: grid;
}

.common li {
  /* width: 80%; */
  text-align: center;
  margin: 2% auto;
}

.common li img {
  width: 100%;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .common {
    display: flex;
  }

  /* .common li {
		width: 42%;
		text-align: center;
		margin: 2% auto;
	} */

  .common li img {
    width: 80%;
  }
}

.publish li {
  font-weight: bold;
  margin: 8% 1%;
  padding-top: 2%;
}

.publish li:not(:first-child) {
  margin: 8% 1%;
  padding-top: 2%;
  border-top: 1px solid #f1f1f1;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  .publish li {
    font-weight: bold;
    margin: 0 1% 2% 1%;
  }

  .publish li:not(:first-child) {
    margin: 3% 1%;
    padding-top: 2%;
    border-top: 1px solid #ccc;
  }
}

.source {
  font-weight: normal;
  float: right;
  margin-right: 2%;
}

.publish_date_box {
  background: #fcfcfc;
  border: 1px solid #c7c7c7;
  padding: 1% 2%;
  margin: 1%;
  width: 98%;
}

.publish_date_box dt {
  background: #e7e7e7;
}

/*========= date CSS ===============*/
#data_box {
  width: 100%;
  margin: 4% auto;
  box-sizing: border-box;
}

#data_box details {
  margin-bottom: 2%;
}

#data_box summary {
  padding: 1% 0;
  margin-left: 2%;
  border-bottom: 1px dotted #c7c7c7;
  cursor: pointer;
}

summary::marker {
  color: rgb(255, 123, 0);
}
/* details:first-of-type summary::marker {
  color: green;
} */
/* details:nth-child(-n + 1) summary::marker {
  color: green;
} */
.ec12 summary::marker {
  color: green;
} 
 
#data_box .inner_box {
  margin: 2%;
  text-align: center;
}

.inner_box h3 {
  background: #015994;
  color: #fff;
  padding: 2%;
  font-size: 100%;
}

.inner_box img {
  width: 100%;
}

/*==980px以上の形状*/
@media (min-width: 980px) {
  #data_box {
    width: 88%;
    margin: 4% auto;
    box-sizing: border-box;
  }

  .inner_box img {
    width: 60%;
  }

  #data_box details {
    margin-bottom: 2%;
  }

  .inner_box h3 {
    font-size: 160%;
  }
}

#data_box li {
  padding: 2% 0;
  border-bottom: 1px dotted #c7c7c7;
}

#data_box .bi-chevron-right {
  color: rgb(255, 123, 0);
  margin-left: 2%;
  margin-right: 1%;
}

#data_box .bi-box-arrow-up-right {
  margin-left: 1%;
  color: rgb(255, 123, 0);
}

.data_cont {
  width: 420px;
  padding: 2%;
  text-align: center;
}

.data_cont h1 {
  background: #015994;
  color: #fff;
  margin: 2%;
}

.bold {
  font-size: 120%;
  font-weight: 800;
  margin-top: 2%;
}

.list01 {
  color: #c06f28;
  list-style: none;
  font-weight: bold;
  margin: 4% 2%;
}



.list2{
  position: relative;                /* .ext を絶対配置するため */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  list-style: none;
  padding: 0 60px 0 0;               /* 右端に重ならない余白を確保（必要に応じ調整） */
  margin: 0 0 2% 0;
}
.list2 li {
  text-align: center;
}
.list2 .b_box{
  padding: 8px 10px;
  box-sizing: border-box;
  border: solid 0.1em;
  /* background:#f8f8f8; */
  /* border-radius:6px; */
}

/* spanを右上（もしくは右下）に固定して改行させない */
.list2 .ext{
  position: absolute;
  right: 5%;              /* 右端に寄せる */
  top: 90%;              /* 縦位置はお好みで調整 */
  transform: translateY(-50%);
  white-space: nowrap;   /* 改行しない */
  /* font-weight: 200; */
  font-size: 80%;
  background: transparent;
  pointer-events: none;  /* 必要ならクリックを無効化 */
}




.caption {
  width: 100%;
  padding: 2% 8%;
  background-color: #c06f28;
  color: #ffffff;
  font-weight: bold;
  font-size: 140%;
  margin-bottom: 1%;
}

.bi-box-fill {
  margin: 0 2%;
}

.sub_tittle {
  font-size: 120%;
  font-weight: bold;
  /* width: 50%; */
  /* border-bottom: solid 0.1em #c06f28; */
  margin-bottom: 1%;
  left: 0;
}

.bi-plus-square-dotted {
  margin-left: 0.8%;
}

.links li {
  width: 90%;
  font-size: 105%;
  margin: 4% 0;
  border-bottom: 1px double gainsboro;
}

.caption_box {
  margin-left: 12%;
}
.caption_box2 {
  margin-top: 2.0%;
  margin-left: 12%;
}

.bnr_bg {
  width: 80%;
  background: #e3017f;
  padding: 1%;
  /* margin-left: 25%; */
  box-sizing: border-box;
}

.bnr_text {
  color: #fff;
  border: 1px double #fff;
  text-align: center;
  padding: 2% 1%;
  font-size: 110%;
  font-weight: 800;
}

/* .graph1_img {
	margin: 4% 0 0 0;
}
.graph2_img {
	margin: 4% 0;
} */

.nemu04 img {
  width: 60%;
}

.nemu05 {
  text-align: center;
  margin-top: -8%;
}

.nemu05 img {
  width: 100%;
}

.nemu_txt {
  margin-top: 8%;
}

.products_cont_box table {
  width: 100%;
  box-sizing: border-box;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 2% auto;
}

.products_cont_box td {
  text-align: center;
}
.products_cont_box th {
  width: 14%;
  border-top: #838383 1px solid;
  border-left: #838383 1px solid;
  border-right: #838383 1px solid;
  border-bottom: #838383 1px double;
}
.products_cont_box td {
  width: 14%;
  border-bottom: #838383 1px solid;
  border-left: #838383 1px solid;
  border-right: #838383 1px solid;
}

#page-top {
  position: fixed;
  bottom: 20px;
  /* ブラウザ下から20pxの位置 */
  right: 20px;
  /* 右側から20pxの位置 */
  z-index: 999;
  /*他の要素の上に表示させる*/
}

.fi {
  font-style: italic;
}

.br_img img {
  width: 70%;
  margin: 0 16%;
}
.collo_txt {
  margin-top: 16%;
}


/* 翻訳ウィジェットを右上に配置 */
#google_translate_element {
  position: absolute;
  /* top: 10px; */
  /* right: 120px; */
  font-size: 12px;   /* 文字を小さく */
  z-index: 9999;     /* 他の要素より前面に出す */
}

/*==980px以上の形状*/
@media (min-width: 980px) {
#google_translate_element {
  position: absolute;
  /* top: 10px; */
  right: 120px;
  font-size: 12px;   /* 文字を小さく */
  z-index: 9999;     /* 他の要素より前面に出す */
}
}

/* セレクトボックス（言語リスト）の調整 */
.goog-te-combo {
  padding: 2px 4px;
  font-size: 12px;
  border-radius: 4px;
}

/* summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
} */
summary .icon-opened { display: none; }
details[open] summary .icon-closed { display: none; }
details[open] summary .icon-opened { display: inline-block; }

