@charset "utf-8";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
body {padding-top: 40px; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt";}
header{background-color: #000000; padding: 40px 0 0 0; margin: 0;}
.contents_innner {display:inline-block; padding-top: 80px; margin-top: -40px;}
.page {background-color: #fff; padding: 0 0 2em;}
h1 {margin: 0;}
h2 {background-color: #ffd800; padding: 0.5em; margin-bottom: 0.5em; font-size: 130%; font-weight: 900; font-family: 'Noto Sans JP';}
h3 {font-weight: 900;}
h4 {background-color: #ddd; color: #000; padding: 0.5em; font-weight: 900;}
h5 {background-color: #ffda00; color: #000; padding: 0.5em; font-weight: 900; font-size: 130%;}

/*スムーススクロール時の高さ誤差を軽減する為*/
.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}


.accordion-button {font-weight: 900; font-size: 70%;}
.accordion-button:hover {background-color: #ededed;}
.accordion-button small {display: inline-block !important;}
.accordion-body {padding: 1em 0;}
.table-responsive table td {white-space: nowrap;}
.box {padding: 0.5em;}
.box p {font-size: 110%; line-height: 180%;}
.tokucho {margin-bottom: 1em;}
.figure-caption {font-weight: 900; font-size: 120%;}
.figure p span {background-color: #ffff00;}
.info_tbl td, .info_tbl th { text-align: left; }
.info_tbl th { white-space: nowrap; vertical-align: top; }
.info_tbl td small { font-size: 80%; font-weight: normal; }

footer {padding: 0 0 8em 0; color: #fff; margin: 2em 0 0;}
.copy {font-size: 80%; color: #ccc;}
.marker {background-color: yellow; font-weight: bold;}
.ccode {font-size: 200%; font-weight: bold; background-color: #fff; padding: 0.5em; margin-bottom: 0.5em;}

.fixed-bottom a.nav-link:link,
.fixed-bottom a.nav-link:hover,
.fixed-bottom a.nav-link:visited,
.fixed-bottom a.nav-link:active {
	background-color: #0653b6;
	border: none;
	color:#fff;
	font-size: 85%;
	padding: 0.7em;
}

.fixed-bottom {padding: 0.5em; background-color:#fff; }
.fixed-bottom .btn {width: 100%; padding: 0.5em 0;}
.fixed-bottom .col-12 {padding: 0.5em;}
.fixed-bottom .container-fluid {
    --bs-gutter-x: 0em !important;
}


.btn-danger {padding: 0.5em;}
.btn-danger i {font-size: 1.5rem; padding: 0; margin: 0:}
.btn-danger span {padding: 0; margin: 0; vertical-align:0.25rem;}

.btn span {display: inline-block;}

/*FV切り替え*/
.hero_sp {display: block !important;}
.hero_pc {display: none!important;}
.fv_box {padding: 0 1em;}
.fv_box h3 {font-size: 120%;}
.fv_02 {margin-top: -1.2em;}


/*ページトップボタン*/
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 1em;
    bottom: 7em;
    background: #fff;
    border: solid 2px #222;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
	opacity: 0;
	transition: opacity 0.4s ease-in;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #222;
    border-right: 3px solid #222;
    transform: translateY(20%) rotate(-45deg);
    z-index: 999;
}

/* fadeinクラスがついた時だけ表示する */
a.fadein {
  opacity: 0.8;
}

.pv_list .ratio {margin-bottom: 1.5em !important;}


/*ナビ*/
.navbar-toggler { background-color: #000;}
.navbar-dark .nav-link {padding: 0.3em; margin: 0 0.3em; text-align: center; color: #fff;}
.fixed-bottom .nav-item {margin: 0 0.3em;}
.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}


/*FAQ*/
.faq_list button {margin: 0; padding:0.5em;}
.faq_list .accordion-body {margin: 0; padding: 1em 1.5em !important;}
.bi-question-circle-fill {font-size: 150% !important; font-weight: bold; margin-right: 0.5em; color: #c00; }

.footer_icon {padding: 1em;}
footer .footer_icon a {color: #fff !important; font-size: 120%; text-decoration: none;}



/*実験動画*/
.modal-title {font-weight: bold; font-size: 150% !important;}
.mv_list {margin-bottom: 2em;}
.mv_list .col-6 {padding-bottom: 0;}
.mv_list .col-6 .figure {margin-bottom: 0.3em;}
.figure .thumb a {
  position: relative;
  display: block;
  text-decoration: none;
}
 
.figure .thumb a:before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid #fff;
  width: 50px;
  height: 50px;
}
 
.figure .thumb a:after {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  /*border-width: 15px 0 15px 25px;*/
  border-width: 10px 0 10px 15px;
}

/*受賞歴*/
.card { border: none; margin-bottom: 1.5em; }
.award_list .card-body { padding: 0.3em 0.3em 0.3em 0; }


/*高さ揃え*/
.row-eq-height { display: flex; flex-wrap: wrap; }

/*自動POPUP*/
#popModal p {line-height: 180%;}
#popModal .modal-header {background-color: #f00; color: #fff;}
#popModal .btn-close {width: 3em; height: 3em; border-width: 3px;}


@media screen and (min-width:768px) {
    /*　画面サイズが992以上　*/
	.hero_sp {display: none !important;}
	.hero_pc {display: block !important;}
}

@media (max-width: 992px){
    header .container {
        margin: 0 auto;
		padding: 0;
    }
}

@media (min-width: 720px){
    .fixed-bottom .btn { font-size: 120%;}
}

@media (min-width: 1200px){
	.container {
		width: 960px;
        margin: 0 auto;
		padding: 0;
	}
    .fv_02 {margin-top: -4em;}
    .fv_box h3 {font-size: 180%;}
    
}