@charset "UTF-8";

.contentpage .m_img_area .m_img {background-image: url("../images/case/m_img@2x.jpg");}



/*共通
---------------------------------------------------------*/
.case {
	padding-bottom: 120px;
}
.case .entry-inf {
	margin-bottom: 10px;
}
.case article .child_cat_list2 li {
	margin: 0 0 1.0em;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.case {
	padding-bottom: 10%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.case {
	padding-bottom: 12%;
}
.case .entry-inf {
	margin-bottom: .8em;
}
}



/*一覧ページ
--------------------------------------------------------------------*/
.case_list .float_box .entry-inf {
	text-align: left;
}
.case_list .float_box .child_cat_list2 {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.case_list .float_box .child_cat_list2 li {
	margin: 0 0 1.0em;
}
.case_list .float_box .img_thumbnail {
	float: left;
	width: 42%;
	max-width: 500px;
	text-align: center;
	/*background: #e6e6e6;*/
}
.case_list .float_box .txt_box {
	width: 55%;
	float: right;
}
.case_list .float_box .img_thumbnail a {
	display: block;
}
.case_list .float_box .img_thumbnail ul {
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.case_list .float_box .img_thumbnail li {
	width: 50%;
	position: relative;
	overflow: hidden;
}
.case_list .float_box .img_thumbnail li:before {
    content:"";		/*高さ*/
    display: block;
    padding-top: 72%;
}
.case_list .float_box .img_thumbnail li:after {
	content: "before";
	position: absolute;
	z-index: 1;
	right: .5em;
	bottom: .5em;
	font-family: coquette, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-variant-ligatures: none;
	color: #fff;
	letter-spacing: .2em;
	line-height: 1.2em;
	/*text-shadow: 0px 0px 12px rgba(0, 0, 0, 1.0);*/
	background: rgba(0,0,0,0.15);
	padding: 0 .2em;
}
.case_list .float_box .img_thumbnail li:last-child:after {
	content: "after";
	/*color: #ffff00;*/
	background: rgba(207,122,160,0.3);
}
.case_list .float_box .img_thumbnail img {
	display: block;
	height: 100%;
	width: auto;
	max-width: initial !important;
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin: auto;
	text-align: center;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.case_list .float_box .img_thumbnail {
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0 auto 1.0em;
}
.case_list .float_box .txt_box {
	width: 100%;
	float: none;
}
}



/*詳細ページ
---------------------------------------------------------*/
.case .sub_photo {
	width: 100%;
	max-width: 1020px;
	margin-left: auto;
	margin-right: auto;
	display: -webkit-flex;
	display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.case .sub_photo li {
	width: 30%;
	margin-right: 5%;
	margin-top: 40px;
}
.case .sub_photo li:nth-child(3n) {
	margin-right: 0;
}
.case .sub_photo li:nth-child(-n+3) {
	margin-top: 0;
}
.case .sub_photo li div {
	position: relative;
	background: #e6e6e6;
	overflow: hidden;
}
.case .sub_photo li div::before {
	content: "";	/* 高さ */
	display: block;
	padding-top: 66.6666%;
}
.case .sub_photo li div img {
	display: block;
	width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.case .sub_photo li p {
	line-height: 1.6em;
	margin-top: 1.5em;
}

.case .tbl_detail {
	width: 100%;
}
.case .tbl_detail tr:nth-child(odd) {
	background: #F9F5FA;
}
.case .tbl_detail th,
.case .tbl_detail td {
	box-sizing: border-box;
	text-align: left;
	vertical-align: middle;
}
.case .tbl_detail th {
	width: 20%;
	font-family: dnp-shuei-mincho-pr6n,sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #786252;
	letter-spacing: .15em;
	line-height: 1.6em;
	padding: 1.5em 3%;
	padding-right: 0;
}
.case .tbl_detail td {
	padding: 1.5em 3%;
}
.case .tbl_detail td p {
	margin-top: 1.0em;
}
.case .tbl_detail td p:first-child {
	margin-top: 0;
}

.case .risk {
	border: solid 5px #e3e3e3;
	padding: 40px 4%;
}
.case .risk dt {
	text-align: center;
	color: #565554;
	font-size: 120%;
	letter-spacing: .16em;
	line-height: 1.2em;
	margin-bottom: 1.0em;
}
.case .risk dd {
	width: 100%;
	max-width: 1040px;
	margin-left: auto;
	margin-right: auto;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.case .sub_photo li {
	width: 32%;
	margin-right: 2%;
	margin-top: 4%;
}
.case .sub_photo li p {
	margin-top: 1.0em;
}

.case .tbl_detail th {
	width: 25%;
	letter-spacing: .05em;
}

.case .risk {
	padding: 4%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.case .sub_photo {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.case .sub_photo li {
	width: 48%;
	margin-right: 0 !important;
	margin-top: 6% !important;
}
.case .sub_photo li:nth-child(-n+2) {
	margin-top: 0 !important;
}
.case .sub_photo li p {
	margin-top: .5em;
}

.case .tbl_detail tr,
.case .tbl_detail th,
.case .tbl_detail td {
	display: block;
	width: 100%;
}
.case .tbl_detail th {
	padding: .8em 3% .5em;
}
.case .tbl_detail td {
	padding: 0 3% 1.0em;
}

.case .risk {
	padding: 6% 4%;
}
.case .risk dt {
	margin-bottom: .5em;
}
}



/*Before／After
---------------------------------------------------------*/
.case .ba_photo .photo_box {
	width: 100%;
	max-width: 640px;
	margin: 0 auto 60px;
  position: relative;
}
.case .comparison-block .icv__control-line {
	width: 0px !important;	/*デフォルトの境界線を非表示*/
}
.case .comparison-block .icv__circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.1) url("../images/case/arrow@2x.png") no-repeat center center !important;
	background-size: contain !important;
	backdrop-filter: none !important;
	border: none !important;
}
.case .comparison-block .icv__theme-wrapper {
	display: none;	/*デフォルトの矢印を非表示*/
}
/*.case .ba_photo .beer-slider {
	display: block !important;
	font-family: coquette, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-variant-ligatures: none;
	font-size: 180%;
	letter-spacing: .1em;
	line-height: 1.2em;
}
after
.case .ba_photo .beer-slider::after {
	content: "after";
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #e290b5;
	color: #f6e63f;
	text-align: right;
	padding: .2em .5em;
}
.case .ba_photo .beer-slider > img {
	width: 100%;
}
before画像
.case .ba_photo .beer-reveal {
	background: #e6e6e6;
}
.case .ba_photo .beer-reveal::after {
	content: "before";
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #ccc;
	color: #fff;
	text-align: left;
	padding: .2em .5em;
}
.case .ba_photo .beer-reveal img {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-56.4%);
	transform: translateY(-56.4%);
}
矢印
.case .ba_photo .beer-handle {
	background: url("../images/case/arrow@2x.png") no-repeat center center !important;
	background-size: contain !important;
	opacity: 1.0 !important;
}
.case .ba_photo .beer-handle::before,
.case .ba_photo .beer-handle::after {
	display: none;
}*/

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
/*.case .ba_photo .photo_box {
	margin-bottom: 6%;
}
.case .ba_photo .beer-slider {
	font-size: 160%;
}
.case .ba_photo .beer-reveal img {
	-webkit-transform: translateY(-55%);
	transform: translateY(-55%);
}*/
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
/*.case .ba_photo .photo_box {
	margin-bottom: 8%;
}
.case .ba_photo .beer-slider {
	font-size: 130%;
	letter-spacing: normal;
}
.case .ba_photo .beer-reveal img {
	-webkit-transform: translateY(-58.2%);
	transform: translateY(-58.2%);
}*/
}



/*
---------------------------------------------------------*/

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
}