@charset "utf-8";

/* CSS Document */
/* 遠近両用コンタクトレンズ紹介ページ 2019/04 */
#bifocal {
	display: block;
	color: #717171;
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
	width: 750px;
	margin: 0 auto;
	background-color: #ffffff;
}

#bifocal p,
#bifocal a,
#bifocal span,
#bifocal div,
#bifocal ul,
#bifocal li {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#bifocal a {
	text-decoration: none;
}

#bifocal a:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-khtml-opacity: 0.6;
	-moz-opacity: 0.6;
}

#bifocal .tbl {
	display: table;
	width: 100%;
}

#bifocal .tbl .cell {
	display: table-cell;
	vertical-align: top;
}

#bifocal .main_ttl {
	font-size: 36px;
	color: #fff;
	text-align: center;
	background-color: #345ca6;
	padding: 20px;
}

#bifocal .main_ttl2 {
	font-size: 36px;
	color: #fff;
	text-align: center;
	background-color: #345ca6;

}

#bifocal .sp {
	display: none;
}

/*ヘッダー*/
#bifocal .header_box {
	display: block;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#bifocal .header_box img {}

/*遠近両用コンタクト紹介*/
#bifocal .introduction_box {
	background-color: #e2f0fb;
	position: relative;
	padding-bottom: 10px;
}

#bifocal .introduction_box2 {
	position: relative;
	padding-bottom: 80px;
}

#bifocal .introduction_box2 .point {
	position: absolute;
	bottom: 0px;
	right: 20px;
	z-index: 2;
}

/*遠近両用コンタクトレンズとは*/
#bifocal .about_box {
	display: block;
	width: 678px;
	height: 224px;
	background-color: #ffffff;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin: 50px auto 40px;
	position: relative;
}

#bifocal .about_box .topic_ttl {
	display: block;
	color: #ffffff;
	font-size: 24px;
	background-color: #74c5cc;
	width: 684px;
	padding: 12px 15px 12px 50px;
	position: absolute;
	top: 16px;
	right: 0px;
	box-sizing: border-box;
}

#bifocal .about_box .topic_txt {
	display: block;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 2;
	width: 100%;
	padding: 0px 40px 40px;
	position: absolute;
	top: 100px;
}

#bifocal .about_box img {
	position: absolute;
	top: -37px;
	right: -20px;
	z-index: 4;
}

/*こんな方にオススメ！*/
#bifocal .rcmd_box {
	display: block;
	width: 678px;
	height: 270px;
	background-color: #ffffff;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin: 50px auto 40px;
	position: relative;
}

#bifocal .rcmd_box .topic_ttl {
	display: block;
	color: #ffffff;
	font-size: 24px;
	background-color: #7ebfe7;
	width: 684px;
	padding: 12px 15px 12px 50px;
	position: absolute;
	top: 16px;
	right: 0px;
	box-sizing: border-box;
}

#bifocal .rcmd_box .topic_txt {
	display: block;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 2;
	width: 100%;
	padding: 0px 40px 40px;
	position: absolute;
	top: 100px;
}

#bifocal .rcmd_box .topic_txt ul {}

#bifocal .rcmd_box .topic_txt ul li {
	margin-bottom: 20px;
}

#bifocal .rcmd_box .topic_txt ul li img {
	position: relative;
	bottom: 4px;
	margin-right: 26px;
}

/*老眼の原因*/
#bifocal .factor_box {
	display: block;
	width: 678px;
	height: 290px;
	background-color: #ffffff;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin: 50px auto 40px;
	position: relative;
}

#bifocal .factor_box .topic_ttl {
	display: block;
	color: #ffffff;
	font-size: 24px;
	background-color: #eeaabe;
	width: 684px;
	padding: 12px 15px 12px 50px;
	position: absolute;
	top: 16px;
	right: 0px;
	box-sizing: border-box;
}

#bifocal .factor_box .topic_txt {
	display: block;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 2;
	width: 100%;
	padding: 0px 40px 40px;
	position: absolute;
	top: 100px;
}

/*遠近両用コンタクトレンズの仕組み*/
#bifocal .mechanism_box {
	display: block;
	width: 678px;
	background-color: #ffffff;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 40px 28px;
	margin: 50px auto 40px;
	position: relative;
}

#bifocal .mechanism_box .topic_ttl {
	display: block;
	color: #2d74b0;
	font-size: 24px;
	text-align: center;
	margin-bottom: 28px;
}

#bifocal .mechanism_box .topic_txt {
	display: block;
	color: #717171;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 2;
	text-align: center;
}

#bifocal .mechanism_box .topic_txt img {
	display: block;
	margin: auto;
}

#bifocal .mechanism_box .topic_txt .sub_txt {
	display: block;
	margin-bottom: 30px
}

#bifocal .mechanism_box .topic_txt .box {
	display: block;
	background-color: #ffffff;
	padding: 75px 44px 24px;
	border: 1px solid #2d7abc;
	margin-top: 60px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	position: relative;
}

#bifocal .mechanism_box .topic_txt .box .title {
	display: inline-block;
	color: #2d7abc;
	font-size: 24px;
	width: 360px;
	background-color: #ffffff;
	padding: 0 30px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: -25px;
}

#bifocal .mechanism_box .topic_txt .box .txt {
	display: block;
	color: #2d7abc;
	margin-top: 30px;
}

/*近視用のコンタクトレンズ*/
#bifocal .explain_box {
	display: block;
	padding: 0 0px;
}

#bifocal .explain_box .topic_ttl {
	display: block;
	color: #2d7abc;
	font-size: 24px;
	letter-spacing: 2px;
	text-align: center;
	line-height: 1.6;
	padding: 0 60px;
	margin-bottom: 36px;
	background: -moz-linear-gradient(bottom, #e1f1fb 0%, #ffffff 100%);
	background: -webkit-gradient(linear, top, bottom, color-stop(0%, #e1f1fb), color-stop(100%, #ffffff));
	background: -webkit-linear-gradient(bottom, #e1f1fb 0%, #ffffff 100%);
	background: linear-gradient(to bottom, #e1f1fb 0%, #ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1f1fb', endColorstr='#ffffff', GradientType=0);
}

#bifocal .explain_box .topic_ttl2 {
	display: block;
	color: #2d7abc;
	font-size: 24px;
	letter-spacing: 2px;
	line-height: 1.6;
	text-align: center;
	margin: 36px;
	background: none;

}

#bifocal .explain_box .topic_txt {
	display: block;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 2.4;
	padding: 0 50px;
}

#bifocal .explain_box .topic_txt .topic_sub_txt {
	display: block;
	padding: 0 10px 10px;
	line-height: 2;
}

#bifocal .explain_box .topic_txt .topic_sub_txt p {
	margin-bottom: 15px;
}

#bifocal .explain_box .topic_txt .type_box .tbl {
	margin-top: 30px;
}

#bifocal .explain_box .topic_txt .type_box .txt_box {
	display: block;
	font-size: 14px;
	line-height: 1.8;
	width: 300px;
	height: 100%;
	min-height: 180px;
	background-color: #ffffff;
	border: 2px solid #2d7abc;
	padding: 25px;
	margin: auto;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	position: relative;
}

#bifocal .explain_box .topic_txt .type_box .txt_box .txt_ttl_box {
	display: inline-block;
	color: #2d7abc;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 3px;
	text-align: center;
	background-color: #ffffff;
	padding: 0 10px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: -16px;
}

#bifocal .explain_box .topic_txt .type_box .txt_box .txt_ttl_box.type1 {
	width: 96px;
}

#bifocal .explain_box .topic_txt .type_box .txt_box .txt_ttl_box.type2 {
	width: 96px;
}

#bifocal .explain_box .topic_txt .type_box .txt_box .txt_ttl_box.type3 {
	width: 160px;
}

#bifocal .explain_box .topic_txt .type_box .txt_box .txt_ttl_box.type4 {
	width: 176px;
}

#bifocal .explain_box .topic_txt .type_box .txt_box .sub_txt {
	display: block;
	font-size: 11px;
}

#bifocal .explain_box .topic_txt .type_box .green .txt_box {
	border-color: #70bdcb;
}

#bifocal .explain_box .topic_txt .type_box .green .txt_box .txt_ttl_box {
	color: #70bdcb;
}

/*ADDとは？*/
#bifocal .whats_box {
	display: block;
	width: 624px;
	background-color: #f1f8fd;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 30px;
	margin: 70px auto 70px;
	background-image: url(/special/bifocal/img/icon_question.png);
	background-repeat: no-repeat;
	background-position: 510px 10px;
}

#bifocal .whats_box .topic_ttl {
	display: block;
	color: #2d7abc;
	font-size: 24px;
}

#bifocal .whats_box .topic_txt {
	display: block;
	color: #717171;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 2;
}

/*遠近両用コンタクトレンズで注意すべき点*/
#bifocal .caution_box {
	display: block;
	width: 750px;
	margin: 0px auto;
}

#bifocal .caution_box .topic_mainttl {
	display: block;
	color: #2d7abc;
	font-size: 24px;
	margin: 60px 0 20px;
	text-align: center;
}

#bifocal .caution_box .topic_txtbox {}

#bifocal .caution_box .topic_txtbox ul {}

#bifocal .caution_box .topic_txtbox ul li {
	display: block;
	margin-top: 30px;
}

#bifocal .caution_box .topic_txtbox ul li .box {}

#bifocal .caution_box .topic_txtbox ul li .box .topic_ttl {
	display: block;
	color: #ffffff;
	font-size: 17px;
	background-color: #66c7d3;
	padding: 10px 32px;
	letter-spacing: 2px;
	line-height: 1.4;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

#bifocal .caution_box .topic_txtbox ul li .box .topic_txt {
	display: block;
	color: #717171;
	font-size: 17px;
	background-color: #ffffff;
	padding: 20px 32px;
	letter-spacing: 2px;
	line-height: 1.6;
	border: 1px solid #66c7d3;
	-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
}

#bifocal .caution_box .topic_txtbox ul li .box .topic_txt .topic {
	display: inline-block;
	color: #48abc0;
	font-size: 16px;
	font-weight: bold;
	background-color: #f5f3bd;
	letter-spacing: 2px;
	line-height: 1;
	padding: 6px 15px;
	margin-bottom: 4px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

/*POINT*/
#bifocal .onepoint_box {}

#bifocal .onepoint_box .main_box {
	display: block;
	background-color: #ffffff;
	padding: 30px 30px;
	border: 1px solid #2d7abc;
	width: 624px;
	margin: 45px auto 0px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	position: relative;
}

#bifocal .onepoint_box .main_box .topic_ttl {
	display: inline-block;
	color: #2d7abc;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 3px;
	text-align: center;
	width: 96px;
	background-color: #ffffff;
	padding: 0 7px;
	position: absolute;
	left: 20px;
	margin: auto;
	top: -18px;
}

#bifocal .onepoint_box .main_box .topic_txt {
	color: #2d7abc;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 2;
}

#bifocal .onepoint_box .main_box .topic_txt .underline {
	font-size: 20px;
	background: linear-gradient(transparent 55%, #fbfae1 0%);
}

#bifocal .page_link {
	max-width: 624px;
	margin: 0 auto 0px;
}

#bifocal .page_link_in {
	padding: 20px 0 40px;
	text-align: center;
	line-height: 1.6;
}

#bifocal .page_link_in.page_link02 {
	padding: 40px 0 10px;
}

#bifocal .page_link_in a {
	color: #70bdcb;
	font-size: 14px;
	text-decoration: underline;
	font-weight: 600;
}

/*遠近両用コンタクトレンズ商品一覧*/
#bifocal .lineup_box {
	padding-bottom: 15px;
	background-image: url(/special/bifocal/img/lineup_box_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

#bifocal .lineup_box .ttl_visual img {
	display: block;
	margin: 35px auto;
}

#bifocal .lineup_box .main_ttl {
	margin-bottom: 30px;
}


/*商品詳細*/
#bifocal .product_box {}

#bifocal .product_box>div {
	display: block;
	width: 710px;
	background-color: #ffffff;
	padding: 20px 30px 30px;
	margin: 0 auto 20px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

#bifocal .product_box .catch {
	display: block;
	color: #2d7abc;
	font-size: 25px;
	letter-spacing: 1px;
	padding: 0px 0 25px;
}

#bifocal .product_box .tbl .cell {
	vertical-align: top;
}

#bifocal .product_box .tbl .cell img {
	width: 310px;
}

#bifocal .product_box .name_box {
	display: block;
	line-height: 1.5;
}

#bifocal .product_box .name_box .name_ttl {
	display: inline-block;
	color: #717171;
	font-size: 14px;
	padding-top: 3px;
	margin-right: 18px;
	vertical-align: top;
}

#bifocal .product_box .name_box .name_txt {
	display: inline-block;
	color: #717171;
	font-size: 18px;
}

#bifocal .product_box .price_box {
	display: inline-block;
	width: 47%;
}

#bifocal .product_box .price_box .price_ttl {
	display: inline-block;
	color: #717171;
	font-size: 14px;
	margin-right: 28px;
}

#bifocal .product_box .price_box .price_txt {
	display: inline-block;
	color: #717171;
}

#bifocal .product_box .price_box .price_txt .blue {
	color: #345ca6;
	font-size: 28px;
}

#bifocal .product_box .point_box {
	display: inline-block;
	width: 47%;
}

#bifocal .product_box .point_box .point_ttl {
	display: inline-block;
	color: #717171;
	font-size: 14px;
	margin-left: 28px;
}

#bifocal .product_box .point_box .point_txt {
	display: inline-block;
	color: #717171;
	font-size: 14px;
}

#bifocal .product_box .point_box .point_txt .bold {
	color: #333434;
	font-size: 28px;
}

#bifocal .product_box .btn {
	display: block;
	color: #ffffff;
	font-size: 18px;
	text-align: center;
	width: 300px;
	background-color: #70bdcb;
	padding: 10px;
	margin-top: 12px;
	height: auto;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	position: relative;
}

#bifocal .product_box .btn:before {
	display: none;
}

#bifocal .product_box .btn:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 85px;
	width: 0;
	height: 0;
	margin-top: -3px;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	background: none;
	border-color: transparent transparent transparent #ffffff;
}

#bifocal .lineup_button_box {
	margin-top: 34px;
	text-align: center;
}

#bifocal .lineup_button_box .btn {
	display: inline-block;
	color: #ffffff;
	font-size: 22px;
	text-align: center;
	width: 500px;
	background-color: #70bdcb;
	padding: 15px;
	border-radius: 50px;
	height: auto;
	position: relative;
}

#bifocal .lineup_button_box .btn::before {
	position: relative;
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 9px;
	border-color: transparent transparent transparent #ffffff;
	margin-right: 10px;
	vertical-align: 2px;
	background: none;
}

#bifocal .lineup_button_box .btn::after {
	display: none;
}

#bifocal .product_box .review_wrap {}

#bifocal .product_box .review_wrap h4 {
	padding: 0 0 4px;
	margin: clamp(20px, 5vw, 30px) 0 clamp(10px, 5vw, 13px);
	border-bottom: solid 1px #717171;
	line-height: 1.6;
	box-sizing: border-box;
	color: #717171;
	font-size: 14px;
	text-align: left;
}

#bifocal .product_box .review_cnt {
	padding: 1px 0;
	margin: 2% 0 1%;
	color: #717171;
	font-size: 12px;
	text-align: left;
}

#bifocal .product_box .review_cnt .reviewer {
	display: flex;
	align-items: center;
}

#bifocal .product_box .review_cnt .reviewer .imgBox {
	width: 60px;
	padding: 0 1%;
	padding-right: 12px;
}

#bifocal .product_box .review_cnt .reviewer b {
	display: flex;
	align-items: center;
}

#bifocal .product_box .review_cnt .c {
	margin: 1% 0 1%;
	padding: 0 3% 0;
	display: block;
}

#bifocal .product_box .review_cnt .c .bold {
	font-weight: 700;
	;
}

#bifocal .product_box .shouhin_link {
	padding: 8px 30px 8px 15px;
	color: #26b8b4;
	font-size: 1.2rem;
	display: block;
	position: relative;
	font-size: clamp(10px, calc(10px + 2px), 12px);
	line-height: 1.5;
	width: 80%;
	margin: 0 auto;
	border-radius: 5px;
	border: 2px solid #bde5e4;
	max-width: 400px;
	text-align: center;
}

#bifocal .product_box .shouhin_link:before {
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	width: 8px;
	height: 8px;
	margin: 0.5% 0 0;
	position: absolute;
	top: 36%;
	right: 15px;
	-webkit-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
	border-top: 2px solid #26b8b4;
	border-right: 2px solid #26b8b4;
	content: "";
}

/* タブ切り替え */
.tab_container {
	padding-bottom: 1em;
	margin: 20px auto 40px;
}

.tab_item {
	width: 345px;
	padding: 15px 0;
	background: #fff;
	text-align: center;
	color: #70bdcb;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	transition: all 0.2s ease;
	border: 1px solid #70bdcb;
	margin-left: 20px;
}

.tab_item:hover {
	opacity: 0.75;
}

input[name="tab_item"] {
	display: none;
}

.tab_content {
	display: none;
	padding: 1em 1em 0;
	clear: both;
	overflow: hidden;
}

#tab1:checked~#tab1_content,
#tab2:checked~#tab2_content {
	display: block;
}

.tab_container input:checked+.tab_item {
	background: #70bdcb;
	color: #fff;
	position: relative;
}

.tab_container input:checked+.tab_item:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -10px;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-style: solid;
	border-color: #70bdcb transparent transparent transparent;
	border-width: 10px 10px 0 10px;
}

.tab_content_description {
	padding: 30px 20px;
}

.tab_content_description h3 {
	margin: 15px 0;
	text-align: center;
	color: #6fbdca;
	font-size: 20px;
}

.rank_icon {
	width: 30px;
	height: 30px;
	background-color: #66c7d3;
	color: #fff;
	font-size: 15px;
	text-align: center;
	font-weight: bold;
	line-height: 30px;
	position: relative;
	top: -20px;
	left: -30px;
}

.rank_1_color {
	background-color: #f6ac00;
}

.rank_2_color {
	background-color: #9b9b9b;
}

.rank_3_color {
	background-color: #b36700;
}

.rank-btn {
	display: block;
	position: relative;
	width: 100%;
	/*ボタンの幅*/
	height: 80px;
	padding: 10px 0;
	margin: 30px auto;
	vertical-align: middle;
	background-color: #345ca6;
	/*ボタンの色*/
	font-weight: bold;
	font-size: 25px;
	line-height: 76px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
}

.rank-btn:hover {
	text-decoration: none;
	color: #fff;
	opacity: 0.7;
}

.rank-btn::before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: #fff;
	animation: rank-btn 3s ease-in-out infinite;
}

@-webkit-keyframes rank-btn {
	0% {
		-webkit-transform: scale(0) rotate(45deg);
		opacity: 0;
	}

	80% {
		-webkit-transform: scale(0) rotate(45deg);
		opacity: 0.5;
	}

	81% {
		-webkit-transform: scale(4) rotate(45deg);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(50) rotate(45deg);
		opacity: 0;
	}
}

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

	/* CSS Document */
	/* 遠近両用コンタクトレンズ紹介ページ 2019/04 */
	#bifocal {
		display: block;
		color: #515151;
		font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
		background-color: #ffffff;
		width: 100%;
		max-width: 640px;
		margin: 0 auto 40px;
	}

	#bifocal p,
	#bifocal a,
	#bifocal span,
	#bifocal div,
	#bifocal ul,
	#bifocal li {
		padding: 0;
		margin: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#bifocal a {
		text-decoration: none;
	}

	#bifocal .tbl {
		display: table;
		width: 100%;
	}

	#bifocal .tbl .cell {
		display: block;
		vertical-align: top;
	}

	#bifocal .pc {
		display: none;
	}

	#bifocal .sp {
		display: block;
	}

	/*ヘッダー*/
	#bifocal .header_box {
		display: block;
		width: 100%;
		max-width: 640px;
		margin: auto;
	}

	#bifocal .header_box img {}

	/*遠近両用コンタクト紹介*/
	#bifocal .introduction_box {
		background-color: #e2f0fb;
		position: relative;
		padding-bottom: 20px;
	}

	#bifocal .introduction_box2 {
		position: relative;
		padding-bottom: 40px;
	}

	#bifocal .introduction_box2 .point {
		display: block;
		width: 100%;
		max-width: 100px;
		height: auto;
		position: absolute;
		bottom: 0px;
		right: 0px;
		z-index: 2;
	}

	/*遠近両用コンタクトレンズとは*/
	#bifocal .about_box {
		display: block;
		width: 90%;
		max-width: 600px;
		height: auto;
		background-color: #ffffff;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		margin: 40px auto 40px;
		padding-top: 20px;
		position: relative;
	}

	#bifocal .about_box .topic_ttl {
		display: block;
		color: #ffffff;
		font-size: 16px;
		background-color: #74c5cc;
		width: 102%;
		padding: 12px 15px 12px 30px;
		position: absolute;
		right: 0;
		margin-left: 20px;
		box-sizing: border-box;
	}

	#bifocal .about_box .topic_txt {
		display: block;
		font-size: 16px;
		letter-spacing: 2px;
		line-height: 2;
		width: 100%;
		padding: 70px 30px 30px;
		position: relative;
		top: 0;
	}

	#bifocal .about_box img {
		display: block;
		width: 157px;
		height: auto;
		position: absolute;
		bottom: -47px;
		top: auto;
		right: 0px;
		z-index: 4;
	}

	/*こんな方にオススメ！*/
	#bifocal .rcmd_box {
		display: block;
		width: 90%;
		max-width: 600px;
		height: auto;
		background-color: #ffffff;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		margin: 60px auto 40px;
		padding-top: 20px;
		position: relative;
	}

	#bifocal .rcmd_box .topic_ttl {
		display: block;
		color: #ffffff;
		font-size: 16px;
		background-color: #7ebfe7;
		width: 102%;
		padding: 12px 15px 12px 30px;
		position: absolute;
		right: 0;
		box-sizing: border-box;
	}

	#bifocal .rcmd_box .topic_txt {
		display: block;
		font-size: 16px;
		letter-spacing: 2px;
		line-height: 2;
		width: 100%;
		padding: 70px 30px 30px;
		top: 0;
		position: relative;
	}

	#bifocal .rcmd_box .topic_txt ul {}

	#bifocal .rcmd_box .topic_txt ul li {
		padding-left: 26px;
		font-size: 14px;
		margin-bottom: 20px;
		background-image: url(/special/bifocal/img/sp_icon_check.png);
		background-size: 14px 14px;
		background-repeat: no-repeat;
		background-position: 0px 10px
	}

	#bifocal .rcmd_box .topic_txt ul li img {
		display: inline-block;
		width: 14px;
		height: 14px;
		position: relative;
		bottom: 4px;
		margin-right: 26px;
	}

	/*老眼の原因*/
	#bifocal .factor_box {
		display: block;
		width: 90%;
		max-width: 600px;
		height: auto;
		background-color: #ffffff;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		margin: 40px auto 40px;
		padding-top: 20px;
		position: relative;
	}

	#bifocal .factor_box .topic_ttl {
		display: block;
		color: #ffffff;
		font-size: 16px;
		background-color: #eeaabe;
		width: 102%;
		padding: 12px 15px 12px 30px;
		position: absolute;
		right: 0;
		box-sizing: border-box;
	}

	#bifocal .factor_box .topic_txt {
		display: block;
		font-size: 16px;
		letter-spacing: 2px;
		line-height: 2;
		width: 100%;
		padding: 70px 30px 30px;
		position: static;
	}

	/*遠近両用コンタクトレンズの仕組み*/
	#bifocal .mechanism_box {
		display: block;
		width: 90%;
		max-width: 600px;
		height: auto;
		background-color: #ffffff;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		padding: 40px 20px;
		margin: 50px auto 0px;
		position: relative;
	}

	#bifocal .mechanism_box .topic_ttl {
		display: block;
		color: #2d74b0;
		font-size: 22px;
		text-align: center;
		margin-bottom: 28px;
	}

	#bifocal .mechanism_box .topic_txt {
		display: block;
		color: #717171;
		font-size: 16px;
		letter-spacing: 2px;
		line-height: 2;
		text-align: center;
	}

	#bifocal .mechanism_box .topic_txt img {
		display: block;
		width: 100%;
		max-width: 286px;
		height: auto;
		margin: auto;
	}

	#bifocal .mechanism_box .topic_txt .sub_txt {
		display: block;
		font-size: 14px;
		margin-bottom: 30px
	}

	#bifocal .mechanism_box .topic_txt .box {
		display: block;
		background-color: #ffffff;
		padding: 40px 20px 20px;
		border: 1px solid #2d7abc;
		margin-top: 60px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		position: relative;
	}

	#bifocal .mechanism_box .topic_txt .box .title {
		display: inline-block;
		color: #2d7abc;
		font-size: 14px;
		width: 200px;
		background-color: #ffffff;
		padding: 0 10px;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		top: -15px;
	}

	#bifocal .mechanism_box .topic_txt .box .txt {
		display: block;
		color: #2d7abc;
		font-size: 12px;
		margin-top: 30px;
	}

	#bifocal .mechanism_box .topic_txt .box img {
		width: 100%;
		max-width: 263px;
		height: auto;
	}

	/*近視用のコンタクトレンズ*/
	#bifocal .explain_box {
		display: block;
		padding: 0 0px;
	}

	#bifocal .explain_box .topic_ttl {
		display: block;
		color: #2d7abc;
		font-size: 20px;
		letter-spacing: 2px;
		line-height: 1.6;
		text-align: center;
		padding: 40px 20px 0;
		margin-bottom: 36px;
		background: -moz-linear-gradient(bottom, #e2f0fb 0%, #ffffff 100%);
		background: -webkit-gradient(linear, top, bottom, color-stop(0%, #e2f0fb), color-stop(100%, #ffffff));
		background: -webkit-linear-gradient(bottom, #e2f0fb 0%, #ffffff 100%);
		background: linear-gradient(to bottom, #e2f0fb 0%, #ffffff 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2f0fb', endColorstr='#ffffff', GradientType=0);
	}

	#bifocal .explain_box .topic_ttl2 {
		display: block;
		color: #2d7abc;
		font-size: 20px;
		letter-spacing: 2px;
		line-height: 1.6;
		text-align: center;
		margin: 30px 0 0;
	}

	#bifocal .explain_box .topic_txt {
		display: block;
		font-size: 14px;
		letter-spacing: 2px;
		line-height: 2.4;
		padding: 0 20px;
	}

	#bifocal .explain_box .topic_txt .sub_txt {
		display: block;
		font-size: 16px;
		padding: 0 10px;
	}

	#bifocal .explain_box .topic_txt .type_box .tbl {
		margin-top: 0;
	}

	#bifocal .explain_box .topic_txt .type_box .txt_box {
		display: block;
		font-size: 14px;
		line-height: 1.8;
		width: 100%;
		height: auto;
		background-color: #ffffff;
		border: 2px solid #2d7abc;
		padding: 18px;
		margin-top: 40px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		position: relative;
	}

	#bifocal .explain_box .topic_txt .type_box .txt_box .txt_ttl_box {
		display: inline-block;
		color: #2d7abc;
		font-size: 16px;
		font-weight: bold;
		letter-spacing: 3px;
		text-align: center;
		background-color: #ffffff;
		padding: 0 10px;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		top: -18px;
	}

	#bifocal .explain_box .topic_txt .type_box .txt_box .txt_ttl_box.type1 {
		width: 96px;
	}

	#bifocal .explain_box .topic_txt .type_box .txt_box .txt_ttl_box.type2 {
		width: 96px;
	}

	#bifocal .explain_box .topic_txt .type_box .txt_box .txt_ttl_box.type3 {
		width: 160px;
	}

	#bifocal .explain_box .topic_txt .type_box .txt_box .txt_ttl_box.type4 {
		width: 176px;
	}

	#bifocal .explain_box .topic_txt .type_box .txt_box .sub_txt {
		display: block;
		font-size: 11px;
		padding: 0;
	}

	#bifocal .explain_box .topic_txt .type_box .green .txt_box {
		border-color: #70bdcb;
	}

	#bifocal .explain_box .topic_txt .type_box .green .txt_box .txt_ttl_box {
		color: #70bdcb;
	}

	/*ADDとは？*/
	#bifocal .whats_box {
		display: block;
		width: 100%;
		background-color: #f1f8fd;
		padding: 20px 20px;
		margin: 40px auto 40px;
	}

	#bifocal .whats_box .topic_ttl {
		display: block;
		color: #2d7abc;
		font-size: 20px;
	}

	#bifocal .whats_box .topic_txt {
		display: block;
		color: #717171;
		font-size: 14px;
		letter-spacing: 2px;
		line-height: 2;
	}

	/*遠近両用コンタクトレンズで注意すべき点*/
	#bifocal .caution_box {
		display: block;
		width: 100%;
		padding: 0 20px;
		margin: 0px auto;
	}

	#bifocal .lineup_box {
		display: block;
		color: #2d7abc;
		font-size: 18px;
		text-align: center;
		margin-bottom: 30px;
	}

	#bifocal .caution_box .topic_mainttl {
		font-size: 18px;
		text-align: center;
		color: #2d7abc;
		margin: 0 0 10px;
	}

	#bifocal .caution_box .topic_txtbox {}

	#bifocal .caution_box .topic_txtbox ul {}

	#bifocal .caution_box .topic_txtbox ul li {
		display: block;
		margin-top: 30px;
	}

	#bifocal .caution_box .topic_txtbox ul li .box {}

	#bifocal .caution_box .topic_txtbox ul li .box .topic_ttl {
		display: block;
		color: #ffffff;
		font-size: 14px;
		background-color: #66c7d3;
		padding: 16px 16px;
		letter-spacing: 2px;
		line-height: 1.4;
		-webkit-border-radius: 5px 5px 0px 0px;
		border-radius: 5px 5px 0px 0px;
	}

	#bifocal .caution_box .topic_txtbox ul li .box .topic_txt {
		display: block;
		color: #717171;
		font-size: 14px;
		background-color: #ffffff;
		padding: 16px 16px;
		letter-spacing: 2px;
		line-height: 1.6;
		border: 1px solid #66c7d3;
		-webkit-border-radius: 0px 0px 5px 5px;
		border-radius: 0px 0px 5px 5px;
	}

	#bifocal .caution_box .topic_txtbox ul li .box .topic_txt .topic {
		display: inline-block;
		color: #48abc0;
		font-size: 14px;
		background-color: #f5f3bd;
		letter-spacing: 2px;
		line-height: 1;
		padding: 6px 15px;
		margin-bottom: 4px;
		-webkit-border-radius: 20px;
		border-radius: 20px;
	}

	/*POINT*/
	#bifocal .onepoint_box {
		padding: 0px 20px;
	}

	#bifocal .onepoint_box .main_box {
		display: block;
		background-color: #ffffff;
		padding: 20px 20px;
		border: 1px solid #2d7abc;
		width: 100%;
		margin: 45px auto 0px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
		position: relative;
	}

	#bifocal .onepoint_box .main_box .topic_ttl {
		display: inline-block;
		color: #2d7abc;
		font-size: 18px;
		font-weight: bold;
		letter-spacing: 3px;
		text-align: center;
		width: 96px;
		background-color: #ffffff;
		padding: 0 10px;
		position: absolute;
		left: 20px;
		margin: auto;
		top: -18px;
	}

	#bifocal .onepoint_box .main_box .topic_txt {
		color: #2d7abc;
		font-size: 14px;
		letter-spacing: 2px;
		line-height: 2;
	}

	#bifocal .onepoint_box .main_box .topic_txt .underline {
		font-size: 16px;
		background: linear-gradient(transparent 55%, #fbfae1 0%);
	}


	/*遠近両用コンタクトレンズ商品一覧*/
	#bifocal .lineup_box {
		padding-bottom: 15px;
		padding: 0;
		background: url(/special/bifocal/img/sp_lineup_box_bg.jpg) no-repeat 0 0;
		background-size: cover;
	}

	#bifocal .lineup_box .ttl_visual {
		display: block;
		padding: 10px 20px 0;
	}

	#bifocal .main_ttl {
		font-size: 18px;
		color: #fff;
		text-align: center;
		background-color: #345ca6;
		padding: 20px;
	}

	#bifocal .main_ttl2 {
		font-size: 18px;
		color: #fff;
		text-align: center;
		background-color: #345ca6;
	}

	/*商品詳細*/
	#bifocal .product_box {
		padding: 0 20px;
	}

	#bifocal .product_box>div {
		display: block;
		width: 100%;
		background-color: #ffffff;
		padding: 20px 20px 30px;
		margin: 0 auto 20px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
	}

	#bifocal .product_box .package {
		display: block;
		width: 94%;
		height: auto;
		margin: 0 auto 18px;
	}

	#bifocal .product_box .catch {
		display: block;
		color: #2d7abc;
		font-size: 18px;
		letter-spacing: 1px;
		text-align: center;
		padding: 0px 0 2%;
	}

	#bifocal .product_box .tbl .cell {
		vertical-align: middle;
	}

	#bifocal .product_box .detail_box {
		display: block;
		max-width: 260px;
		margin: auto;
	}

	#bifocal .product_box .price_box {
		display: inline-block;
		width: 52%;
	}

	#bifocal .product_box .name_box {
		display: flex;
		margin-bottom: 10px;
	}

	#bifocal .product_box .name_box .name_ttl {
		display: inline-block;
		color: #717171;
		font-size: 14px;
		padding-top: 3px;
		margin-right: 10px;
		vertical-align: top;
		white-space: nowrap;
	}

	#bifocal .product_box .name_box .name_txt {
		display: inline-block;
		color: #717171;
		font-size: 16px;
		line-height: 1.3;
		text-align: left;
	}



	#bifocal .product_box .price_box .price_ttl {
		display: inline-block;
		color: #717171;
		font-size: 14px;
		margin-right: 10px;
	}

	#bifocal .product_box .price_box .price_txt {
		display: inline-block;
		color: #717171;
	}

	#bifocal .product_box .price_box .price_txt .blue {
		color: #345ca6;
		font-size: 24px;
	}

	#bifocal .product_box .point_box {
		display: inline-block;
		width: 46%;
	}

	#bifocal .product_box .point_box .point_ttl {
		display: inline-block;
		color: #717171;
		font-size: 14px;
		margin-left: 5px;
	}

	#bifocal .product_box .point_box .point_txt {
		display: inline-block;
		color: #717171;
	}

	#bifocal .product_box .point_box .point_txt .bold {
		color: #333434;
		font-size: 24px;
	}

	#bifocal .product_box .btn {
		display: block;
		color: #ffffff;
		font-size: 18px;
		text-align: center;
		width: 100%;
		background-color: #70bdcb;
		padding: 10px;
		margin-top: 12px;
		-webkit-border-radius: 30px;
		border-radius: 30px;
		position: relative;
	}

	#bifocal .product_box .btn:after {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 26%;
		width: 0;
		height: 0;
		margin-top: -3px;
		border-style: solid;
		border-width: 4px 0 4px 6px;
		border-color: transparent transparent transparent #ffffff;
	}

	#bifocal .lineup_button_box {
		margin-top: 35px;
		text-align: center;
	}

	#bifocal .lineup_button_box .btn {
		display: inline-block;
		color: #ffffff;
		font-size: 18px;
		text-align: center;
		width: 90%;
		background-color: #70bdcb;
		padding: 15px;
		border-radius: 50px;
		position: relative;
	}

	#bifocal .lineup_button_box .btn::before {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		margin-right: 10px;
		border-style: solid;
		border-width: 4px 0 4px 7px;
		border-color: transparent transparent transparent #ffffff;
		vertical-align: 2px;
	}

	#bifocal .product_box .review_wrap h4 {
		font-size: 13px;
		text-align: left;
	}

	#bifocal .product_box .review_cnt {
		font-size: 12px;
		text-align: left;
	}

	/* タブ切り替え */
	.tab_container {
		padding-bottom: 1em;
		margin: 20px auto 40px;
	}

	.tab_item1 {
		margin-left: 5%;
	}

	.tab_item2 {
		margin: 0 5% 0 2%;
	}

	.tab_item {
		width: 42%;
		background: #fff;
		text-align: center;
		color: #70bdcb;
		display: block;
		float: left;
		font-weight: bold;
		font-size: 16px;
		transition: all 0.2s ease;
		border: 1px solid #70bdcb;
		box-sizing: border-box;
		line-height: 3em;
		padding: 0;
	}

	.tab_item:hover {
		opacity: 0.75;
	}

	input[name="tab_item"] {
		display: none;
	}

	.tab_content {
		display: none;
		padding: 1em 1em 0;
		clear: both;
		overflow: hidden;
	}

	#tab1:checked~#tab1_content,
	#tab2:checked~#tab2_content {
		display: block;
	}

	.tab_container input:checked+.tab_item {
		background: #70bdcb;
		color: #fff;
		position: relative;
	}

	.tab_container input:checked+.tab_item:after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -10px;
		left: 0;
		width: 0px;
		height: 0px;
		margin: auto;
		border-style: solid;
		border-color: #70bdcb transparent transparent transparent;
		border-width: 10px 10px 0 10px;
	}

	.tab_content_description {
		padding: 30px 20px;
	}

	.tab_content_description h3 {
		margin: 15px 0;
		text-align: center;
		color: #6fbdca;
		font-size: 18px;
	}

	.rank_icon {
		width: 30px;
		height: 30px;
		background-color: #66c7d3;
		color: #fff;
		font-size: 15px;
		text-align: center;
		font-weight: bold;
		line-height: 30px;
		position: relative;
		top: -20px;
		left: -20px;
	}

	.rank_1_color {
		background-color: #f6ac00;
	}

	.rank_2_color {
		background-color: #9b9b9b;
	}

	.rank_3_color {
		background-color: #b36700;
	}

	.rank-btn {
		display: block;
		position: relative;
		width: 100%;
		/*ボタンの幅*/
		height: 70px;
		padding: 10px 0;
		margin: 30px auto;
		vertical-align: middle;
		background-color: #345ca6;
		/*ボタンの色*/
		font-weight: bold;
		font-size: 20px;
		line-height: 66px;
		color: #fff;
		text-align: center;
		text-decoration: none;
		overflow: hidden;
	}

	.rank-btn:hover {
		text-decoration: none;
		color: #fff;
		opacity: 0.7;
	}

	.rank-btn::before {
		position: absolute;
		content: '';
		display: inline-block;
		top: -180px;
		left: 0;
		width: 30px;
		height: 100%;
		background-color: #fff;
		animation: rank-btn 3s ease-in-out infinite;
	}

	@-webkit-keyframes rank-btn {
		0% {
			-webkit-transform: scale(0) rotate(45deg);
			opacity: 0;
		}

		80% {
			-webkit-transform: scale(0) rotate(45deg);
			opacity: 0.5;
		}

		81% {
			-webkit-transform: scale(4) rotate(45deg);
			opacity: 1;
		}

		100% {
			-webkit-transform: scale(50) rotate(45deg);
			opacity: 0;
		}
	}

	#bifocal .product_box .shouhin_link:before {
		top: 46%;
	}
}

@media screen and (max-width:320px) {
	#bifocal .explain_box .topic_ttl {
		font-size: 18px;
	}
}

@media screen and (min-width:375px) {
	#bifocal .product_box .name_box .name_txt {
		font-size: 17px;
	}
}