@charset "UTF-8";
/* MV */
.mv_area {
	margin: 30px 0 0 9px;
	text-align: right;
}
.mv_area_note {
	font-size: 12px;
	text-align: right;
	margin: 3px 26px 0 0;
}
@media screen and (min-width: 768px) {
	.mv_area {
		margin: 30px 0 0 30px;
	}
	.mv_area_note {
		margin: 3px 35px 0 0;
	}
}
@media screen and (min-width: 1024px) {
	.mv_area {
		margin: 10px 0 0 60px;
	}
	.mv_area_note {
		font-size: 13px;
		margin: 15px 50px 0 0;
	}
}
@media screen and (min-width: 1280px) {
	.mv_area {
		margin: 20px 0 0 90px;
	}
	.mv_area_note {
		font-size: 14px;
		margin: 33px 60px 0 0;
	}
}
@media screen and (min-width: 1600px) {
	.mv_area_note {
		margin: 33px 90px 0 0;
	}
}

/* 「カラ・レコ」とは？ */
.about_wrap {
	padding: 58px 0 60px;
}
.about_ttl_area h2 {
	display: flex;
	align-items: center;
	justify-content: center;
}
.about_ttl_area img {
	width: 35px;
	height: 35px;
}
.about_ttl {
	font-weight: bold;
	font-size: 26px;
}
.about_lead_txt {
	text-align: center;
	font-weight: bold;
	font-size: 15px;
	margin: 15px 0 0;
}
.about_img_area {
	margin: 30px auto 0;
}
.about_info_area {
	margin: 34px 0 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px 0;
}
.about_info_box {
	background: #F4F4F4;
	padding: 30px 20px;
	font-weight: bold;
}
.about_info_box_ttl {
	text-align: center;
	font-size: 17px;
	line-height: 1.6;
}
.about_info_list {
	margin: 16px 0 0;
}
.about_info_item {
	font-size: 14px;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	gap: 0 5px;
}
.about_info_item + .about_info_item {
	margin: 10px 0 0;
}
.about_info_item img {
	width: 15px;
	height: 15px;
	margin: 3px 0 0;
}
.about_btn_wrap {
	margin: 30px auto 0;
	position: relative;
	width: 260px;
}
a.about_btn {
	display: block;
	background: #1A1A1A;
	border: 1px solid #1A1A1A;
	color: #fff;
	width: 100%;
	height: 40px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
	padding: 10px 20px;
	transition: all .5s ease-out;
}
a.about_btn::after {
	position: absolute;
	content: '';
	display: block;
	background: url(../images/common/submit_off.svg) center/cover no-repeat;
	right: 14px;
	top: 12px;
	width: 8px;
	height: 16px;
	transition: all .5s ease-out;
}
@media screen and (min-width: 468px) {
	.about_img_area {
		width: 70%;
	}
	.about_info_box {
		width: 400px;
	}
}
@media screen and (min-width: 768px) {
	.about_ttl_area img {
		width: 45px;
		height: 45px;
	}
	.about_ttl {
		font-size: clamp(26px, 4vw, 52px);
	}
	.about_lead_txt {
		font-size: clamp(15px, 1.6vw, 20px);
		margin: 15px 0 0;
	}
	.about_lead_txt br {
		display: none;
	}
	.about_img_area {
		width: unset;
	}
	.about_info_area {
		margin: 45px 0 0;
		flex-direction: row;
		align-items: unset;
		gap: 0 30px;
	}
	.about_info_box {
		width: 50%;
	}
	.about_info_box_ttl {
		font-size: clamp(17px, 2vw, 26px);
	}
	.about_info_item {
		font-size: clamp(14px, 1.6vw, 26px);
	}
	.about_btn_wrap {
		margin: 30px 0 0 auto;
	}
	a.about_btn {
		font-size: clamp(14px, 1.6vw, 20px);
	}
}
@media screen and (min-width: 1024px) {
	.about_ttl_area img {
		width: 60px;
		height: 60px;
	}
	.about_wrap {
		padding: 40px 0 89px;
	}
	.about_lead_txt {
		margin: 20px 0 0;
	}
	.about_info_box {
		padding: 40px 45px;
	}
	.about_info_box_ttl br {
		display: none;
	}
	.about_info_list {
		margin: 21px 0 0;
	}
	.about_info_item + .about_info_item {
		margin: 20px 0 0;
	}
	.about_info_item img {
		width: 20px;
		height: 20px;
		margin: 3px 0 0;
	}
	a.about_btn {
		height: 45px;
	}
	a.about_btn::after {
		width: 10px;
		height: 20px;
	}
	a.about_btn:hover {
		background: #fff;
    color: #1A1A1A;
	}
	a.about_btn:hover::after {
    background: url(../images/common/submit_on.svg) center/cover no-repeat;
	}
}
@media screen and (min-width: 1280px) {
	.about_ttl_area img {
		width: unset;
		height: unset;
	}
	.about_ttl {
		font-size: 52px;
	}
	.about_lead_txt {
		font-size: 20px;
	}
	.about_info_area {
		gap: 0 50px;
	}
	.about_info_box_ttl {
		font-size: 26px;
	}
	.about_info_item {
		font-size: 20px;
	}
	.about_info_item img {
		width: unset;
		height: unset;
	}
	a.about_btn {
		height: 50px;
		font-size: 20px;
		line-height: 1.5;
		padding: 10px;
	}
	a.about_btn::after {
		right: 18px;
		top: 16px;
	}
}

/* アルコールチェックオプションのポイント */
.point_wrap {
	padding: 60px 0;
}
.point_wrap .tp_page_ttl {
	padding: 0;
}
.point_wrap .page_ttl_ja {
	line-height: 1.5;
}
.point_list_wrap {
	margin: 70px 0 0;
}
.point_item {
	border: 5px solid #F4F4F4;
	background: #fff;
	padding: 36px 16px 35px;
	margin: 35px auto 0;
	max-width: 368px;
}
.point_item:first-child {
	margin: 0 auto;
}
.point_item_pc_img {
	display: none;
}
.point_item_sp {
	text-align: center;
}
.point_item_ttl {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.5;
	display: inline-block;
}
.point_item_ttl::after {
	content: "";
	display: block;
	background: #FFFF00;
	width: 100%;
	height: 3px;
}
.point_item_sp_img {
	width: 160px;
	margin: 20px auto 0;
}
.point_item:last-child .point_item_sp_img {
	width: 200px;
}
.point_item_txt {
	margin: 20px 0 0;
}
.point_item_txt_01 {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.5;
}
.point_item_txt_02 {
	font-size: 14px;
	line-height: 1.5;
	margin: 11px 0 0;
}
@media screen and (min-width: 768px) {
	.point_wrap {
		padding: 81px 0 109px;
	}
	.point_wrap .tp_page_ttl .br_01 {
		display: none;
	}
	.point_item {
		padding: 40px;
		margin: 40px 0 0;
		max-width: unset;
		display: flex;
		gap: 0 30px;
	}
	.point_item_pc_img {
		display: block;
		width: 200px;
	}
	.point_item_sp {
		text-align: left;
		width: calc(100% - 230px);
	}
	.point_item_ttl {
		font-size: clamp(17px, 1.7vw, 22px);
	}
	.point_item_sp_img {
		display: none;
	}
	.point_item_txt_01 {
		font-size: clamp(15px, 1.6vw, 20px);
	}
	.point_item_txt_02 {
		font-size: clamp(14px, 1.4vw, 18px);
	}
}
@media screen and (min-width: 1024px) {
	.point_list_wrap {
		margin: 101px 0 0;
	}
	.point_item {
		padding: 50px 60px;
		gap: 0 60px;
	}
	.point_item_pc_img {
		width: 230px;
	}
	.point_item_sp {
		width: calc(100% - 290px);
	}
	.point_item_ttl::after {
		height: 5px;
	}
}
@media screen and (min-width: 1280px) {
	.point_item_ttl {
		font-size: 22px;
	}
	.point_item_txt_01 {
		font-size: 20px;
	}
	.point_item_txt_02 {
		font-size: 18px;
	}
	.point_item_pc_img {
		width: unset;
	}
	.point_item_sp {
		width: calc(100% - 330px);
	}
}
.option_page_body_01 {
	width: 100%;
}
@media only screen and (min-width: 1306px) {
	.option_page_body_01 {
		width: 1270px;
		margin: auto;
		padding: 0;
	}
}
/* アルコールチェックの流れ */
.alcohol_check_list {
  display: flex;
  flex-direction: column;
  align-items: normal;
  gap: 10px 0;
}
.alcohol_check_item {
  width: 100%;
  text-align: center;
}
.alcohol_check_item_inner {
  display: flex;
  flex-direction: row;
}
.alcohol_check_img {
  width: 39%;
}
.alcohol_check_desc {
  width: calc(100% - 39%);
  padding: 10px 12px 5px;
}
.alcohol_check_01 {
  background: #F4F4F4 url(../images/option/alcohol_check_01.svg) left top/57px auto no-repeat;
}
.alcohol_check_02 {
  background: #F4F4F4 url(../images/option/alcohol_check_02.svg) left top/57px auto no-repeat;
}
.alcohol_check_03 {
  background: #F4F4F4 url(../images/option/alcohol_check_03.svg) left top/57px auto no-repeat;
}
.alcohol_check_04 {
  background: #F4F4F4 url(../images/option/alcohol_check_04.svg) left top/57px auto no-repeat;
}
.alcohol_check_05 {
  background: #F4F4F4 url(../images/option/alcohol_check_05.svg) left top/57px auto no-repeat;
}
.alcohol_check_ttl {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
}
.alcohol_check_txt_wrap {
  margin: 5px 0 0;
}
.alcohol_check_txt {
  padding-left: 1em;
	text-indent: -1em;
  font-size: 13px;
	font-weight: 500;
  line-height: 1.5;
}
.alcohol_check_txt_note {
	font-size: 12px;
}
.alcohol_check_note {
  margin: 0;
  padding: 6px;
  background: #FFFF00;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}
.alcohol_check_balloon {
  position: relative;
  display: inline-block;
  margin: 22px 0 0;
  padding: 12px;
  min-width: 120px;
  max-width: 100%;
  width: 76%;
  color: #1A1A1A;
  font-size: 12px;
  background: #FFF;
  border: solid 1px #1A1A1A;
  box-sizing: border-box;
}
.alcohol_check_balloon:before {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  margin-left: -13px;
  border: 12px solid transparent;
  border-bottom: 11px solid #FFF;
  z-index: 2;
}
.alcohol_check_balloon:after {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -14px;
  border: 13px solid transparent;
  border-bottom: 11px solid #000000;
  z-index: 1;
}
.alcohol_check_balloon p:first-child {
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid #1A1A1A;
	line-height: 1.5;
}
.alcohol_check_arw {
  height: 18px;
  text-align: center;
}
.alcohol_check_arw img {
  vertical-align: top;
}
.flow_option_trial_bnr {
	margin: 92px 0 0;
}
@media only screen and (min-width: 640px) {
  .alcohol_flow_wrap {
    width: 70%;
    margin: auto;
  }
}
@media only screen and (min-width: 769px) {
  .alcohol_flow_wrap {
    width: auto;
  }
  .alcohol_check_list {
    flex-direction: row;
    gap: 0 7px;
  }
  .alcohol_check_item {
    width: calc((100% - 72px) / 5);
  }
  .alcohol_check_item_inner {
    flex-direction: column;
  }
  .alcohol_check_img {
    width: 100%;
  }
  .alcohol_check_ttl {
		font-size: clamp(18px, 1.91vw, 25px);
  }
  .alcohol_check_desc {
    width: auto;
    margin: 0 0 10px;
    padding: 19px 16px 20px;
  }
  .alcohol_check_01 {
    background: #F4F4F4 url(../images/option/alcohol_check_01.svg) left top/82px auto no-repeat;
  }
  .alcohol_check_02 {
    background: #F4F4F4 url(../images/option/alcohol_check_02.svg) left top/82px auto no-repeat;
  }
  .alcohol_check_03 {
    background: #F4F4F4 url(../images/option/alcohol_check_03.svg) left top/82px auto no-repeat;
  }
  .alcohol_check_04 {
    background: #F4F4F4 url(../images/option/alcohol_check_04.svg) left top/82px auto no-repeat;
  }
  .alcohol_check_05 {
    background: #F4F4F4 url(../images/option/alcohol_check_05.svg) left top/82px auto no-repeat;
  }
  .alcohol_check_txt_wrap {
    margin: 12px 0 0;
  }
  .alcohol_check_txt {
		font-size: clamp(13px, 1.37vw, 18px);
  }
	.alcohol_check_txt_note {
		font-size: clamp(12px, 1.22vw, 16px);
	}
  .alcohol_check_note {
		font-size: clamp(16px, 1.53vw, 20px);
  }
  .alcohol_check_balloon {
    padding: 17px;
		font-size: clamp(12px, 1.22vw, 16px);
    width: auto;
  }
  .alcohol_check_arw {
    height: auto;
    padding: 198px 0 0;
  }
}
@media only screen and (min-width: 1306px) {
  .alcohol_check_item {
    width: 231px;
  }
  .alcohol_check_ttl {
    font-size: 25px;
  }
  .alcohol_check_txt {
		font-size: 18px;
  }
	.alcohol_check_txt_note {
		font-size: 16px;
	}
  .alcohol_check_note {
    padding: 8px 9px;
		font-size: 20px;
  }
  .alcohol_check_balloon {
		font-size: 16px;
  }
}
/* CHECK */
.alcohol_product_list {
	display: flex;
	flex-direction: column;
	gap: 25px 0;
}
.alcohol_product_list_item {
	text-align: center;
}
@media only screen and (min-width: 567px) {
	.alcohol_product_list {
		flex-direction: row;
		gap: 0 50px;
	}
}
/* 料金プラン */
.compo_box_ttl_line {
	position: relative;
	width: 100%;
	background: #fff;
}
.compo_box_ttl_line div {
	margin: 0 0 4px;
	height: 4px;
}
.compo_box_ttl_line div:nth-child(1) {
  height: 2px;
	background: #0096FF;
}
.compo_box_ttl_line div:nth-child(2) {
  height: 2px;
	background: #FF0096;
}
.compo_box_ttl_line div:nth-child(3) {
  height: 2px;
	margin: 0;
	background: #FFFF00;
}
.compo_box_ttl_line div.compo_box_ttl {
	position: absolute;
	top: 50%;
	left: 50%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
	margin: 0;
  padding: 5px 10px 10px;
	transform: translateX(-50%) translateY(-50%);
  background: #fff;
  font-size: 19px;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
}
.compo_box {
  margin: 35px 0 0;
  padding: 50px 22px 45px;
  border: 3px #1A1A1A solid;
  background: #fff;
}
.compo_list_wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 30px 0 0;
}
.compo_list {
  display: flex;
  width: 100%;
}
.compo_list dt {
  width: 67%;
  padding: 7px 10px;
  background: #1A1A1A;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.45;
}
.compo_list dd {
  width: 33%;
  padding: 7px 10px;
  background: #E7E7E7;
  font-size: 14px;
  line-height: 1.45;
}
.branch_list {
  display: flex;
  flex-direction: column;
  gap: 60px 0;
  margin: 67px 0 0;
}
.branch_list_item {
  position: relative;
  width: 100%;
  margin: auto;
  padding: 61px 27px 24px;
  background: #F4F4F4;
}
.branch_img {
  position: absolute;
  left: 50%;
  bottom: 77%;
  transform: translateX(-50%);
}
.branch_img_01 {
  width: 79px;
}
.branch_img_02 {
  width: 70px;
}
.branch_img_03 {
  width: 91px;
}
.branch_name {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 111px;
  height: 28px;
  margin: auto;
  border-radius: 20px;
  background: #1A1A1A;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
.branch_desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
}
.compo_total_wrap {
  display: flex;
  flex-direction: column;
  gap: 47px 0;
  margin: 31px 0 0;
}
.compo_total_box {
  width: 100%;
}
.compo_total_ttl {
  font-size: 19px;
  font-weight: bold;
  line-height: 1;
}
.compo_total_txt {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
.compo_total_bottom {
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 2px solid #1A1A1A;
  font-size: 14px;
  font-weight: bold;
  text-align: right;
  line-height: 1;
}
@media only screen and (min-width: 640px) {
  .branch_list_item {
    width: 70%;
  }
}
@media only screen and (min-width: 769px) {
  .compo_box {
    margin: 50px 0 0;
    padding: 50px 46px;
    border: 5px #1A1A1A solid;
  }
	.compo_box_ttl_line div.compo_box_ttl {
    padding: 5px 30px;
		font-size: clamp(19px, 2.6vw, 34px);
	}
  .compo_box_ttl_line div:nth-child(1) {
    height: 4px;
  }
  .compo_box_ttl_line div:nth-child(2) {
    height: 4px;
  }
  .compo_box_ttl_line div:nth-child(3) {
    height: 4px;
  }
  .compo_list_wrap {
    flex-direction: row; 
    gap: 10px;
    margin: 50px 0 0;
  }
  .compo_list {
    width: calc(50% - 10px / 2);
  }
  .compo_list dt {
    width: 42.5%;
    padding: 12px 19px;
		font-size: clamp(14px, 1.37vw, 18px);
  }
  .compo_list dd {
    width: 57.5%;
    padding: 12px 24px;
		font-size: clamp(14px, 1.37vw, 18px);
  }
  .branch_list {
    flex-direction: row;
    gap: 0 15px;
    margin: 98px 0 0;
  }
  .branch_list_item {
    width: calc(33.333% - 28px / 3);
		margin: 0;
    padding: 73px 23px 19px;
    background: #F4F4F4;
  }
  .branch_img_01 {
    width: auto;
  }
  .branch_img_02 {
    width: auto;
  }
  .branch_img_03 {
    width: auto;
  }
  .branch_name {
    width: 132px;
    height: 40px;
		font-size: clamp(14px, 1.37vw, 18px);
  }
  .branch_desc {
    height: calc(100% - 20px - 40px);
    margin: 20px 0 0;
		font-size: clamp(14px, 1.37vw, 18px);
  }
  .compo_total_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(50% - 10px / 2);
  }
  .compo_total_wrap {
    flex-direction: row;
    gap: 0 10px;
  }
  .compo_total_ttl {
		font-size: clamp(19px, 1.83vw, 24px);
  }
  .compo_total_txt {
    margin: 10px 0 0;
		font-size: clamp(12px, 1.37vw, 28px);
  }
  .compo_total_bottom {
		padding: 13px 0 0;
		font-size: clamp(14px, 1.53vw, 20px);
  }
}
@media only screen and (min-width: 1306px) {
  .compo_box_ttl_line div.compo_box_ttl {
    height: 50px;
    padding: 5px 30px;
    font-size: 34px;
  }
  .compo_list dt {
		font-size: 18px;
  }
  .compo_list dd {
		font-size: 18px;
  }
  .branch_name {
    font-size: 18px;
  }
  .branch_desc {
    font-size: 18px;
  }
  .compo_total_ttl {
    font-size: 24px;
  }
  .compo_total_txt {
    font-size: 18px;
  }
  .compo_total_bottom {
    font-size: 20px;
  }
}
/* footer */
.clink_wrap {
  padding: 80px 0;
  background: #F4F4F4;
}
.option_trial_bnr {
  margin: 104px 0 87px;
}
.tlink_banawrap {
  border: none;
  background: #EEEEEE;
}
.tlink_bfig {
  background-image: url(../images/option/option_tlink_bfig.jpg);
}
/* header */
.option_page_logo {
	position: absolute;
	top: 7px;
	left: 14px;
	z-index: 10;
	width: 74px;
}
.option_head_nav_wrap {
	position: absolute;
	top: 12px;
	right: 13px;
	z-index: 10;
}
.option_head_nav_wrap .head_nav ul {
	padding: 0;
}
.option_head_nav_wrap .head_nav ul li a {
	width: 225px;
	height: 50px;
	border-radius: 30px;
}
.option_head_nav_wrap .head_nav ul li a .head_nav_ja {
	font-size: 22px;
}
.option_home_link a {
	display: flex;
	align-items: center;
	gap: 0 10px;
	padding: 2px 10px 2px 5px;
	border: solid #1a1a1a 2px;
	background: #1A1A1A;
	color: #fff;
	font-size: 14px;
	transition: all 0.5s ease-out;
}
.option_home_link a svg {
	width: 9px;
	fill: #fff;
	transition: all 0.5s ease-out;
}
@media only screen and (min-width: 567px) {
	.option_head_nav_wrap {
		right: 25px;
	}
}
@media only screen and (min-width: 769px) {
	.option_page_logo {
    top: 26px;
    left: 25px;
    width: 184px;
}
	.option_head_nav_wrap {
		right: 56px;
	}
}
@media only screen and (min-width: 1025px) {
	.option_home_link a:hover {
		background: #fff;
		color: #1A1A1A;
	}
	.option_home_link a:hover svg {
		fill: #1A1A1A;
	}
}
@media only screen and (min-width: 1306px) {
	.option_head_nav_wrap {
		top: 25px;
		right: 90px;
		display: flex;
		align-items: center;
		gap: 0 30px;
	}
	.option_page_logo {
		top: 51px;
		left: 102px;
		width: 19%;
	}
	.option_home_link a {
		gap: 0 13.5px;
		padding: 3px 16px 3px 10px;
		font-size: 20px;
	}
	.option_home_link a svg {
		width: 12px;
	}
}