@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{
}
.problemlist{
	display: flex;
	justify-content: space-between;
	column-gap: 30px;
	flex-wrap: wrap;
	width: 96%;
	max-width: 780px;
	margin: 50px auto;
}
.problemlist .problemdetail{
	flex: 1;
}
.problemlist .problemdetail .problemdetail_img{
	margin-bottom: 10px;
}
.problemlist .problemdetail .problemdetail_label{
	color: #c9151d;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 3px;
}
.problemlist .problemdetail p{
	font-size: 15px;
}

/* solution */
#solution{
}
.solution_container{
	border: 2px solid #c9151d;
	margin-top: 60px;
}
.solution_container .solution_ttl{
	background: #c9151d;
	color: #FFF;
	font-size: 26px;
	font-weight: bold;
	padding: 15px 10px;
	text-align: center;
}
.solution_list{
	padding: 40px 30px;
}
.solution_list .solution_detail{
	background: url("../img/icon_check.png") no-repeat left center;
	background-size: 77px auto;
	padding-left: 80px;
	margin-top: 50px;
	line-height: 1;
}
.solution_list .solution_detail:first-child{
	margin-top: 0;
}
.solution_list .solution_detail .solution_label{
	color: #c9151d;
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 10px;
}
.solution_list .solution_detail p{
	font-size: 20px;
}

/* howtoflow */
#howto{}
.howtoflow{
	display: flex;
	justify-content: space-between;
	column-gap: 20px;
	margin-top: 30px;
}
.howtoflow .howtodetail{
	flex: 1;
}
.howtoflow .howtodetail .howtodetail_img{
	border: 2px solid #c9151d;
	position: relative;
	margin-bottom: 10px;
}
.howtoflow .howtodetail .howtodetail_img .flownumber{
	background: #c9151d;
	font-size: 24px;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 45px;
	height: 45px;
	position: absolute;
	left: 0;
	top: 0;
}
.howtoflow .howtodetail p{
	font-size: 15px;
}

/* product */
.productimage{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 96%;
	max-width: 940px;
	margin: 70px auto 80px;
}
.productimage .productimg_info{
	width: 45.31914893617021%;
}
.productimage .productimg_package{
	width: 46.38297872340426%;
}
.productimage .productimg_set{
	width: 100%;
	text-align: center;
}
.productimage .productimg_set img{
	max-width: 210px;
}
.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;
}
.spectable td{
	padding: 8px;	
}
.spectable td.tac{
	text-align: center;
}
.section_contents_bottom{
	margin-top: 70px;
}
.section_contents_bottom .productimage{
	margin-top: 10px;
}

/* 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: "－";
}


/* store */
.storelink{
	display: flex;
	justify-content:center;
	column-gap: 25px;
	width: 96%;
	max-width: 840px;
	margin: 50px auto 0;
}
.storelink a{
	border-radius: 20px;
	background: #c9151d;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	height: 200px;
	position: relative;
	transition: 0.3s;
}
.storelink a:hover{
	opacity: 0.7;
}
.storelink a .storelink_label{
	position: absolute;
	width: 100%;
  left: 0;
	bottom: 20px;
	text-align: center;
}
.storelink a .storeicon {
	padding-bottom: 20px;
	width: 100%;
	text-align: center;
}
.storelink a:nth-of-type(1) .storeicon img{
	width: 51.53846153846154%;
}
.storelink a:nth-of-type(2) .storeicon img{
	width: 68.46153846153846%;
}
.storelink a:nth-of-type(3) .storeicon img{
	width: 51.53846153846154%;
}


@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;
	}
	
	/* problem */
	.problemlist{
		margin: 25px auto;
		column-gap: 4%;
		grid-row-gap: 20px;
	}
	.problemlist .problemdetail {
		width: 48%;
		flex: none;
	}
	
	/* solution */
	.solution_container .solution_ttl {
		font-size: 16px;
		padding: 10px;
	}
	.solution_list {
		padding: 20px 10px;
	}
	.solution_list .solution_detail {
		background: url("../img/icon_check.png") no-repeat left center;
		background-size: 38px auto;
		padding-left: 45px;
		margin-top: 25px;
	}
	.solution_list .solution_detail .solution_label {
		font-size: 18px;
		margin-bottom: 5px;
	}
	.solution_list .solution_detail p {
		font-size: 16px;
	}
	
	/* howto */
	.howtoflow {
		display: block;
		margin-top: 15px;
		padding: 0 10px;
	}
	.howtoflow .howtodetail{
		margin-bottom: 20px;
	}
	.howtoflow .howtodetail .howtodetail_img {
		text-align: center;
	}
	
	/* product */
	.contentsttl {
		font-size: 18px;
		margin-bottom: 10px;
		line-height: 1;
	}
	.productimage {
		display: block;
		width: 96%;
		margin: 30px auto 40px;
	}
	.productimage .productimg_info {
		width: 100%;
		margin-bottom: 20px;
	}
	.productimage .productimg_package{
		width: 100%;
	}
	.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;
	}
	
	/* store */
	.storelink {
		column-gap: 10px;
		margin: 25px auto 0;
	}
	.storelink a {
		border-radius: 10px;
		height: auto;
		text-decoration: none;
		padding: 10px;
	}
	.storelink a .storelink_label{
		position: relative;
		bottom: auto;
	}
	.storelink a .storeicon {
		padding-bottom: 0px;
		width: 100%;
		height: 100%;
	}
	.storelink a img{
		margin-bottom: 10px;
	}
}


/*|||||||||||||| ダウンロードボタン ||||||||||||||*/

#download .download_btns{
	display: flex;
	justify-content: center;
	column-gap: 20px;
	width: 96%;
	max-width: 1060px;
	margin: 0 auto;
}
#download .download_btns .download_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;
}
#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;
}


@media only screen and (max-width: 768px) {

	#download .download_btns {
		column-gap: 10px;
	}
	#download .download_btns .download_btn {
		border-radius: 10px !important;
		font-size: 14px;
		width: 50%;
		height: 44px;
	}
}

/*|||||||||||||| フッター ||||||||||||||*/
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;
  }
}

/*|||||||||||||| 使用条件・注意事項リスト ||||||||||||||*/
.note_block {
	margin-top: 1.6em;
}

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

.note_list {
	margin: 0;
	padding-left: 1.4em;
	list-style: disc;
}

.note_list li {
	font-weight: 400;
	line-height: 1.8;
	margin-bottom: 0.2em;
	font-size: 15px;
}

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


.note_block {
  margin-top: 1.6em;
}

.note_ttl {
  font-weight: 700;
  margin-bottom: 0.4em;
}

.note_list {
  margin: 0 0 1.4em 0;
  padding-left: 1.6em;
  list-style-type: disc;
  list-style-position: outside;
}

.note_list li {
  display: list-item;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 0.2em;
}

/* 使用条件・注意事項リスト：ビュレット強制表示 */
.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;
  }
}