@import url(common.css);
@import url(slick.css);
@import url(slick-theme.css);

/* ------------------------------------------------
  #kv
------------------------------------------------ */

#kv{
	background: 50% 50% no-repeat;
	background-image: url(../img/new_withone/kv_bg.png);
	padding: 60px 0 75px;
	margin: -22px auto 0;
}
#kv .inner h1{
	color: #006a2c;
	font-size: 38px;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
	letter-spacing: 0.02em;
}
#kv .inner .subtitle{
	color: #636363;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.8;
	text-align: center;
	margin: 0 auto 20px;
}
#kv .inner .subtitle span{
	color: #5cb531;
}


/*----- SP -----*/

@media screen and (max-width: 768px) {
	#kv {
		margin: 0 auto;
    padding: 37px 0 47px;
    background-size: 183%;
    background-position-y: 70%;
    background-repeat: no-repeat;
    background-position-x: center;
  }
  #kv .inner h1 {
  	font-size: 20px;
  }
  #kv .inner .subtitle {
    font-size: 14px;
    margin: 0 auto 5px;
  }
}



/* ------------------------------------------------
  #contents
------------------------------------------------ */

#contents div > .flame{
	padding-top: 75px;
}
#sec_products_top{
	margin-top: 50px;
}
#contents .products_menu ul.type ul.item > li ul.detail {
	display: block !important;
}
#contents #sec_products_top .products_menu ul.type ul.item > li ul.detail li {
  text-align: left;
  margin: 0;
}


/*----- breakpoint-style -----*/

@media screen and (max-width: 930px) {
	#contents #sec_products_top .products_menu ul.type ul.item > li ul.detail li {
		font-size: 0.9vw;
	}
}

/*----- SP -----*/

@media screen and (max-width: 768px) {
	#contents #sec_products_top {
    padding: 25px 0 0;
    margin-top: 20px;
	}
	#contents #sec_products_top .products_menu ul.type li ul.item {
    display: flex !important; 
	}
	#contents #sec_products_top .products_menu ul li,
	#contents #sec_products_top .products_menu ul.type ul.item > li a span.inset {
		display: block !important;
	}
	#contents #sec_products_top .products_menu ul.type > li.type1 {
		width: 100% !important;
		padding: 0;
	}
	#contents .products_menu ul.type ul.item > li ul.detail {
	 display: none !important;
	}
	#contents #sec_products_top .products_menu ul.type > li.type2 {
		width: 100% !important;
		margin-left: 0;
		padding: 0 0 0 5px;
	}
	#contents .products_menu ul.type ul.item {
		width: 100% !important;
	}
	#contents #sec_products_top .products_menu ul.type li.type1 ul.item > li {
		width: 33.333% !important;
	}
	#contents #sec_products_top .products_menu ul.type ul.item > li + li {
		margin-left: 10px;
	}
	#contents .products_menu ul.type ul.item > li a {
    background: #fff;
    border-radius: 5px;
	}
	#contents #sec_products_top .products_menu ul.type > li > h3 {
		font-size: 14px;
    display: block;
    -webkit-writing-mode: unset;
    -ms-writing-mode: lr-tb;
    writing-mode: unset;
    width: 100%;
    height: auto;
    padding: 10px 0 10px !important;
    position: relative;
    margin-bottom: 10px;
	}
	#contents #sec_products_top .products_menu ul.type > li > h3 .ball {
    position: absolute;
    bottom: 40px;
    width: 151px;
    padding: 7px 0;
    display: block;
    left: 0;
    right: 0;
    margin: auto;
	}
	#contents #sec_products_top .products_menu ul.type > li > h3 .ball::after {
    bottom: -5px;
    border-width: 10px 10.5px 0 10.5px;
	}
	#contents .products_menu ul.type ul.item > li.act a span.inset {
    border-width: 3px;
    border-radius: 5px;
    background: #fffaf0;
	}
	#contents #sec_products_top ul.item > li.act a span.inset::before,
	#contents #sec_products_top ul.item > li.act a span.inset::after {
		display: none;
  }
	#contents #sec_products_top .products_menu ul.type ul.item > li a span.inset {
		direction: ltr;
    padding: 10px 4px;
    border-radius: 5px;
	}
	#contents #sec_products_top .products_menu ul.type ul.item > li a span.inset .ph {
		width: 100%;
    margin-right: 0px; 
	}
	#contents #sec_products_top .products_menu ul.type ul.item > li.item1 a span.inset .ph img {
		max-width: 80%;
	}
	#contents #sec_products_top .products_menu ul.type ul.item > li.item2 a span.inset .ph img {
		margin-top: 2px;
    max-width: 75%;
	}
	#contents #sec_products_top .products_menu ul.type ul.item > li.item3 a span.inset .ph img {
		max-width: 85%;
	}
	#contents #sec_products_top .products_menu ul.type ul.item > li.item4 a span.inset .ph img {
    max-width: 30%;
    /*margin-top: -15px;*/
  }
	#contents #sec_products_top .products_menu ul.type ul.item > li h4 {
		font-size: 2vw;
    line-height: 1.2;
    height: 30px;
	}
	#contents #sec_products_top .products_menu ul.type ul.item > li .category img {
		width: 50px;
	}
	#contents #sec_products_top .products_menu ul.type ul.item > li h4 {
		margin-bottom: 3px;
		margin-top: 5px;
	}

}

@media screen and (max-width: 420px) {
	#contents #sec_products_top .products_menu ul.type ul.item > li h4 {
		font-size: 3vw;
		height: 30px;
	}
	#contents #sec_products_top .products_menu ul.type ul.item > li.item4 h4 {
		height: auto !important;
	}
}

/* ----------------------------
  common
---------------------------- */

.box1,
.box2{
	font-size: 14px;
	border: 1px solid #7d7d7d;
	line-height: 1;
	display: inline-block;
}
.box1{
	/*width: 140px;*/
	font-weight: bold;
	text-align: center;
	padding: 10px 0;
	margin-top: 25px;
}
.box2{
	/*width: 860px;*/
	padding: 15px 20px 14px;
	margin-top: 20px;
}
.red{
	color: #dd0e13;
	font-weight: bold;
}
.fr {
	float: right;
	padding-top: 20px;
	width: auto;
}


/*----- SP -----*/

@media screen and (max-width: 768px) {
	.box2{
		padding: 10px;
    line-height: 1.4;
	}
	.fr {
		float: none;
		padding-top: 20px;
		width: auto;
	}
	.image-benpi {
		text-align: center;
	}
}



/* ----------------------------
  #sec1
---------------------------- */

#sec1{
	position: relative;
	max-width: 1000px;
  margin: 70px auto 0;
  padding: 0 40px;
}
#sec1 .label{
  width: 85%;
	color: #fff;
	background-repeat: no-repeat;
	position: absolute;
	top: -30px;
	left: 18px;
	direction: rtl;
}
#sec1 .label ul{
	font-size: 0;
	/*letter-spacing: -.4em;*/
	padding: 19px 0 21px;
	margin-left: 115px;
	direction: ltr;
}
#sec1 .label ul li{
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.03em;
	display: inline-block;
}
#sec1 .label ul li + li{
	margin-left: 45px;
}
#sec1 .label ul li::before{
	content: '';
	width: 25px;
	height: 21px;
	vertical-align: text-bottom;
	display: inline-block;
	margin-right: 10px;
}
#sec1 .label .baloon {
	padding: 10px 0;
	border-radius: 30px;
	position: absolute;
	top: -20px;
	left: -50px;
	width: 150px;
	line-height: 1.3;
	color: #68af28;
	background: #fff;
	font-weight: bold;
	text-align: center;
	direction: ltr;
}
#sec1 .label .baloon:after {
	border: 8px solid transparent;
	border-left: 20px solid #fff;
	position: absolute;
	top: 40px;
	right: -15px;
	content: "";
	transform: rotate(30deg);
}
#sec1 .product{
	/*padding: 0 30px;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
#sec1 .product .text{
	/*width: 360px;*/
	/*float: left;*/
	width: 45%;
	padding-right: 40px;
}
#sec1 .product .text h2{
	font-size: 55px;
	font-weight: bold;
	line-height: 1;
}
#sec1 .product .text p{
	font-size: 20px;
	margin-top: 3px;
}
#sec1 .product .text h2 span{
	color: #000;
	font-size: 30px;
	margin-bottom: 12px;
	display: block;
}
#sec1 .product .text h2 span::after{
	content: '';
	width: 71px;
	height: 17px;
	display: inline-block;
	background-image: url(../img/category2.png);
	background-repeat: no-repeat;
	margin-left: 12px;
}
#sec1 .product .text ul{
	text-align: center;
	margin-top: 20px;
}
#sec1 .product .text ul li{
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	border-radius: 12px;
	padding: 14px 0 13px;
}
#sec1 .product .text ul li + li{
	margin-top: 12px;
}
#sec1 .product .image{
	/*width: 415px;*/
	width: 55%;
	/*float: right;*/
}
#sec1 .product .image img{
	max-width: 100% !important;
	width: auto !important;
}
#sec1 .about .section{
	padding: 0 10px;
  margin-top: 28px;
}
#sec1 .about .section h3{
	/*width: 880px;*/
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
	border-bottom: 2px solid;
	padding-bottom: 10px;
	margin-left: -10px;
	text-indent: -1.5em;
	padding-left: 1.5em;
}
#sec1 .about .section h3.b_clover::before{
	width: 21px;
	height: 22px;
	margin-right: 13px;
}
#sec1 .about .section h3 span{
	font-size: 14px
}
#sec1 .about .section h4 {
	font-size: 18px;
  font-weight: bold;
  margin-top: 15px;
  color: #68af28;
}
#sec1 .about .row {display: flex;}
#sec1 .about .row .img {
	margin: 20px 50px 0 0;
	/* width: 200px; */
}
#sec1 .about .row .img img{
	width: 200px;
}
#sec1 .about .row .effect {
	width: 70%;
}
#sec1 .about .row .effect {
	width: 70%;
}

#sec1 .about .row .img img{
	width: 200px;
}
#sec1 .about .row .effect {
	width: 70%;
}
#sec1 .about .row .effect {
	width: 70%;
}
#sec1 .about .indent {
	margin-left: 1em;
	text-indent: -1em;
}
#sec1 .about .section .effect{
	color: #151515;
	font-size: 16px;
	line-height: 1.75;
	margin-top: 20px;
}
#sec1 .about .section .dosage{
	width: 100%;
	margin-top: 25px;
}
#sec1 .about .section .dosage th,
#sec1 .about .section .dosage td{
	border: 1px solid #e5e5e5;
}
#sec1 .about .section .dosage th{
	color: #fff;
	background-color: #979b91;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	padding: 7px 0;
}
#sec1 .about .section .dosage td{
	color: #151515;
	font-size: 16px;
	text-align: center;
	padding: 11px 0;
}
#sec1 .about .section .dosage td.middle{
	vertical-align: middle;
	text-align: left;
	padding-left: 33px;
}
#sec1 .about .section ol.list{
	font-size: 14px;
	text-indent: -2.5em;
	margin-left: 2.5em;
	line-height: 1.86;
	margin-top: 15px;
}
#sec1 .about .section .advice{
	background-color: #f6f6f6;
	padding: 17px 0 16px;
	margin-top: 15px;
}
#sec1 .about .section .advice p{
	font-size: 14px;
	font-weight: bold;
	margin-left: 15px;
}
#sec1 .about .section .component{
	font-size: 16px;
	line-height: 1.75;
	margin-top: 20px;
}
#sec1 .about .section .component .pc-only{
	display: unset;
}
#sec1 .about .section .component td{
	padding-left: 10px;
}
#sec1 .about .section .material{
	font-size: 14px;
	line-height: 1.86;
	text-indent: -4.5em;
	margin-left: 4.5em;
	margin-top: 17px;
}
#sec1 .about .section span.note{
	font-size: 14px;
}
#sec1 .about .section .attention{
	font-size: 14px;
	line-height: 1.86;
	text-indent: -1.5em;
	margin-left: 1.5em;
	margin-top: 12px;
}
#sec1 .about .section .attention.inside {
	margin: 2px 0 5px 1em;
}
#sec1 .about .section .attention.inside.special {
	text-indent: -2.5em;
	margin-left: 2em;
}


#sec1 .label_inner{
	position: relative;
}
#sec1 .label_inner:after {
	content: '';
	position: absolute;
	top: 0;
	right: -40px;
	width: 40px;
	height: 78px;
}
#sec1 .label_inner:before {
	content: '';
	position: absolute;
	top: 0;
	left: -40px;
	width: 40px;
	height: 78px;
}

/*----- .green -----*/

#sec1.green .label_inner{
	background: #88ca4f;
}
#sec1.green .label_inner:after {
	background-image: url(../img/new_withone/withone/label_after.png);
}
#sec1.green .label_inner:before {
	background-image: url(../img/new_withone/withone/label_before.png);
}
#sec1.green .label ul li::before{
	background-image: url(../img/new_withone/withone/check.png);
}
#sec1.green .product .text h2{
	color: #68af28;
}
#sec1.green .product .text ul li{
	color: #428c00;
	background-color: #eef7e1;
	border: 2px solid #ddeec2;
}
#sec1.green .product .image{
	/*margin-top: -10px;*/
}
#sec1.green .about .section h3{
	color: #68af28;
}

/*----- .rose -----*/

#sec1.rose .label{
  background: #f499ae;
}
#sec1.rose .label_inner:after {
	background-image: url(../img/new_withone/alpha/label_after.png);
}
#sec1.rose .label_inner:before {
	background-image: url(../img/new_withone/alpha/label_before.png);
}
#sec1.rose .label p {color: #ea528f;}
#sec1.rose .label ul li::before{
	background-image: url(../img/new_withone/alpha/check.png);
}
#sec1.rose .product{
	padding-bottom: 15px;
}
#sec1.rose .product .text h2{
	color: #ea528f;
	font-size: 53px;
	/*letter-spacing: -0.05em;*/
	margin-bottom: 5px;
}
#sec1.rose .product .text h2 span {
	letter-spacing: 0;
}
#sec1.rose .product .text ul li{
	color: #dc1163;
	background-color: #fff0f3;
	border: 2px solid #ffecf0;
}
#sec1.rose .product .image{
	margin-top: 5px;
}
#sec1.rose .about .section{

}
#sec1.rose .about .section h3{
	color: #f55d9a;
}
#sec1.rose .about .section h4{
	color: #f55d9a;
}
#sec1.rose .about .section h3::before{
	background-image: url(../img/new_withone/alpha/clover.png);
}

/*----- .blue -----*/

#sec1.blue .label{
	background: #6cc1e1;
}
#sec1.blue .label_inner:after {
	background-image: url(../img/new_withone/withone_l/label_after.png);
}
#sec1.blue .label_inner:before {
	background-image: url(../img/new_withone/withone_l/label_before.png);
}
#sec1.blue .label .baloon {color: #32a4cf;}
#sec1.blue .label ul li::before{
	background-image: url(../img/new_withone/withone_l/check.png);
}
#sec1.blue .product{
	padding-bottom: 15px;
}
#sec1.blue .product .text h2{
	color: #32a4cf;
	font-size: 53px;
	/*letter-spacing: -0.05em;*/
}
#sec1.blue .product .text ul li{
	color: #0085b7;
	background-color: #eaf8fd;
	border: 2px solid #e5f6fc;
}
#sec1.blue .product .image{
	margin-top: 35px;
}
#sec1.blue .about .section h4{
	color: #32a4cf;
}
#sec1.blue .about .section h3{
	color: #32a4cf;
}
#sec1.blue .about .section h3::before{
	background-image: url(../img/new_withone/withone_l/clover.png);
}

/*----- pink -----*/

#sec1.pink .label{
	background: #fe8dbf;
}
#sec1.pink .label_inner:after {
	background-image: url(../img/new_withone/suppository/label_after.png);
}
#sec1.pink .label_inner:before {
	background-image: url(../img/new_withone/suppository/label_before.png);
}
#sec1.pink .label .baloon {color: #e52b92}
#sec1.pink .label ul li::before{
	background-image: url(../img/new_withone/suppository/check.png);
}
#sec1.pink .product{
	padding-bottom: 15px;
}
#sec1.pink .product .text h2{
	color: #e52b92;
	font-size: 53px;
	/*letter-spacing: -0.05em;*/
}
#sec1.pink .product .text h2 span::after{
	width: 65px;
	background-image: url(../img/category3.png);
}
#sec1.pink .product .text ul li{
	color: #e52b92;
	background-color: #fdf1f7;
	border: 2px solid #fdeef5;
}
#sec1.pink .product .image{
	text-align: center;
	margin-top: 75px;
}
#sec1.pink .about .section h4{
	color: #e52b92;
}
#sec1.pink .about .section h3{
	color: #e52b92;
}
#sec1.pink .about .section h3::before{
	background-image: url(../img/new_withone/suppository/clover.png);
}
#sec1 .about .section .dosage td{
	vertical-align: middle;
}
#sec1.pink .about .section .advice table{
	font-size: 14px;
	font-weight: bold;
}
#sec1.pink .about .section .advice table th{
	font-weight: bold;
	padding-left: 22px;
	padding-right: 10px;
}
#sec1.pink .about .section ul.attention li{
	padding-left: 1em;
}




/*----- IE対策 -----*/

@media all and (-ms-high-contrast:none){

	#sec1 .label ul {
		padding: 19px 0 14px;
	}

	#sec1 .label ul li::before{
		margin-bottom: 7px;
	}
	#sec1 .product .text ul li{
		padding: 17px 0 10px;
	}
	#sec1 .about .section .dosage th{
		padding: 10px 0 4px
	}
	#sec1 .about .section .dosage td{
		padding: 14px 0 8px;
	}
	#sec1 .about .section .advice{
		padding: 19px 0 14px;
	}
	.box1{
		padding: 12px 0 8px;
	}
	.box2{
		padding: 17px 0 12px 20px;
	}

}


/*----- breakpoint-style -----*/

@media screen and (max-width: 1000px) {
	#sec1 .label ul li {
		font-size: 1.6vw;
	}
	#sec1 .label ul li + li {
    margin-left: 25px;
	}
}

@media screen and (max-width: 375px) {
	#sec1 .about .section .dosage td {
		font-size: 4vw;
	}
}


/*----- SP -----*/

@media screen and (max-width: 768px) {
	#sec1 {
		padding: 0 10px;
		margin-top: 2em;
	}

	/*label*/
	/*----- .green -----*/
	#sec1.green .label {
    background-color: #88c94f;
	}
	/*----- .rose -----*/
	#sec1.rose .label {
    background-color: #f499ae;
	}
	/*----- .blue -----*/
	#sec1.blue .label {
    background-color: #6cc1e1;
	}
	/*----- .pink -----*/
	#sec1.pink .label {
    background-color: #fe8dbf;
	}


	#sec1 .label {
		width: auto;
    position: static;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    padding: 20px 20px 0;
	}
	#sec1 .label_inner {
		background: none !important;
	}
	#sec1 .label_inner:before, #sec1 .label_inner:after {
		content: none !important;
	}
	#sec1 .label ul {
		margin-left: 0;
	  padding: 16px 0;
	}
	#sec1 .label ul li {
		font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.5;
    display: block;
	}
	#sec1 .label ul li + li {
		margin-left: 0;
		margin-bottom: 0;
	}
	#sec1 .label ul li::before {
    margin-right: 0px;
    background-size: 70%;
    background-repeat: no-repeat;
    margin-bottom: -5px;
	}
	#sec1 .label .baloon {
    position: static;
    width: 100%;
	}
	#sec1 .label .baloon:after {
    content: none;
	}

	/*product*/
	#sec1 .product {
		display: block;
		padding: 10px 20px 5px;
	}
	#sec1 .product .text h2 {
		font-size: 29px !important;
		margin: 10px 0 25px;
	}
	#sec1 .product .text h2 span {
		font-size: 18px;
		letter-spacing: normal;
	}
	#sec1 .product .text ul li {
    font-size: 15px;
    border-radius: 3px;
    padding: 6px 0 6px;
    font-weight: normal;
	}
	#sec1 .product .text ul li + li {
    margin-top: 6px;
	}
	#sec1 .product .text,
	#sec1 .product .image {
		width: 100%;
		text-align: center;
	}
	#sec1 .product .text {
    padding-right: 0;
	}
	#sec1 .product .image {
    margin: 20px 0 30px !important;
	}
	#sec1 .about .section h3 {
    margin-bottom: 15px;
	}
	#sec1 .about .section .component {
		width: 100%;
	}
	#sec1 .about .section .component tr{
		display: block;
    border: 1px solid #e5e5e5;
	}
	#sec1 .about .section .component tbody tr:nth-child(n + 2) {
		margin-top: 10px;
	}
	#sec1 .about .section .component th,
	#sec1 .about .section .component td {
		font-size: 15px;
		display:  block;
		padding: 7px;
		text-align: center;
	}
	#sec1 .about .section .component th {
    background: #979b91;
    padding: 10px 7px 8px;
    font-weight: bold;
    color: #fff;
		line-height: 1.2;
	}

	/* ----- pink*/
	#sec1.pink .product .image img {
		max-width: 80% !important;
	}

	/*about*/
	#sec1 .about .section h3 {
		margin-left: 0;
	}
	#sec1 .about .section .dosage th {
		font-size: 15px;
	}
	#sec1 .about .section .dosage th:nth-child(1),
	#sec1 .about .section .dosage th:nth-child(2) {
		width: 25%;
	}
	#sec1 .about .section .dosage th:nth-child(3) {
		width: 50%;
	}
	#sec1 .about .section .dosage td.middle {
		padding: 0 10px;
	}
	#sec1 .about .row {
		display: block;
	}
	#sec1 .about .row .img {
		margin: 20px 0 0 0;
	}
	#sec1 .about .row .img img {
		width: auto;
	}
	#sec1 .about .row .effect {
		width: 100%;
	}
	#sec1 .about .section .effect {
		font-size: 15px;
    margin-top: 15px;
	}
	#sec1 .about .section {
		margin-top: 20px;
    padding: 0 20px;
	}

	/*IE*/
	@media all and (-ms-high-contrast:none){
		#contents #sec_products_top .products_menu ul.type > li > h3 .ball {
			padding: 10px 0 7px;
		}
	}

}