@charset "utf-8";

article { font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif; font-weight: 400;}
.wf-active article { font-family: 'BIZ UDGothic', sans-serif;}

section{padding: 50px 0;}

.co01{ color: #B7042F;}

.wf-active h2, .wf-active h3, .wf-active h4, .wf-active h5 {
	font-family: 'Zen Kaku Gothic Antique', sans-serif;
}

h2.sec_ttl{
	font-size: 300%;
	padding-top: 0;
	font-weight: 900;
	color: black;
}
h2.sec_ttl span {
	font-weight: inherit;
}

.page_cassis-35 h3{
	font-size: 150%;
	padding: 0 0 1em;
}

.page_cassis-35 h3.bg_red {
	background: #b7042f;
	color: white;
	padding: 0.2em 0.5em;
	margin-bottom: 0.5em;
	border-radius: 3px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.6;
}

.page_cassis-35 h5{
	font-weight: 700;
	font-size: 110%;
	margin:0 0 0.25em;
	padding: 0;
}

.page_cassis-35 h5.underline {
	padding-bottom: 0.3em;
	margin-bottom: 1.2em;
	border-bottom: solid 2px #ccc;
}

.page_cassis-35 p {
	font-size: 17px;
}

p.citation {
	font-size: 12px;
	text-align: right;
}

.bgc_01{
	background: #EEF1F6;
}

.bgc_white {
	background: white;
	padding: 2em;
	border-radius: 3px;
	box-shadow: 5px 5px 5px -3px rgba(0,0,0,0.2);
}

.full{
	width: 100%;
}

@media (max-width: 799px) {
	.page_cassis-35 h3.bg_red { letter-spacing: 0;}
	.page_cassis-35 p { font-size: 1rem;}
	p.citation { font-size: 0.875rem;}
}

@media (max-width: 699px) {
	h2.sec_ttl{font-size: 230%;line-height: 1.4;}
	.page_cassis-35 h3{font-size: 120%;}
	.page_cassis-35 h5{font-size: 100%;}
}

@media (max-width: 599px) {
	section{padding: 30px 0;}
	.txt_b{font-size: 115%;}
}

@media (max-width: 499px){
	h2.sec_ttl{font-size: 180%;}
	.bgc_white { padding: 1em;}
}
@media (max-width: 399px){
	h2.sec_ttl{font-size: 150%;}
}

/* #visual_area */

#visual_area{
	height: 35vw;
	overflow: hidden;
	position: relative;
}

#visual_area .img_area{
	width: 50%;
}

#visual_area h1{
	position: absolute;
	max-width: 50vw;
	margin: 0;
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
	-webkit- transform: translateY(-50%);
}

#visual_area h1 span.txt1 {
	display: inline-block;
	width: 100%;
	margin: 1vw 0;
}

#visual_area h1 span.txt2 {
	display: inline-block;
	width: 100%;
	margin: 1vw 0;
}

@media (max-width: 899px) {
	#visual_area h1 { max-width: 60vw;}
}

@media (max-width: 699px) {
	#visual_area{height: inherit;}
	#visual_area .img_area{width: 100%;}
	#visual_area h1{ background: rgba(255,255,255,0.7);padding: 5vw 6vw;left: 0;right: 0;text-align: center;width: 90%;margin: 0 auto; max-width: unset;}
}


/* #bad_condition */

#bad_condition {
	background: #fff url(../images/cassis-35/bad_condition_bg02.png) no-repeat right center;
	background-size: cover;
	padding: 70px 0;
}

#bad_condition .inner_wide {
	max-width: 1400px;
}

#bad_condition .sec_ttl {
	font-size: 4rem;
}

#bad_condition .condition_list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 11em;
	padding: 1em 1.5em;
	background: #555d9b;
	color: #fff;
	margin: 1em;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.6;
	box-shadow: 0em 0em 0.2em #555d9b, 0em 0em 0.3em #555d9b, 0em 0em 0.5em #555d9b,0em 0em 1em #555d9b;
}

#bad_condition .condition_list li span {
	display: inline-block;
}

@media (min-width: 1400px) {
	#bad_condition {
		background-color: #fff;
		background-image: url(../images/cassis-35/bad_condition_bg01.png), url(../images/cassis-35/bad_condition_bg02.png);
		background-repeat: no-repeat, no-repeat;
		background-position: left -15vw center, right -15vw center;
		background-size: initial;
	}
}

@media (max-width: 1099px) {
	#bad_condition .sec_ttl { font-size: 5vw;}
}

@media (max-width: 899px) {
	#bad_condition { padding: 50px 0;}
	#bad_condition .condition_list li { font-size: 17px;}
}

@media (max-width: 699px) {
	#bad_condition .sec_ttl { font-size: 7vw; line-height: 1.4; padding: 0; margin-bottom: 0.3em;}
	#bad_condition .condition_list li { width: calc( 50% - 2em ); padding: 0.8em 1em;}
}

@media (max-width: 599px) {
	#bad_condition { background-position: center center; padding: 40px 0;}
	#bad_condition .condition_list li { display: block; width: 100%; max-width: 16.5em; font-size: 1.25rem; font-weight: bold; background: none; box-shadow: none; color: black; margin: 0; padding: 0.3em 0 0.3em 1.3em; text-indent: -1.3em;}
	#bad_condition .condition_list li:before { content: "\f058"; font-family: FAsolid; font-weight: bold; color: #ff5707; margin-right: 0.3em;}
	#bad_condition .condition_list li span { display: inline;}
}

@media (max-width: 399px) {
	#bad_condition .condition_list li { font-size: 1rem;}
}

/* #intro */

#intro h2.sec_ttl {
	background: #ffbe07;
	background: linear-gradient(0deg, #ffbe07 0%, #fff707 100%);
	padding: 0.3em;
	margin: 50px auto;
	text-shadow: 3px 2px white;
	line-height: 1.2;
	font-size: 4rem;
}

#intro h2.sec_ttl strong {
	font-weight: 900;
}

#intro h2.sec_ttl .bold {
	font-size: 150%;
}

#intro p > img {
	max-width: 60%;
}

#intro .img_area {
	width: 48%;
}

#intro .txt_area {
	width: 46%;
}

#intro .effect_list {
	max-width: 360px;
	margin-left: auto;
}

#intro .effect_list li {
	margin-top: 0.8em;
	font-size: 1.125rem;
}

#intro .effect_list a {
	display: block;
	background: #85b145;
	color: #fff;
	padding: 0.3em 2em 0.3em 1em;
	position: relative;
}

#intro .effect_list a:after {
	content: "\0bb";
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY( -50% );
}

@media (max-width: 1099px) {
	#intro h2.sec_ttl { font-size: 5vw;}
}

@media (max-width: 799px) {
	#intro h2.sec_ttl { font-size: 5.5vw; text-shadow: 0.03em 0.04em white; margin: 0.8em auto;}
	#intro .flex { display: block;}
	#intro .img_area { float: left; margin: 0 2em 1em 0;}
	#intro .txt_area { width: 100%;}
	#intro .effect_list { max-width: unset; width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}
	#intro .effect_list li { margin: 0.5em;}
}

@media (max-width: 699px) {
	#intro .flex { display: flex;}
	#intro .img_area { float: none; width: 100%; text-align: center; margin: auto auto 1em;}
}

@media (max-width: 599px) {
	#intro h2.sec_ttl { font-size: 7vw;}
	#intro .effect_list li { width: 18em; max-width: 90%;}
}
@media (max-width: 399px) {
	#intro .effect_list li { font-size: 1rem;}
}
/* .information */

.information{
	background: url(../images/gyu/bg_02.png) top center no-repeat;
	background-size: 100%;
}

.information .img_area{
	width: 35%;
}

.information .txt_area{
	width: 60%;
}

.information .inner{
	max-width: 850px;
	border: #7A8EAF 10px solid;
	padding: 30px;
	position: relative;
	background:rgba(255,255,255,0.7);
}

.information .inner:before {
	content: "";
	position: absolute;
	bottom: -127px;
	left: 50%;
	margin-left: -50px;
	border: 60px solid transparent;
	border-top: 80px solid #FFF;
	z-index: 2;
}

.information .inner:after {
	content: "";
	position: absolute;
	bottom: -145px;
	left: 50%;
	margin-left: -50px;
	border: 60px solid transparent;
	border-top: 80px solid #7A8EAF;
	z-index: 1;
}

.information .txt_area h3{
	font-size: 190%;
	line-height: 1.5;
}

.price_set{
	background: #f0f0f0;
	padding: 0.5em 0.75em;
	font-size: 110%;
}

.price_set p{
	margin-bottom: 0;
}

.txt_b{
	font-size: 150%;
	letter-spacing: -0.15em;
	font-weight: 700;
}

.information .btn_set {
	margin-top: 20px;
}

.information .btn01, .information .btn02 {
	width: calc( 50% - 10px );
}

.information .btn01 a, .information .btn02 a {
	display: block;
	text-align: center;
	color: #fff;
	font-size: 1.125rem;
	letter-spacing: 0.1em;
	padding: 0.5em;
	border-radius: 8px;
	border-bottom: 5px solid #b84c00;
}

.information .btn01 a { background: #ffa90c;}
.information .btn02 a { background: #ff6a00;}
@media (min-width: 999px) {
	.information .btn01 a:hover, .information .btn02 a:hover {
		margin-top: 3px;
		color: #fff;
		border-bottom: 3px solid #b84c00;
	}
}
@media (max-width: 699px) {
	.information{ background-size: 200%;}
	.information .inner{ padding: 15px;}
	.information .txt_area h3{ font-size: 150%;}
}

@media (max-width: 599px) {
	.information .img_area{ width: 80%; max-width: 240px; margin: 0 auto 20px;}
	.information .txt_area{width: 100%;}
	.information .txt_area h3{font-size: 170%;}
	.information .inner{ border: #7A8EAF 6px solid;}
	.information .inner:before { bottom: -70px; left: 50%; margin-left: -30px; border: 30px solid transparent; border-top: 40px solid #FFF;}
	.information .inner:after { bottom: -90px; left: 50%; margin-left: -40px; border: 40px solid transparent; border-top: 50px solid #7A8EAF;}
	.price_set{ font-size: 100%;}
}
@media (max-width: 399px) {
	.information .txt_area h3 { font-size: 130%;}
	.information .btn01 a, .information .btn02 a { font-size: 1rem;padding:0.2em 0;}
}


/* #features */

#features .inner > div:not(:last-of-type) { padding-bottom:50px;}
#features .secttl_set { position: relative;}
#features .secttl_set .img_area { width: 50%;}

.subPage #features .secttl_set h2{
	position: absolute;
	top: 10%;
	right: 0;
	font-size: 220%;
	background: rgba(255,255,255,0.8);
	padding: 1em;
}

#features .set01 .wide { width: calc( 70% - 2em );}
#features .set01 .narrow { width: 30%;}
#features .set02 ul{ position: relative;}
#features .set02 li{ width: calc( 33% - 1em );}

@media (max-width: 799px) {
	#features .set02 li { width: calc( 50% - 1em ); margin-bottom: 1em;}
}

@media (max-width: 699px) {
	.subPage #features .secttl_set h2{ font-size: 160%; padding: .5em;}
	#features .set02 h4{font-size: 180%;}
	#features .set02 h4 .txt_b{font-size: 140%;}
	#features .set01 .wide { width: 100%;}
	#features .set01 .narrow { width: 100%; margin-top: 1em;}
	#features .set01 .narrow img { display: block; margin: auto;}
}

@media (max-width: 599px) {
	#features .set02 li { width: 100%;}
	#features .secttl_set .img_area { width: 100%; text-align: center;}
	.subPage #features .secttl_set h2 { max-width: 15.3em; top: unset; bottom: 20%;}
	.subPage #features .secttl_set h2 br { display: none;}
}

@media (max-width: 399px) {
	.subPage #features .secttl_set h2 { font-size: 130%;}
}

/* #recommend */

#recommend{
	background-image: url(../images/cassis-35/bg_01.png) ;
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 0;
}

#recommend .check_list{
	max-width: 800px;
	border: #7A8EAF 10px solid;
	padding: 30px;
	background:rgba(255,255,255,0.7);
	border-radius: 15px;
	font-size: 130%;
	font-weight: bold;
	margin: 0 auto;
}

#recommend .check_list li{
	line-height: 1.5;
	position: relative;
	padding-left: 30px;
}

#recommend .check_list li:not(:last-of-type){
	margin-bottom:0.75em;
}

#recommend .check_list li:before{
	content:"";
	background: url(../images/cassis-35/bg_03.png) no-repeat;
	position: absolute;
	left: 0;
	top: .15em;
	width: 5vw;
	height: 5vw;
	max-width: 25px;
	max-height: 25px;
	background-size: 100%;
}

@media (max-width: 599px) {
	#recommend .check_list{ padding: 15px; font-size: 110%;}
}


/* #asthenopia */

#asthenopia .inner > div {padding-bottom:50px;}

#asthenopia .set02 .img_area{
	width: 50%;
	max-width: 330px;
	padding: 10px;
}
#asthenopia .set02 ul{
	font-size: 130%;
	font-weight: 700;
	padding: 10px;
}
#asthenopia .set02 ul li{
	margin-bottom: 0.5em;
}
#asthenopia .set02 .img_set{
	background: #fff;
	padding: 15px;
}
#asthenopia .set02 .img_set .img_area{
	width: 100%;
	max-width: inherit;
}
#asthenopia .set02 .img_set li{
	padding: 10px;
}
#asthenopia .set02 .img_set li:first-of-type{
	width: 57.25%;
	border-right: 1px #ccc dotted;
}
#asthenopia .set02 .img_set li:last-of-type{
	width: 42.75%;
}
.page_cassis-35 #asthenopia .set02 .img_set h5{
	background: #034086;
	color: #fff;
	text-align: center;
	font-size: 140%;
	padding: 0.25em;
	margin-top: 1em;
}
#asthenopia .set02 .img_set .img_area p{
	margin-bottom: 0;
	text-align: center;
	background: #f0f0f0;
}

#asthenopia .set01 .img_area li{
	margin-bottom: 30px;
}
#asthenopia .set01 .img_area li:first-of-type{
	width: 45%;
	order: 2;
}
#asthenopia .set01 .img_area li:nth-of-type(2){
	width: 50%;
	order: 1;
}
#asthenopia .set01 .img_area li:nth-of-type(3){
	width: 50%;
	order: 3;
	background: #fff;
    padding: 10px;
}
#asthenopia .set01 .img_area li:last-of-type{
	width: 50%;
	order: 4;
	background: #fff;
	padding: 10px;
}

#asthenopia .set01 > div:not(:last-of-type) {
	margin-bottom: 2em;
}

#asthenopia .txt_area {
	width: 46%;
}

#asthenopia .img_area {
	width: 48%;
}

#asthenopia .kakomi{
	border: 3px #ccc double;
	padding: 1.5em 2em;
}

#asthenopia .kakomi .img_area {
	width: 50%;
}

#asthenopia .kakomi p {
	margin: 0;
}

@media (max-width: 799px) {
	#asthenopia h2 + p.center { text-align: left;}
	#asthenopia .set01 > div:first-of-type { display: block;}
	#asthenopia .set01 > div:first-of-type .img_area { width: 48%; float: left; margin: 0 2em 1em 0;}
	#asthenopia .set01 > div:first-of-type .txt_area { width: 100%;}
	#asthenopia .img_area { width: 100%; text-align: center;}
	#asthenopia .kakomi .txt_area { width: 100%; margin-bottom: 1em;}
	#asthenopia .kakomi .img_area { width: 100%;}
}

@media (max-width: 699px){
	#asthenopia .inner > div { padding-bottom:2em;}
	.page_cassis-35 #asthenopia .set02 .img_set h5{margin-bottom: 0;}
	#asthenopia .set02 ul li{margin-bottom: 0;padding: 0;}
	#asthenopia .set02 .img_set li:first-of-type, #asthenopia .set02 .img_set li:last-of-type{width:100%;}
	#asthenopia .set02 .img_set li:last-of-type{text-align: center;}
	#asthenopia .set02 .img_set li:last-of-type img{width:70%;}
	#asthenopia .set02 .img_set li:first-of-type{border-right: none;}
	#asthenopia .set01 > div:first-of-type .img_area { width: 100%; float: none; margin: auto auto 1em;}
}

@media (max-width: 599px){
	#asthenopia .set02 .img_set{ padding: 0;}
}
@media (max-width: 399px){
	#asthenopia .kakomi { padding: 1em;}
}

/* #effectForEye */

#effectForEye li:not(:last-of-type) {
	margin-bottom: 3em;
}

#effectForEye li .bgc_white p {
	margin: 0;
}


/* #glaucoma */

#glaucoma h3{
	font-size: 150%;
}
#glaucoma .img_area li{
	width: 47%;
	margin-bottom:30px;
}

@media (max-width: 799px) {
	#glaucoma h3 + p.center { text-align: left;}
	#glaucoma .img_area li { width: 100%; max-width: 500px; margin: auto auto 1em;}
}

@media (max-width: 499px) {
	#glaucoma h3 { font-size: 130%;}
}


#reason_ttl {
	padding: 50px;
}
#reason_ttl h2{
	padding-bottom: 0;
	color:#fff;
    font-size: 350%;
}
#reason_ttl .co01{
	color:#FFBF11;
}

@media (max-width: 999px) {
	#reason_ttl h2{font-size: 7vw;}
}
@media (max-width: 699px) {
	#reason_ttl{padding: 2em 1em;}
}

/* #other_benefit */

#other_benefit{
	padding: 50px;
}

#other_benefit.bgc_01, #reason_ttl {
	background: #034086;
}

#other_benefit p {
	font-weight: 900;
	font-size: 3rem;
	line-height: 1.6;
	margin: 0;
	letter-spacing: -0.05em;
	color:#fff;
}

.wf-active #other_benefit p { font-family: 'Zen Kaku Gothic Antique', sans-serif;}

#other_benefit p strong {
	font-weight: inherit;
	font-size: 130%;
	color:#FFBF11;
}

@media (max-width: 999px) {
	#other_benefit p { font-size: 6vw;}
	#other_benefit p strong { font-size: 100%;}
}

@media (max-width: 699px) {
	#other_benefit { padding: 2em 1em;}
}


/* #kuma */

#kuma h3 {
	margin-top: 2em;
}


#kuma .img_area li:first-of-type p{
	background:rgba(183,4,47,0.5);
	color: #fff;
	padding: 0.25em 0.5em;
	border-radius: 10px;
	font-size: 120%;
	text-align: center;
}
#kuma h5{
	font-size: 130%;
}

@media (max-width: 799px) {
	#kuma h2 + p.center { text-align: left;}
}


/* #antiAging */

#antiAging .flex {
	position: relative;
	margin-bottom: 2em;
}

#antiAging .txt_area {
	width: 60%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: rgba( 255,255,255,.6);
	padding: 2em;
}

#antiAging .txt_area p {
	font-size: 1.125rem;
}

#antiAging .img_area {
	margin-left: auto;
}

@media (max-width: 799px) {
	#antiAging .img_area { width: 100%; text-align: center; margin: auto auto 1em;}
	#antiAging .txt_area { position: static; width: 100%; transform: none; background: none; padding: 0;}
	#antiAging .txt_area p { font-size: 1rem;}
}

/* #antiVirus */

#antiVirus .flex {
	margin-bottom: 2em;
}


#antiVirus .txt_area {
	width: 46%;
}

#antiVirus .txt_area li {
	padding-left: 1.3em;
	text-indent: -1.3em;
	font-size: 1.125rem;
}

#antiVirus .txt_area li:not(:last-of-type) {
	margin-bottom: 1em;
}

#antiVirus .txt_area li:before {
	content: "\f058";
	font-family: FAsolid;
	font-weight: bold;
	color: #94d535;
	margin-right: 0.3em;
}

#antiVirus .img_area {
	width: 48%;
}

@media (max-width: 799px) {
	#antiVirus .img_area { width: 100%; text-align: center; margin: auto auto 1em;}
	#antiVirus .txt_area { width: 100%; border: double 3px #ccc; padding: 1.5em;}
	#antiVirus .txt_area li { font-size: 1rem;}
}

@media (max-width: 699px) {
	#antiVirus .flex + p.center {text-align: left;}
}

@media (max-width: 399px) {
	#antiVirus .txt_area { padding: 1em;}
}

/* #forSport */

#forSport .flex {
	position: relative;
}

#forSport .img_area {
	margin-left: auto;
}

#forSport .txt_area {
	width: 60%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: rgba( 255,255,255,.6);
	padding: 2em;
}

#forSport .txt_area p {
	font-size: 1.125rem;
}

@media (max-width: 799px) {
	#forSport .img_area { width: 100%; text-align: center; margin: auto auto 1em;}
	#forSport .txt_area { position: static; width: 100%; transform: none; background: none; padding: 0;}
	#forSport .txt_area p { font-size: 1rem;}
}


/* #bnr_area */

#bnr_area{
	padding: 0;
}
#bnr_area .bnr_set{
	height: 25vw;
}
#bnr_area .bnr_set li{
	width: 50%;
	position: relative;
	position: relative;
	z-index: 0;
}
#bnr_area .bnr_set li::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: inherit;
	filter: brightness(80%);
	z-index: -1;
	transition:0.5s;
}
#bnr_area .bnr_set li:hover::before{
	filter: brightness(50%);
	transition:0.5s;
}
#bnr_area .bnr_set li#voice{
	background: url(../images/ibl/bg_bnr01.jpg) center top no-repeat;
	background-size: 100%;
}
#bnr_area .bnr_set li#buy{
	background: url(../images/ibl/bg_bnr02.jpg) center top no-repeat;
	background-size: 100%;
}
#bnr_area .bnr_set li a{
	color:#fff;
}
#bnr_area .bnr_set li p{
	font-size: 200%;
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit- transform: translateY(-50%);
	left: 0;
	right: 0;
}
#bnr_area .bnr_set li p span{
	border-bottom: 2px #fff solid;
	padding-bottom: 0.5em;
}

#side_btn{
	position: fixed;
    right: 0;
    top: 20%;
}


@media (max-width: 699px) {
	#bnr_area .bnr_set li p{font-size: 160%;}
	#side_btn{top: inherit;bottom: 0;left: 0;width: 100%;margin: 0 auto;background: linear-gradient(to top, #070f5b 0%, #6690d9 100%);text-align: center;}
	#side_btn img{width:40%;margin:auto;}
	#side_btn a{padding: 3%;display: block;}
}

@media (max-width: 599px) {
	#bnr_area .bnr_set{height: 70vw;}
	#bnr_area .bnr_set li{width: 100%;}
	#bnr_area .bnr_set li p{font-size: 120%;}
}