@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');

html{scroll-behavior: smooth;}
	
h1, h2, h3, h4, h5, h6, button {
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 700;
/*font-style: normal;*/}

.content h3.blue{border-left:4px #485fc7 solid; padding-left:.75em;margin-bottom:2em;
font-size: 1.25em; line-height:1.5; /*Q&Aで使用*/}

a, a:link, a:visited{color:#485fc7; text-decoration: none;
}
a:hover{color:#5c6fd7; text-decoration: none; }

.notification a:not(.button):not(.dropdown-item) {
  color: #485fc7;
  text-decoration: none;
}

p {
    line-height: 1.8;
    color: #0b3153;
}  

/* Helper styles */

.icon-padding-left {
  margin-left: 0.5rem;
  color: #212121;
}

.icon-padding-right {
  margin-right: 0.5rem;
}

/* Hero styles */

.hero {
  background: linear-gradient(
      rgba(30, 30, 180, 0.705),
      rgba(30, 30, 180, 0.101)
    ),url(../images/top_img.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero .title {
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
}

.hero .input {
  width: 400px;
}


.hero h2 {
    color: #fff;
    font-size: clamp(0.875rem, 0.585rem + 1.22vw, 1.5rem);
    text-shadow: 2px 0px 3px #000
}
.hero h2 span {
    font-size: small;
}

@media screen and (min-width: 769px), print {
.hero.is-medium .hero-body {
    padding: 5rem 2rem;
}
}

/* Nav styles */


nav .logo_jaima {align-self: center;
    width: clamp(2.5rem, 0.966rem + 4.55vw, 4.375rem);
    height: auto;
    margin: 1rem 1rem .5rem 1rem;
}

nav .logo_type {align-self: center; margin-right:5em;
font-size: clamp(0.875rem, 0.5rem + 1.6vw, 1.5rem);
    line-height: 1.8rem;

}
nav logo_type .smart-break {
    display: none;
  }
  
nav .logo_type span {
    font-weight: 400;
    font-size: 60%;
    padding: .2rem;
}
nav h1{color: #130f40;} 


@media screen and (max-width: 600px) {
  nav .logo_type{margin-right:0em; font-size:14px; line-height: 1.3rem;}
    nav .logo_type .smart-break {
      display: inline;
    }
  }
  


h2.subtitle {
    border-bottom: 2px solid #666;
    padding-bottom: .5rem
}
#INFO h2.subtitle::before,#GITHUB h2.subtitle::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* solidアイコンの太さ */
    content: "\f02d";
    margin-right: 0.5em;
    color: #000;
}
#NEWS h2.subtitle::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* solidアイコンの太さ */
    content: "\f5ad";
    margin-right: 0.5em;
    color: #000;
}

#CHECK h2.subtitle::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* solidアイコンの太さ */
    content: "\f14a";
    margin-right: 0.5em;
    color: #000;
}
/*
.pdf_left:before {
    font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f1c1";
    margin-right: 0.5em;
    color: #000;
}*/

body dl.horizen {
    display: flex;
    /* flex-wrap: wrap; 複数の行に折り返す */
    width: 100%;
  }
body dl.horizen dt,
body dl.horizen dd {
    margin: 0;
    padding: 0;         /* デフォルトのパディングをリセット */
  }
body dl.horizen dt{min-width:2rem;}

.note{font-size:90%; color:#666}
.note li::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 600; /* solidアイコンの太さ */
    content: "\2a"; 
    margin-right: 0.5em;
    font-size:70%
   
}

.notice {
  list-style: none;      /* 既存のリストマーカーを消す */
  padding-left: 1.2em;   /* 左に余白を作る */
  font-size:smaller;
}

.notice li::before {
  content: "※";          /* マーカーを※に */
  margin-right: 0.4em;   /* 本文との間に余白 */

}


ol{padding-left:1.5em}
.tag {
    display: inline;
    margin-right: .5rem;
    font-size: 5px;
}
.link::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* solidアイコンの太さ */
    content: "\f061"; /* ← これは「fa-arrow-right」のUnicode */
    margin-right: 0.5em;
    color: #f00;
    text-decoration:none;
}
.external-link::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* solid */
    content: "\f35d"; /* fa-up-right-from-square のUnicode */
    margin-left: 0.4em;
    font-size: 0.85em;
    vertical-align: middle;
}
.bordered-card {
    border: 1px solid #ddd;
    box-shadow: none; /* 影を消す */
    border-radius: 6px;
    overflow: hidden;
}
@media screen and (min-width:768px){/*2列表示の場合は高さを揃える*/
#home .bordered-card {
	height: 100%;
  min-height: 250px;
}
}
.bordered-card header {
    background-color: #f5f5f5; /* 薄いグレー */
    border-bottom: 1px solid #ccc;
    box-shadow: none; /* 影を消す */
}



/* Q&A */
.accordion {
      border: 1px solid #dbdbdb;
      border-radius: 6px;
      margin-bottom: 1rem;
      overflow: hidden;
    }
    .accordion-header {
      cursor: pointer;
      background: #f5f5f5;
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .accordion-header:hover {
      background: #eee;
    }
    .accordion-content {
      display: none;
      padding: 1rem;
      border-top: 1px solid #dbdbdb;
    }
    .accordion.is-active .accordion-content {
      display: block;
    }
    .accordion-icon {
      transition: transform 0.2s ease;
    }
    .accordion.is-active .accordion-icon {
      transform: rotate(180deg); /* アニメーションで切り替え */
    }

.accordion-header span,.accordion-header dl.horizen dt,
.accordion-content dl.horizen dt{
color:#485fc7 !important;font-weight:bold;}

.accordion-header p{width:100%}

/*--- FOOTER ---*/
footer {
    background-color: #003990!important;
    color: #fff !important;font-size:smaller
}
footer a:link, footer a:visited, footer p{
    color: #fff !important;
}
footer li {display: inline; margin-right:1rem}	
footer li a::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* solidアイコンの太さ */
    content: "\f061"; /* ← これは「fa-arrow-right」のUnicode */
    margin-right: 0.5em;
    color: #fff;
}
footer hr{height:1px !important;}



/*--- _pagetop -------*/
#f_pagetop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: table;
	width: 50px;
	height: 50px;
	transition: all .2s ease;
	user-select: none;

	a {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		font-size: 25px;
		font-weight: 500;
		text-decoration: none;
		background-color: rgba(92,92,92,.9);
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		transform: rotate(-90deg);
		-weblit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);

		&:hover {
			filter:alpha(opacity=70);
			-moz-opacity: 0.7;
			opacity: 0.7;
		}

		&:before {
			content: '\276F';
			font-family: monospace;
			vertical-align: top;
			color: rgb(255,255,255);
		}
	}

.navbar-menu {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.navbar-menu.is-active {
  opacity: 1;
  max-height: 500px;
}



.modal-close {
  filter: invert(1); /* 白い×になる */
  opacity: 0.9;
}

.modal-close:hover {
  opacity: 1.0;
  transform: scale(1.2);
  transition: all 0.2s ease;
}

.nowrap{white-space:nowrap !important}
.red { border: 1px solid red;}


button.is-shadowed {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s;
}

.button.is-shadowed:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}