@charset "utf-8";
/*|||||||||||||| 共通 ||||||||||||||*/
html {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
video {
  width: 100%;
  display: block;
}
@media only screen and (min-width: 769px) {
  body {
    line-height: 1.7;
    font-size: 16px;
  }
  .sp {
    display: none;
  }
  section {
    margin-bottom: 80px;
  }
}
@media only screen and (max-width: 768px) {
  body {
    line-height: 1.5;
    font-size: 14px;
  }
  .pc {
    display: none !important;
  }
  section {
    margin-bottom: 40px;
  }
}
/*|||||||||||||| ヘッダー ||||||||||||||*/
header {
  padding: 20px 35px;
	max-width: 100%;
	height: auto;
}
header span img {
  width: 140px
}
header .headerflex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header .headerflex .vessel110thlogo img{
	height: 50px;
}
@media only screen and (max-width: 768px) {
  header {
    padding: 10px 15px;
  }
  header span img {
    width: 100px
  }
	header .headerflex .vessel110thlogo img{
		height: 29px;
	}
}
/*|||||||||||||| メインイメージ ||||||||||||||*/
#main {
  position: relative;
}
#main .mainvisual{
	background: #000;
	text-align: center;
	position: relative;
}
#main .mainvisual .mvaction{
	width: 100%;
	position: relative;
	padding: 0px 0 20px;
}
#main .mainvisual .mvaction .mvaction_btns{
	display: flex;
	justify-content: center;
	column-gap: 20px;
	width: 96%;
	max-width: 1060px;
	margin: 0 auto;
}
#main .mainvisual .mvaction .mvaction_btns .mvaction_btn{
	color: #FFF;
	font-size: 25px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 520px;
	width: 50%;
	flex: 1;
	height: 80px;
	text-decoration: none;
	transition: 0.3s;
}
#main .mainvisual .mvaction .mvaction_btns .mvaction_btn:hover{
	opacity: 0.7;
}
#main .mainvisual .mvaction .mvaction_btns .mvaction_btn.storebtn{
	background: #c9151d;
	border: 3px solid #c9151d;
	border-radius: 20px;
}
#main .mainvisual .mvaction .mvaction_btns .mvaction_btn.dlbtn{
	background: #FFF;
	border: 3px solid #c9151d;
	border-radius: 20px;
	color: #c9151d;
}


@media only screen and (max-width: 768px) {
	#main .mainvisual .mvaction{
		position: relative;
		height: auto;
		padding: 10px 0;
	}
	#main .mainvisual .mvaction .mvaction_btns {
		column-gap: 10px;
	}
	#main .mainvisual .mvaction .mvaction_btns .mvaction_btn {
		border-radius: 10px !important;
		font-size: 14px;
		width: 50%;
		height: 44px;
	}
}
/*|||||||||||||| コンテンツ ||||||||||||||*/
.inner {
	width: 96%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
	line-height: 140%;
	font-weight:600;
}
.centerborderttl{
	text-align: center;
	margin-bottom: 40px;
}
.centerborderttl strong{
	border-bottom: 7px solid #c9151d;
	font-size: 36px;
	font-weight: bold;
	display: inline-block;
	line-height: 140%;
}
.contentstext p{
	font-size: 15px;
}
.contentsttl{
	color: #c9151d;
	font-size: 26px;
	margin-bottom: 20px;
}

/* point */
#point .centerborderttl{
	margin-bottom: 60px;
}
.pointlist{
	display: flex;
	justify-content: space-between;
	column-gap: 20px;
	margin-bottom: 80px;
}
.pointlist .pointdetail{
	border: 2px solid #c9151d;
	flex: 1;
}
.pointlist .pointdetail h3{
	background: #c9151d;
	color: #FFF;
	font-size: 22px;
	font-weight: bold;
	padding: 5px 5px 3px;
	text-align: center;
}
.pointlist .pointdetail .pointdetail_inner{
	padding: 20px 15px;
}
.pointlist .pointdetail .pointimg{
	margin-bottom: 15px;
}
.pointlist .pointdetail .pointdetail_label{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 3px;
}
.pointlist .pointdetail p{
	font-size: 14px;
	font-weight:600;
}
.product_movie{
  width: 100%;
	max-width: 640px;
  aspect-ratio: 16 / 9;
	margin: 0 auto;
}
.product_movie iframe {
  width: 100%;
  height: 100%;
}
.product_movie p{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-top: 10px;
}

/* problem */
#problem{
}
.spectable{
	width: 96%;
	margin: 0 auto;
	border-top: 1px solid #231815;
	border-left: 1px solid #231815;
}
.spectable th,.spectable td{
	color: #231815;
	font-size: 17px;
	font-weight: normal;
	border-bottom: 1px solid #231815;
	border-right: 1px solid #231815;
}
.spectable th{
	background: #efefef;
	padding: 12px 10px;
	vertical-align: middle;
	text-align: center;
	white-space: nowrap;
}
.spectable td{
	padding: 8px;	
}
.spectable td.tac{
	text-align: center;
}

/* qa */
#qa{
	margin-top: 130px;
}
.questions{
	border: 1px solid #cccccc;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 30px;
	cursor: pointer;
}
.questions .question{
	background: #f3f3f3;
	padding: 30px 40px 30px 70px;
}
.questions .question::before{
	color: #c9151d;
	content: "Q";
}
.questions .answer{
	border-top: 1px solid #cccccc;
	padding: 30px 70px 30px 70px;
	display: none;
}
.questions .answer::before{
	content: "A";
}
.questions .question,.questions .answer{
	position: relative;
}
.questions .question::before,.questions .answer::before{
	position: absolute;
	left: 40px;
}
.questions .question::after{
	font-size: 22px;
	content: "＋";
	position: absolute;
	right: 30px;
	top: 0;
  bottom: 0;
  margin: auto 0;
	display: flex;
  align-items: center;
}
.questions.open .question::after {
	content: "－";
}


@media only screen and (max-width: 768px) {
	#point .centerborderttl {
		margin-bottom: 30px;
	}
	.centerborderttl {
		margin-bottom: 20px;
	}
	.centerborderttl strong{
		font-size: 22px;
	}
	.contentstext p {
		font-size: 14px;
	}
	/* point */
	.pointlist {
		justify-content: center;
		gap: 10px;
		margin-bottom: 40px;
		flex-wrap: wrap;
	}
	.pointlist .pointdetail {
		flex:none;
		width: 48%;
	}
	.pointlist .pointdetail .pointdetail_inner {
		padding: 10px ;
	}
	.pointlist .pointdetail h3{
		font-size: 16px;
	}
	.pointlist .pointdetail .pointdetail_label {
		font-size: 16px;
		height: auto !important;
	}
	
	/* product */
	.contentsttl {
		font-size: 18px;
		margin-bottom: 10px;
		line-height: 1;
	}
	.spectable_container{
		overflow: auto;
		padding-bottom: 5px;
	}
	.spectable_container table.spectable{
		width: 800px;
	}
	.spectable th, .spectable td{
		font-size: 15px;
	}
	
	/* qa */
	#qa {
		margin-top: 65px;
	}
	.questions {
		border-radius: 10px;
		margin-bottom: 15px;
	}
	.questions .question {
		padding:15px 40px 15px 40px;
	}
	.questions .question::before, .questions .answer::before {
		left: 20px;
	}
	.questions .question::after {
		font-size: 20px;
		right: 15px;
	}
	.questions .answer {
		padding: 15px 40px 15px 40px;
	}
}
#download .mvaction_btns .mvaction_btn:hover{
	opacity: 0.7;
}
#download .mvaction_btns .download_btn.storebtn{
	background: #c9151d;
	border: 3px solid #c9151d;
	border-radius: 20px;
}
#download .download_btns .download_btn.dlbtn{
	background: #FFF;
	border: 3px solid #c9151d;
	border-radius: 20px;
	color: #c9151d;
}

/*|||||||||||||| フッター ||||||||||||||*/
footer {
  padding: 20px;
  text-align: center;
  font-size: 11px;
  background: #c4c4c4;
  color: #4c4c4c;
}
@media only screen and (max-width: 768px) {
  footer {
    padding: 12px;
    font-size: 11px;
  }
}

/* 使用条件・注意事項リスト：ビュレット強制表示 */
.contentstext .note_list {
  margin: 0 0 1.4em 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.contentstext .note_list li {
  position: relative;
  display: block !important;
  padding-left: 1.2em;
  font-weight: 400 !important;
  line-height: 1.8;
  margin-bottom: 0.2em;
  font-size: 15px;
}

.contentstext .note_list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 400;
}

.contentstext .note_ttl {
  font-weight: 700;
  margin-bottom: 0.4em;
  font-size: 15px;
}

@media only screen and (max-width: 768px) {
  .contentstext .note_list li,
  .contentstext .note_ttl {
    font-size: 14px;
  }
}

/*========================================================
  smooth-ball-hex-key 固有スタイル（tbhモジュールに上乗せ）
  ※重複を整理し最終値のみを1回ずつ記述
========================================================*/

/* 共通CSS非依存で自己完結 */
*, *::before, *::after{ box-sizing:border-box; }
img{ max-width:100%; height:auto; }
html, body{ overflow-x:hidden; }

/* ---- main / mainvisual（CTAをMVに重ねる） ---- */
#main{ position:relative; }
#main .mainvisual{ position:relative; text-align:center; background:transparent; }
#main .mainvisual h1{ margin:0; font-size:0; line-height:0; }
#main .mainvisual h1 img{ width:100%; height:auto; }
#main .mainvisual h1 img.pc{ display:block; }
#main .mainvisual h1 img.sp{ display:none; }
#main .mainvisual .mvaction{
	position:absolute; left:0; right:0; bottom:3%;
	width:100%; padding:0; margin:0; z-index:2;
}

/* ---- CTAボタン（usecase/chart 等で共通利用） ---- */
.mvaction{ padding:72px 0 0; }
.mvaction .mvaction_btns{
	display:flex; justify-content:center; column-gap:20px;
	width:96%; max-width:1060px; margin:0 auto;
}
.mvaction .mvaction_btns .mvaction_btn{
	font-size:25px; font-weight:bold;
	display:flex; justify-content:center; align-items:center;
	max-width:520px; width:60%; height:80px;
	text-decoration:none; transition:.3s;
}
.mvaction .mvaction_btns .mvaction_btn:hover{ opacity:.7; }
.mvaction .mvaction_btns .mvaction_btn.dlbtn{
	background:#fff; border:3px solid #c9151d; border-radius:20px; color:#c9151d;
}

/* ---- movie ---- */
#movie{ margin-top:10px; }
#movie .product_movie p{ font-weight:bold; }

/* ---- problem（縦並びの囲みボックス） ---- */
.problembox{
	border:1px solid #dcdcdc; border-radius:8px;
	max-width:1000px; margin:40px auto 0; padding:20px 50px;
}
.problemrow{ display:flex; align-items:center; column-gap:22px; padding:16px 0; }
.problemrow_img{ width:88px; flex:none; text-align:center; }
.problemrow_img img{ width:100%; height:auto; }
.problemrow_text h3{ font-size:18px; font-weight:bold; color:#1a1a1a; line-height:1.25; margin-bottom:2px; }
.problemrow_text p{ font-size:15px; color:#333; }

/* ---- usecase（写真3カラム） ---- */
.usecaselist{ display:flex; justify-content:space-between; column-gap:20px; }
.usecaselist .usecase_item{ flex:1; min-width:0; text-align:center; }
.usecaselist .usecase_img img{ width:100%; height:auto; display:block; }
.usecaselist .usecase_label{ font-size:22px; font-weight:bold; margin-top:12px; }

/* ---- premium（機能カード：赤枠は見出し＋画像のみ、本文は枠外） ---- */
.contentstext_center{ text-align:left; }
.premiumlist{ display:flex; justify-content:space-between; column-gap:20px; margin:40px 0 60px; }
.premiumlist .premiumdetail{ flex:1; min-width:0; display:flex; flex-direction:column; }
.premiumlist .premiumdetail_box{ border:2px solid #c9151d; padding-bottom:14px; }
.premiumlist .premiumdetail_head{ display:flex; align-items:stretch; margin-bottom:14px; }
.premiumlist .premiumdetail_head .num{
	background:#c9151d; color:#fff; font-size:24px; font-weight:bold;
	width:42px; flex:none; display:flex; align-items:center; justify-content:center;
}
.premiumlist .premiumdetail_head h3{ font-size:22px; font-weight:bold; line-height:1.25; padding:8px 10px; }
.premiumlist .premiumdetail_img{ text-align:center; padding:0 12px; margin-bottom:0; }
.premiumlist .premiumdetail_img img{ max-width:100%; height:auto; display:block; margin:0 auto; }
.premiumlist .premiumdetail p{ font-size:15px; padding:12px 2px 0; margin:0; }

/* ---- howto（使い方：列幅を画像の縦横比で配分し、表示高さを揃える） ---- */
.howtolist{ display:flex; justify-content:space-between; column-gap:40px; }
.howtolist .howtoblock{ flex:1; }
.howtolist .howto_ttl{ color:#c9151d; font-size:26px; font-weight:bold; margin-bottom:12px; }
.howtolist .howto_lead{ font-size:15px; margin-bottom:16px; }
.howtolist .howto_imgs{ display:flex; align-items:flex-start; column-gap:14px; }
.howtolist .howto_img{ display:flex; flex-direction:column; flex:1.63 1 0; min-width:0; }
.howtolist .howtoblock:nth-child(2) .howto_img:nth-child(2){ flex-grow:1.79; } /* 脱磁画像だけ横長 */
.howtolist .howto_img img{ width:100%; height:auto; display:block; }
.howtolist .howto_cap{ font-size:15px; margin-top:12px; }
.howtolist .howto_img_cap{ display:block; font-size:15px; margin-top:8px; }
.howtolist .note_red{ color:#e50012; font-size:14px; }

/* ---- chart（対応表画像） ---- */
.chart_table{ text-align:center; }
.chart_table img{ max-width:900px; width:100%; height:auto; display:block; margin:0 auto; }

/* ---- product（2ライン＋スペック表） ---- */
.product_lead{ text-align:center; }
.product_lines{ display:flex; justify-content:space-between; column-gap:40px; margin:30px auto 50px; }
.product_lines .product_col{ flex:1; min-width:0; }
.product_lines .product_line_ttl{ font-size:22px; font-weight:bold; margin-bottom:10px; }
.product_lines .product_item{ margin-bottom:22px; }
.product_lines .product_type{ font-size:15px; font-weight:600; margin-bottom:6px; }
.product_lines .product_img{ text-align:center; }
.product_lines .product_img img{ max-width:100%; height:auto; display:block; margin:0 auto; }

/* ---- tbhベースの余白調整（上下余白感をデザイン寄りに） ---- */
section{ margin-bottom:115px; }
.centerborderttl{ margin-bottom:50px; }
#point .centerborderttl{ margin-bottom:50px; }
#qa{ margin-top:0; }

/* ==================== SP（〜768px） ==================== */
@media only screen and (max-width:768px){
	#main .mainvisual h1 img.pc{ display:none !important; }
	#main .mainvisual h1 img.sp{ display:block; }
	.mvaction{ padding:42px 0 0; }
	.mvaction .mvaction_btns .mvaction_btn{ width:90%; height:50px; font-size:15px; border-radius:20px !important; }

	.problembox{ padding:10px 18px; margin-top:20px; }
	.problemrow{ column-gap:14px; padding:12px 0; }
	.problemrow_img{ width:56px; }
	.problemrow_text h3{ font-size:16px; }
	.problemrow_text p{ font-size:14px; }

	.usecaselist{ flex-wrap:wrap; column-gap:2%; row-gap:16px; }
	.usecaselist .usecase_item{ flex:none; width:100%; }
	.usecaselist .usecase_label{ font-size:16px; margin-top:8px; }

	.premiumlist{ flex-wrap:wrap; column-gap:2%; row-gap:16px; margin:24px 0 36px; }
	.premiumlist .premiumdetail{ flex:none; width:100%; }
	.premiumlist .premiumdetail_head h3{ font-size:16px; }
	.premiumlist .premiumdetail_head .num{ font-size:20px; width:38px; }
	.premiumlist .premiumdetail p{ font-size:14px; }

	.howtolist{ display:block; }
	.howtolist .howtoblock{ margin-bottom:36px; }
	.howtolist .howto_ttl{ font-size:18px; }
	.howtolist .howto_lead{ font-size:14px; }
	.howtolist .howto_cap, .howtolist .howto_img_cap{ font-size:14px; }
	.howtolist .note_red{ font-size:13px; }

	.product_lines{ display:block; margin:20px auto 30px; }
	.product_lines .product_col{ margin-bottom:30px; }
	.product_lines .product_line_ttl{ font-size:16px; }
	.product_lines .product_type{ font-size:14px; }

	section{ margin-bottom:58px; }
	.centerborderttl{ margin-bottom:28px; }
	#point .centerborderttl{ margin-bottom:28px; }
}


/* メインビジュアルのCTAボタンを画面幅に応じて縮小 */
@media only screen and (min-width: 769px) {

	#main .mainvisual .mvaction .mvaction_btns .mvaction_btn {
		/* flex:1による自動拡大を解除 */
		flex: 0 1 auto;

		/* 画面幅に応じて、260～520pxの範囲で変化 */
		width: clamp(260px, 34vw, 520px);

		/* ボタンの高さも可変 */
		height: clamp(54px, 5.2vw, 80px);

		/* 文字サイズも可変 */
		font-size: clamp(15px, 1.65vw, 25px);

		/* 左右の余白 */
		padding: 0 clamp(15px, 2vw, 30px);

		white-space: nowrap;
	}
}