/* CSS Document */






















/* section *******************************************************/

.section2,.section3,.section4,
.section5,.section6,.section7,
.section8,.section9,.section10{margin-top: 80px}


/*section1*/
.section1{
}

.sec1-1 b,
.sec1-2 b{
	font-size: 24px;
}
.sec1-2 span{
	color: #0083db;
}

.sec1-1 img,
.sec1-2 img{
}
.section1 .separate{
	margin-right: 51px;
}
.kome{
	color: rgba(0,0,0,0.50);
	font-size: 14px;
	text-align: right;
	margin-top: -5px;
	width: 1040px;
}

.section1 .t1,
.section1 .t2{
  width: 500px;            /* ボックスの幅 */
  height: 90px;
  margin-top: 25px;
  padding: 0px 0px 0px 0px;           /* 内側の余白 */
  word-wrap: break-word;   /* 単語途中でも折り返す */
  white-space: normal;     /* 自動改行を有効にする（これが重要） */
  text-align: left;           /* テキストを左揃えに */
  /*align-self: auto;*/
  font-size: 15px;
  line-height: normal; /**/
  line-height: 1.4; /**/
  /*color: #2B2B2B;*/
}

.section1 .t1{}
.section1 .t2{}

.underline1, .underline2 {
  text-decoration: underline;
  display: inline!important;
  font-size: 15px!important;
  line-height: 1.4; /**/
  color: black!important;
		font-weight:normal!important;
	margin: 0px!important;
}
.underline1{
  text-decoration-color: #B1B1B1!important;
  text-decoration-thickness: 1px;
	text-underline-offset: 2px;  
}
.underline2{
  text-decoration-color: red!important;
  text-decoration-thickness: 1px;
	text-underline-offset: 2px;  
}


/*section2*/
.section2{
	margin-top: 80px;
}
.section2 img{
	  display: block;
}

/*section3*/
.section3{
	margin-top: 80px;
}
/*section4*/
.section4{
	margin-top: 80px;
}


/*section5*/
.section5 .section-title{
 margin-bottom: auto;
}

.section5 .sec5up{
  display: inline-block;
  overflow: hidden; 
  text-align:center;
}

.sec5up img {
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  margin-top:0px; 
}
.sec5up:hover img {
  transform: scale(1.08); /* ← 少しアップ */
  opacity: 0.7;
}

.caption::after {
  content: attr(data-caption);
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  color: #0066cc;

  text-decoration: underline;
}

/*section6*/

.section6{
	margin: -10px 0 0 0 ;
}

.section6 .sec6img{
  object-fit:cover;
  z-index:-100;
  margin-top:-390px; 
}

.section6 .t1{
	margin:-10px 0px 0px -13px; 
	font-size: 22px;
	color: #FFFFFF;
	background-color: rgba(0,131,219,1.00);
	width: 531px;
}

.section6 .t2{
	text-align: left;
	font-size: 16px;
	padding: 0px 10px;
	line-height: 1.5;
	letter-spacing: 0.02em; 
}

.sec6sepa{
	display: flex;
	gap:30px;
	justify-content: center;
}
.sec6sepa2{
	display: flex;
	gap:30px;
	justify-content: center;
	margin-top: 0px;
}

.box {
  position: relative;
  /*object-fit:cover;*/
  z-index:100;
  /*display: inline-block;*/
  padding: 10px 15px;
  width: 505px;
  height: 180px;
  background: rgba(255,255,255,0.00);
  border: 0px solid #0083DB;
  border-radius: 0px;
  margin: 0px 0px 0px 0px;
  top:0px;
  right: 0px;	
}
.box-bg {
  position: absolute;
  inset: 0;
  background: #FFF;
  border: 2px solid #0083DB;
  z-index: 1;
}
.box > p {
  position: relative;
  z-index: 2; /* テキストは最前面 */
}



/* ======== ここが棒＋●の親コンテナ ======== */
.pointer {
  position: absolute;
  right: 285px;
  top: 183px;
  transform: translateY(-50%);
	z-index: 0;
}

/* ================================
   白いフチ側（背景）
   ================================ */
.pointer-bg,
.pointer-fg {
  position: absolute;
/*  left: 0px;*/
/*  top: 0px;*/
  transform-origin: left center;
	  z-index: 0;
}

/* ------- 白いフチ（背景） ------- */
.pointer-bg {
  width: 105px;        /* ← 棒＋丸の長さ（白フチ用） */
  height: 14px;       /* ← 棒の太さ＋フチ幅 */
  background: rgba(255,255,255,0.80);   /* フチの色（白） */
  border-radius: 999px;
  transform: rotate(50deg); /* ← ここを変えると角度が変わる */
	/*  left: -360px;*/
	/*top: 85px;*/
}

/* ------- 色付き本体（前景） ------- */
.pointer-fg {
  width: 105px;          /* ← 棒の長さ（本体） */
  height: 6px;         /* ← 棒の太さ（本体） */

  background: #0083DB;  /* 本体の色 */
  border-radius: 999px;
  transform: translate(-3px, 1px) rotate(50deg);
   /* left: -360px;*/
	/*top: 85px;*/
  /* ↑ translate で背景中央に配置
        rotate 角度は pointer-bg と同じにする */
}

/* ●（丸）の生成共通：before で付ける */
.pointer-bg::after,
.pointer-fg::after {
  content: "";
  position: absolute;
  right: -10px; /* 丸の中心が棒の端に重なるようにする */
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}

/* 白フチの● */
.pointer-bg::after {
  width: 28px;    /* ← 丸（フチ込み）のサイズ */
  height: 28px;
  background: rgba(255,255,255,0.80);
}

/* 色の● */
.pointer-fg::after {
  width: 20px;    /* ← 丸（本体）のサイズ */
  height: 20px;
  background: #0083DB;
}

.sec6window2 .box{height: 370px;}
.sec6window2 .pointer{
  right: 460px;
  top: 380px;
  transform: rotate(108deg);}
.sec6window2 .pointer-bg,
.sec6window2 .pointer-fg{width: 255px; /* ← 棒の長さ（本体） */}
.sec6window2 img{
  position: relative;
  z-index: 2; /* テキストは最前面 */
  margin-right: 30px;
  margin-top:3px ;}

.sec6window2-2 .pointer{
  right: 375px;
  top: 380px;
  transform: rotate(60deg);}
.sec6window2-2 .pointer-bg,
.sec6window2-2 .pointer-fg{width: 170px; /* ← 棒の長さ（本体） */}

.sec6window3 .box{height: 110px; margin-top: -125px}
.sec6window3 .pointer{
  right: 182px;
  top: 20px;
  transform: rotate(270deg);}
.sec6window3 .pointer-bg,
.sec6window3 .pointer-fg{width: 285px; /* ← 棒の長さ（本体） */}

.sec6window4 .box{height: 160px; margin-top: -175px}
.sec6window4 .pointer{
  right: 341px;
  top: 20px;
  transform: rotate(180deg);}
.sec6window4 .pointer-bg,
.sec6window4 .pointer-fg{width: 335px; /* ← 棒の長さ（本体） */}

/*section7*/
.section7 .separate{gap:34px;}
.section7 .text-box{
	width: 503px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;           /* テキストを左揃えに */
	font-size: 24px;
}
.sec7t2{
	color: rgba(0,131,219,1.00);
	padding: 0px 0px 0px 0px;
}
.section7 .kome{
	width: 503px;
	text-align: left;
	margin-left: 540px;
	padding: 10px 0px;
	font-size: 12px;
}

/*section8*/
.section8 .t1{
	font-size: 26px;
	font-weight: 600;
	padding: 5px 5px;
	margin: 0px;
	text-align: left;
	color: #0DA452;
}

.section8 .t2{
	font-size: 16px;
	text-align: left;
	padding: 0px 5px;
	margin: 0px;
}
.pvoimg{
	margin: -5px 0 15px 0;
}
.section8 h5{
	color:#0DA452;
}
.section8 .sec8subt{
	font-size: 28px;
	font-weight: 600;
	margin: -10px 0px 15px 0px;
	color:#0DA452;
	letter-spacing: 0.03em;   /*  */
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}
.sec8t1{
	font-size: 20px;
	font-weight: 400;
	margin: 0px 15px 30px 0;
	color: #434343;
	letter-spacing: 0.03em;   /*  */
	font-kerning: normal;
    font-feature-settings: "kern" 1;
}
.pvolink {
  display: inline-block;
  background-color: #FFFFFF;
  padding: 7px 30px;
  color: #0DA452!important;
  width: 350px;
  border: 2px solid #0DA452;
  border-radius: 40px;
  margin: 10px 0 0 10px;

  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-kerning: normal;
  font-feature-settings: "kern" 1;

  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.35s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.pvolink:hover {
  background-color: #0DA452;
  color: #FFFFFF!important;
  border-color: #0DA452;
  text-decoration: none;
}

/* ===== 左から右へ反転する演出 ===== */

.pvolink {
  position: relative;    /* 擬似要素用 */
  overflow: hidden;      /* 角丸からはみ出さない */
}

/* 色が流れるレイヤー */
.pvolink::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #0DA452;

  transform: scaleX(0);              /* 初期は非表示 */
  transform-origin: left center;     /* 左から */
  transition: transform 0.45s ease;  /* 流れる速度 */

  z-index: 0;
}

/* テキストを前面に */
.pvolink > * {
  position: relative;
  z-index: 1;
}

/* hover時に色が左→右へ広がる */
.pvolink:hover::before {
  transform: scaleX(1);
}

/* hover時の色切替（背景は擬似要素に任せる） */
.pvolink:hover {
  color: #FFFFFF;
  background-color: transparent; /* 念のため */
}

.section8 a{color: #0DA452;}




.speech-bubble {
  position: relative;
  display: inline-block;
  padding: 16px 20px;
  background: #ffffff;
  border: 3px solid #0DA452;   /* 枠線色 */
  border-radius: 18px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
	
  width:  390px;
  height: 180px;
  margin: 40px 603px -350px 0px;
}

/* =========================
   しっぽ（枠線）
   ========================= */
.speech-bubble::before {
  content: "";
  position: absolute;

  /* ▼ しっぽの位置 */
  bottom: -60px;     /* 下に出す距離 */
  left: 310px;        /* 横位置 */

  /* ▼ しっぽ全体サイズ */
  width: 60px;
  height: 60px;

  background: #0DA452; /* 枠線色 */

  /* ▼ 自由形状（ここが核心） */
  clip-path: polygon(
    0% 0%,     /* 左上 */
    80% 0%,   /* 右上 */
    100% 100%   /* 下（尖り具合を調整） */
  );
}

/* =========================
   しっぽ（中身）
   ========================= */
.speech-bubble::after {
  content: "";
  position: absolute;

  /* ▼ 枠線との差（＝縁の太さ） */
  bottom: -50px;
  left: 311px;

  width: 54px;
  height: 54px;

  background: #ffffff;

  clip-path: polygon(
    0% 0%,     /* 左上 */
    80% 0%,   /* 右上 */
    100% 100%   /* 下（尖り具合を調整） */
  );
}

/*section9*/
.section9 h5{
	color:#0096A5;
}
.section9 .sec9subt{
	font-size: 28px;
	font-weight: 600;
	margin: -10px 0px 15px 0px;
	color:#0096A5;
	letter-spacing: 0.03em;   /*  */
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}
.sec9t1{
	font-size: 20px;
	font-weight: 400;
	margin: 0px 0 30px 0;
	color: #434343;
	letter-spacing: 0.03em;   /*  */
	font-kerning: normal;
    font-feature-settings: "kern" 1;
}

.sec9link{
 margin: -34px 0px 0 700px;
}


.pvglink {
  display: inline-block;
  background-color: #FFFFFF;
  padding: 7px 30px;
  color: #0097A6!important;
  width: 350px;
  border: 2px solid #0097A6;
  border-radius: 40px;
  margin: 30px 0 0 10px;

  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-kerning: normal;
  font-feature-settings: "kern" 1;

  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.35s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.pvglink:hover {
  background-color: #0097A6;
  color: #FFFFFF!important;
  border-color: #0097A6;
  text-decoration: none;
}

/* ===== 左から右へ反転する演出 ===== */

.pvglink {
  position: relative;    /* 擬似要素用 */
  overflow: hidden;      /* 角丸からはみ出さない */
}

/* 色が流れるレイヤー */
.pvglink::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #0097A6;

  transform: scaleX(0);              /* 初期は非表示 */
  transform-origin: left center;     /* 左から */
  transition: transform 0.45s ease;  /* 流れる速度 */

  z-index: 0;
}

/* テキストを前面に */
.pvglink > * {
  position: relative;
  z-index: 1;
}

/* hover時に色が左→右へ広がる */
.pvglink:hover::before {
  transform: scaleX(1);
}

/* hover時の色切替（背景は擬似要素に任せる） */
.pvglink:hover {
  color: #FFFFFF;
  background-color: transparent; /* 念のため */
}



/*section10*/
.section10{
	margin-top: 80px;
}

.sec10-border{
	width: 1080px;
	border-bottom: 1px solid rgba(214,214,214,1.00);
	margin: 30px 0px 70px 0px;
}

.section10 h5{
  font-size: 30px;
  text-align: left;
  width: 1040px;            /* ボックスの幅 */
  padding: 0px 0px 0px 0px ;           /* 内側の余白 */
  line-height: normal; /**/
  color: rgba(130,130,130,1.00);
}

.modelname span{
  display:inline-block;
  border-bottom:2px solid #0083db;
  padding-bottom:0px;
  line-height: 1.2;       /* デフォルトより詰まる */
}

.section10 .sec10t{
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  width: 1040px;            /* ボックスの幅 */
  padding: 0px 0px 0px 0px ;           /* 内側の余白 */
  line-height: normal; /**/
  color: #0083db;
  margin-top: -50px;
}

.ruby-line {
  display: inline-flex;
  width: 1030px;
  flex-wrap: nowrap;       /* 一行に維持 */
  gap: 0.4em;               /* (任意) 各要素の間隔 */
}

.ruby-under {
  display: inline-flex;
  flex-direction: column;  /* 上: 本文 / 下: ルビ */
  align-items: center;
  line-height: 1;
}

.ruby-under .rb {
  font-size: 24px;
  border-bottom: 2px solid #0083db; /* 線の太さ・色調整可能 */
  padding-bottom: 2px;           /* 文字と線の距離 */
  font-weight: 600;
  font-style: italic;
}

.bar{
	  font-size: 24px;
	  margin-top: -0.5em;
}

.ruby-under .rt {
  font-size: 13px;
  margin-top: 0.12em;
  color: #1E1E1E;
}

.section10 .tgmd{
	width: 1040px;
	margin-top: 20px;
	font-size: 14px;
	text-align: left;
}

.section10 .tg2{
	padding: 0px 10px;
	margin: 0;
}

.section10 .sec10img{
  position:absolute;
  object-fit:cover;
  margin: -88px 0px 0px 180px ;
}

/* table base */
.section10 .tg {border-collapse:collapse;border-spacing:0;}
.section10 .tg td, 
.section10 .tg th  {
    border:0.5px solid #272727;
    font-size:12px;
    overflow:hidden;
    padding:3px 3px;
    word-break:normal;
	font-weight: 400;
	text-align:center!important;
	vertical-align:middle!important;
	background-color: #FDFDFD;
}

.section10 .tg-bg { background-color:#FDFDFD!important;}/* 背景 */
.section10 .tg-size1{width:100px;}
.section10 .tg-size2{width:140px}
.section10 .tg-size3{width:120px;}

.sec10separate{
	display: flex;
	gap: 20px;
	justify-content: center;
	margin: 0;
    padding: 0px 0px 20px 0px;
}
.sec10odt{display: block; padding: 0px 0px 4px 0px;}
.sec10od{border: 0.5px solid #858585;}

.section10-4 .sec10img{
	margin-left: 300px ;
}

.section10-5 .sec10od{width: 320px;}
.section10-5 .sec10odt2{display: block; text-align: left; padding: 5px 0px 0px 0px; line-height: 1.3;}
.section10-5 .sec10img-sep{
	display: flex;
	gap: 20px;
	justify-content: center;
}
.section10-5 .sec10img{
  position:absolute;
  object-fit:cover;
  margin: -88px 0px 0px 160px ;
}
.section10-5 .sec10imgs{
  position:absolute;
  object-fit:cover;
  margin: -88px 0px -48px 651px ;/*747*/
}

.section10-2,.section10-3,.section10-4,.section10-5{
	margin-top: -30px;
}

/* section *******************************************************/








/* スマホ調整 */
@media (max-width: 768px) {
  #toTop {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

/**/
@media (max-width: 1100px) {

.section-text{
/*font-size: 14px;*/
}
.bg-img {
  width:100%;
  height:auto;
}
	
.pvm_title {
padding: 120px 0px 0px 0px;
}	
.pvm_title h1{
margin:-60px 0px 0 0px;
}
.pvm_inner {
  width: 100%;
  max-width: 1100px; 
  text-align: center;
}	
	
	.top_flex{
  gap:60px;
  padding: 10px 0 60px 0 ;
}
	.pvm_img{
	width: 35%;
	}
	.pvm_mov{
	width: 45%;
	}
	
.navbar {
  width: 97%;
}
	
.section-title {
  width: 93%;			 	/*ボックスサイズ固定*/	
	}
.section-text {
	width: 91%;			/*ボックスサイズ固定*/
}
.section-sub-title{
	width: 91%;			/*ボックスサイズ固定*/
}

.sec1-1 b,
.sec1-2 b{
	font-size: 20px;
}
	
	.section1 img,
	.section2 img,
	.section3 img,
	.section4 img,
	.section7 img,
	.section8 img,
	.sec9img{
	width: 95%;	
	}
	
	.section10-1 .sec10img,
	.section10-2 .sec10img,
	.section10-3 .sec10img{
	width: 20%;
	}
	.section10-4 .sec10img{
	width: 12%;
	margin-left: 250px;
	}
	.section10-5 .sec10od{
	width: 95%;
	}
	.modelname,.sec10t,.ruby-line,.tgmd{
	margin-left:20px;
	}
	.section10 h5{font-size: 26px}
	
	.ruby-under .rb {
 	 font-size: 22px;
	}
	.section10 .tgmd{
	font-size: 11px;
	padding: 0px;
	width: 98%;}
	
	.accordion{
	margin-left: 0px;
	width: 96%!important;}
	/*.sec10od{width: 100%;}*/
	.sec10img-sep{
	margin-left: -160px;}
	
	.sec6sepa,.sec6sepa2{
	gap:20px;
	}
	.section6 .t1{
	margin:-10px 0px 0px -13px; 
	font-size: 18px;
	color: #FFFFFF;
	background-color: rgba(0,131,219,1.00);
	width: 387px;
}
	.section6 .t2{
	font-size: 14px;
	}
	
	.box {
	padding: 10px 15px;
 	width: 360px;
 	height: 180px;
	}
	.pointer{
	display: none;
	}
	.sec6window2 .box{height: auto;}
	.sec6w2{width: 370px}
	.section6 .sec6img{
  	object-fit:cover;
 	 z-index:-100;
 	 margin-top:-320px; 
	margin-left: 150px;
	 width: 100%;
}
	
    .section7 .kome{
	width: 45%;
	margin-left: 49%;
}
	.sec10-border{
	width: 95%;
}
	
	
	.footer_new1{
	min-width: 100%;
	width: 100%;
	}
	
	.speech-bubble {
	width:  35%;
  	height: 170px;
  	margin: 0px 603px -350px 25px;
}
	.speech-bubble .t1{font-size: 20px}
	.speech-bubble .t2{font-size: 14px}
	.speech-bubble::before {display: none}
	.speech-bubble::after {display: none}
	
	.section7 .separate{gap:0px;}
	.section7 .text-box{
	margin: 0px 0px 0px 0px;
	font-size: 20px;
}
	
	.section8 .pvoimg{
		width: 389px;
	}
}

.tooltip-box {
	font-size: 0.9em;
}


@media (max-width: 1180px) {
  /* ==============================*/
  html, body {
    overflow-x: hidden;
  }

  /* ============================== */
  .header_gradation,
  .header_gradation_1,
  .footer_new1 {
    min-width: 0;
    width: 100%;
  }

  /* ==============================*/
  .header,
  .navbar,
  .footer_new2,
  .footer_new3,
  .footer_new4 {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

}

@media (max-width: 1060px) {
	.sec5table{
		width: 95%!important;
	}
	.caption{
		width: 270px;
	}
	
}