@charset "UTF-8"; /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ @media only screen and (min-width:750px) {
	.pc {
		display: block !important
	}
	.sp {
		display: none !important
	}
	html {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		font-family: sans-serif
	}
	body {
		margin: 0
	}
	a {
		background-color: transparent
	}
	b, em, strong {
		font-weight: bolder
	}
	small {
		font-size: 80%
	}
	sub, sup {
		position: relative;
		vertical-align: baseline;
		font-size: 75%;
		line-height: 0
	}
	sup {
		top: -.5em
	}
	sub {
		bottom: -.25em
	}
	img {
		border: 0;
		vertical-align: bottom
	}
	html {
		margin: 0
	}
	body, html {
		background: #fff
	}
	body {
		padding: 0;
		color: #333;
		font-size: 1pc;
		font-family: 游ゴシック Medium, Yu Gothic Medium, Yu Gothic, YuGothic, Meiryo, Hiragino Kaku Gothic ProN, sans-serif;
		line-height: 1.5
	}
	* {
		box-sizing: border-box
	}
	a:active, a:focus, a:hover {
		text-decoration: none
	}
	em {
		font-style: normal
	}
	dd, dl, dt, h1, h2, h3, h4, h5, h6, li, ol, p, ul {
		margin: 0;
		padding: 0
	}
	.beauty-opener a:active img, .beauty-opener a:focus img, .beauty-opener a:hover img {
		opacity: .8
	}
	.logo {
		margin: 0 auto;
		padding: 5px;
		width: 750pt
	}
	.logo img {
		width: 90pt
	}
	.main {
		margin: 0 auto;
		min-width: 750pt;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/171114/main_bg.jpg)50% 0 no-repeat #23120a
	}
	.main_inner {
		position: relative;
		margin: 0 auto;
		padding: 0;
		width: 750pt;
		height: 550px
	}
	.main_hdg {
		padding: 410px 0 0
	}
	.main_text {
		position: absolute;
		top: 20px;
		left: 0
	}
	.main_notice {
		position: absolute;
		bottom: 5px;
		right: 0
	}
	.cvn {
		margin: 30px auto 25px;
		width: 750pt;
		text-align: center;
		position: relative;
	}
	.cvn_bnr {
		margin: 0
	}
	.intro {
		margin: 0 auto;
		width: 750pt
	}
	.summary {
		margin: 30px auto 0;
		padding: 153px 25px 50px;
		width: 940px;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/common/summary_bg.jpg)50% 0 repeat-y;
		position: relative
	}
	.summary_hdg {
		margin: 0;
		padding: 70px 0 20px;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/common/summary_silhouette.png)100% 100% no-repeat;
		position: absolute;
		top: -30px;
		width: 890px
	}
	.summary_list {
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 0 6px rgba(0, 0, 0, .13);
		color: #412112;
		padding: 1pc 30px 24px;
		font-size: 26px;
		line-height: 1.2
	}
	.summary_list > li {
		border-bottom: 2px dashed #695145;
		list-style: none;
		padding: 20px 8px 20px 56px;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/common/summary_check.png)6px 50% no-repeat
	}
	.summary_list > li:after {
		content: "";
		display: block;
		clear: both
	}
	.summary_list em {
		font-weight: 400;
		font-size: 30px;
		background: -webkit-linear-gradient(#fff 60%, #ffedaa 60%);
		background: linear-gradient(#fff 60%, #ffedaa 60%)
	}
	.summary_list a {
		display: block;
		margin: 0;
		float: right
	}
	.sub {
		margin: 0 auto;
		min-width: 750pt;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/171114/sub_bg.jpg)50% 0 no-repeat #23120a
	}
	.sub_inner {
		position: relative;
		margin: 0 auto;
		padding: 0;
		width: 750pt;
		height: 523px
	}
	.sub_text {
		padding: 30px 0 0
	}
	.sub_percentage {
		position: absolute;
		top: 3px;
		right: 23px
	}
	.sub_notice {
		position: absolute;
		bottom: 55px;
		right: 2px
	}
	.faq {
		margin: 0 auto;
		width: 750pt;
		padding: 34px 0 24px 68px;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/common/faq_bg.jpg)50% 0 no-repeat
	}
	.faq_list dt {
		margin: 0 0 26px
	}
	.faq_list dd {
		margin: 0 0 42px 6px
	}
	.power {
		margin: 0 auto;
		width: 750pt
	}
	.power_inner {
		margin: 0 auto;
		width: 940px;
		padding: 0 0 20px;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/common/power_bg.jpg)50% 0 no-repeat #eadeb0;
		text-align: left
	}
	.power_list {
		padding: 20px 40px 0 25px
	}
	.power_list:after {
		content: "";
		display: block;
		clear: both
	}
	.power_list > li {
		float: left;
		list-style: none
	}
	.power_list > li:nth-child(2n+1) {
		clear: both
	}
	.power_list-02 {
		margin: 0 0 0 202px
	}
	.power_list-03 {
		margin: 14px 0 0 24px
	}
	.power_list-04 {
		margin: -25px 0 0 380px
	}
	.power_list-05 {
		margin: 15px 0 0 84px
	}
	.power_list-06 {
		margin: -25px 0 0 302px
	}
	.power_text {
		margin: 52px auto 15px;
		text-align: center
	}
	.power_notice {
		margin: 0 24px 0 0;
		text-align: right
	}
	.tokyo-univ {
		margin: 0 auto;
		width: 750pt;
		padding: 30px
	}
	.tokyo-univ_inner {
		margin: 0 auto;
		width: 940px;
		padding: 20px 10px 10px;
		text-align: center;
		background-image: -webkit-linear-gradient(to right, #23120a, #4f3021, #23120a);
		background-image: linear-gradient(to right, #23120a, #4f3021, #23120a);
		background-color: #23120a
	}
	.tokyo-univ_hdg {
		margin: 0 0 18px
	}
	.solution {
		margin: 0 auto;
		width: 750pt;
		text-align: center;
		font-size: 2pc;
		line-height: 1.4
	}
	.solution em {
		font-size: 3pc
	}
	.solution_text {
		margin: 20px auto 0
	}
	.solution_text em {
		color: #a00
	}
	p.solution_lead {
		margin-top: 20px
	}
	.comment {
		margin: 25px auto;
		width: 750pt
	}
	.comment_inner {
		margin: 0 auto;
		padding: 30px 20px;
		width: 940px;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/common/comment_bg.jpg)50% 50px repeat-y #f3e7c9
	}
	.comment_list:after {
		content: "";
		display: block;
		clear: both
	}
	.comment_list > li {
		width: 280px;
		float: left;
		margin: 0 10px;
		background-color: #fff;
		padding: 15px;
		box-shadow: 0 0 6px rgba(0, 0, 0, .13);
		list-style: none
	}
	.comment_list > li > img {
		margin: 0 0 10px
	}
	.comment_list > li > b {
		display: block;
		text-align: center;
		font-size: 18px;
		margin: 0 0 5px;
		font-weight: 700
	}
	.comment_list > li > b .comment_name {
		font-size: 20px
	}
	.kome {
		text-align: right;
		margin-top: 10px;
		font-size: 9pt
	}
	.voice {
		margin: 25px auto;
		width: 750pt
	}
	.voice_list > li {
		list-style: none
	}
	.secret {
		margin: 30px auto;
		width: 750pt
	}
	.secret_inner {
		margin: 0 auto;
		width: 940px;
		padding: 0;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/common/secret_bg.png)50% 0 repeat-y #f8f3e5
	}
	.secret_hdg {
		margin: 0 0 40px
	}
	.research, .secret_box {
		margin: 30px auto;
		background-color: hsla(0, 0%, 100%, .9);
		width: 840px;
		padding: 30px;
		box-shadow: 0 0 30px rgba(255, 250, 235, .64) inset;
		font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ\ Ｐ明朝, ＭＳ\ 明朝, serif;
		position: relative;
		text-align: left
	}
	.research:after, .secret_box:after {
		content: "";
		display: block;
		width: 840px;
		height: 19px;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/common/secret_box-bg.png)50% 0 no-repeat;
		position: absolute;
		bottom: -19px;
		left: 50%;
		margin-left: -420px
	}
	.secret_hdg-sub {
		border-bottom: 1px solid #623f29;
		position: relative;
		padding: 0 0 15px 5pc;
		margin: 0 0 20px
	}
	.secret_hdg-icon {
		position: absolute;
		top: -45px;
		left: -65px
	}
	.secret_indent {
		margin: 0 0 0 5pc
	}
	.secret_text {
		margin: 30px 0 0
	}
	.research_image-right, .secret_image-right {
		margin: 0 0 10px
	}
	.research_image-right:after, .secret_image-right:after {
		content: "";
		display: block;
		clear: both
	}
	.research_image-right .research_image, .secret_image-right .secret_image {
		float: right;
		margin-left: 10px
	}
	.research_image-right .research_image {
		text-align: center;
		margin: -3pc 25px 0 20px;
		font-size: 11px;
		position: relative;
		z-index: 2
	}
	.research_image-right .research_image img {
		box-shadow: 0 1px 5px rgba(0, 0, 0, .13);
		margin: 0 auto 5px
	}
	.research_image-right .research_col {
		padding: 20px 35px
	}
	.secret_image-full {
		margin: 10px auto 0
	}
	.secret_notice {
		font-size: 11px;
		text-align: right
	}
	.research {
		padding: 0 0 10px
	}
	.toggle_content {
		max-height: 750pt;
		overflow: hidden;
		-webkit-transition: all .4s linear;
		transition: all .4s linear
	}
	.close .toggle_content {
		max-height: 4.8em
	}
	.static .toggle_content {
		max-height: none
	}
	.static .toggle_content > p > {
		font-size: 1pc;
		line-height: 1.5
	}
	.static .toggle_btn {
		display: none
	}
	.toggle_hook {
		margin: 5px 0 0;
		text-align: right;
		font-size: 14px
	}
	.toggle_btn {
		text-decoration: underline;
		display: inline-block;
		cursor: pointer;
		padding: 0 0 0 1pc;
		position: relative
	}
	.toggle_btn:before {
		content: "";
		display: inline-block;
		width: 0;
		border: 6px solid transparent;
		border-bottom: 8px solid #412112;
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -11px
	}
	.close .toggle_btn:before {
		border: 6px solid transparent;
		border-top: 8px solid #412112;
		margin-top: -4px
	}
	.howto {
		width: 750pt;
		margin: 40px auto
	}
	.howto_inner {
		margin: 0 auto;
		padding: 30px 0;
		width: 940px;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/common/howto_bg.png)0 0 repeat #f8ecd0
	}
	.point {
		margin: 0 auto;
		background-color: #fff;
		width: 890px;
		border-radius: 5px;
		position: relative;
		text-align: center;
		padding: 0 0 40px;
		box-shadow: 0 0 6px rgba(0, 0, 0, .13)
	}
	.point:before {
		content: "";
		width: 100%;
		height: 9px;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		background-image: -webkit-linear-gradient(to right, #a2830a, #c8ab36, #a2830a);
		background-image: linear-gradient(to right, #a2830a, #c8ab36, #a2830a);
		background-color: #c8ab36;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px
	}
	.point_hdg {
		position: relative;
		z-index: 1;
		top: -40px
	}
	.point_text {
		margin: -40px 0 0
	}
	.recommend {
		margin: 30px auto 0;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/common/recommend_bg.jpg)100% 100% no-repeat #fff;
		border-radius: 5px;
		width: 890px;
		box-shadow: 0 0 6px rgba(0, 0, 0, .13)
	}
	.recommend_hdg {
		margin: 0 auto 30px
	}
	.recommend_list {
		margin: 0 25px
	}
	.recommend_list:after {
		content: "";
		display: block;
		clear: both
	}
	.recommend_list > li {
		float: left;
		list-style: none
	}
	.fragrance {
		width: 750pt;
		margin: 30px auto;
		text-align: center
	}
	.fragrance_inner {
		width: 940px;
		background-color: #efe8ad;
		margin: 0 auto;
		padding: 20px
	}
	.quality {
		margin: 30px auto
	}
	.quality, .regular {
		width: 750pt;
		text-align: center
	}
	.regular {
		margin: 40px auto
	}
	.regular_hdg {
		margin: 0 auto 25px
	}
	.regular_list > li {
		list-style: none
	}
	.notice {
		width: 750pt;
		margin: 20px auto
	}
	.notice_inner {
		width: 900px;
		margin: 0 auto;
		padding: 93pt 0 30px;
		background: url(/excludes/ozio/lp/bo/o_bo_tk_001/img/common/notice_icon.png)50% 24px no-repeat #fff9eb;
		border: 4px solid #803e1c;
		border-radius: 6px;
		text-align: center
	}
	.notice_hdg {
		font-size: 34px;
		margin: 0 auto 10px
	}
	.notice_text {
		font-size: 24px;
		line-height: 1.8
	}
	.notice_text strong {
		font-weight: 400;
		background-color: #fff100;
		color: #fc0000;
		display: inline-block;
		padding: 0 10px
	}
	#form_checkout_message {
		margin: 10px 0
	}
	.tv_happy {
		padding-bottom: 50px;
		margin-bottom: 50px
	}
	.tv_happy, .tv_txt {
		background-color: #fef9e3;
		text-align: center
	}
	.tv_txt {
		font-size: 24px;
		padding-bottom: 20px;
		line-height: 1.4
	}
	.Bnr {
		display: none
	}
	.Bnr .banner {
		position: fixed;
		bottom: 50px;
		right: 0;
		z-index: 4
	}
	.banner_inner {
		padding: 10px
	}
	.Bnr .banner_inner a {
		display: block
	}
	.ime_disabled {
		font-family: none;
	}
}
@media only screen and (max-width:750px) {
	.pc {
		display: none !important
	}
	.sp {
		display: block !important
	}
	html {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		font-family: sans-serif
	}
	body {
		margin: 0
	}
	a {
		background-color: transparent
	}
	b, em, strong {
		font-weight: bolder
	}
	small {
		font-size: 80%
	}
	sub, sup {
		position: relative;
		vertical-align: baseline;
		font-size: 75%;
		line-height: 0
	}
	sup {
		top: -.5em
	}
	sub {
		bottom: -.25em
	}
	img {
		border: 0;
		vertical-align: bottom
	}
	html {
		margin: 0
	}
	body, html {
		background: #fff
	}
	body {
		padding: 0;
		color: #333;
		font-size: 1pc;
		font-family: Hiragino Kaku Gothic ProN, sans-serif;
		line-height: 1.5
	}
	* {
		box-sizing: border-box
	}
	a:active, a:focus, a:hover {
		text-decoration: none
	}
	em {
		font-style: normal
	}
	dd, dl, dt, h1, h2, h3, h4, h5, h6, li, ol, p, ul {
		margin: 0;
		padding: 0
	}
	img {
		max-width: 100%
	}
	.logo {
		margin: 5px auto;
		text-align: left;
		max-width: 40pc;
		font-size: 10px;
		padding: 0 10px
	}
	.logo img {
		width: 75px
	}
	.main {
		margin: 0 auto
	}
	.cvn, .main {
		text-align: center;
		max-width: 40pc
	}
	.cvn {
		margin: 25px auto
	}
	.cvn_notice {
		margin: 5px 10px 0;
		text-align: left
	}
	.cvn_notice li {
		list-style: none;
		font-size: 10px;
		line-height: 1.4;
		font-family: Hiragino Mincho ProN, serif;
		position: relative;
		padding: 0 0 0 1pc;
		margin: 2px 0 0
	}
	.cvn_notice li span {
		position: absolute;
		top: 0;
		left: 0
	}
	.intro {
		margin: 0 auto;
		text-align: center;
		max-width: 40pc
	}
	.comment {
		margin: 0 10px;
		max-width: 620px
	}
	.comment_inner {
		margin: 0 auto;
		padding: 10px;
		background: url(/excludes/ozio/lp/bo/sp_o_bo_tk_001/img/common/comment_bg.jpg)50% 50px repeat-y #f3e7c9;
		background-size: 100% auto
	}
	.comment_list {
		padding: 0 0 10px;
		background-color: #fff;
		box-shadow: 0 0 6px rgba(0, 0, 0, .13)
	}
	.comment_list > li {
		padding: 10px 10px 0;
		list-style: none;
		font-size: 9pt;
		text-align: left
	}
	.comment_list > li:after {
		clear: both;
		content: "";
		display: block
	}
	.comment_list > li > img {
		margin: 0 10px 10px 0;
		width: 95px;
		float: left
	}
	.comment_list > li > b {
		display: block;
		font-weight: 700;
		line-height: 1.5
	}
	.comment_list > li > b .comment_name {
		font-size: 14px
	}
	.comment_inner .kome {
		font-size: 9pt;
		margin-top: 10px;
		text-align: left
	}
	.sub {
		margin: 0 auto;
		text-align: center
	}
	.sub, .voice {
		max-width: 40pc
	}
	.voice {
		margin: 25px auto
	}
	.voice_list > li {
		list-style: none
	}
	.secret {
		margin: 30px auto;
		padding: 0 10px;
		max-width: 600px
	}
	.secret_inner {
		margin: 0 auto;
		padding: 10px;
		background-color: #f8f3e5;
		background-image: -webkit-linear-gradient(to right, #eed89f, #f8f3e5, #eed89f);
		background-image: linear-gradient(to right, #eed89f, #f8f3e5, #eed89f)
	}
	.secret_inner .secret_box:first-child {
		margin-top: 0
	}
	.secret_inner .secret_box:last-child {
		margin-bottom: 5px
	}
	.secret_box {
		margin: 10px auto 15px;
		background-color: hsla(0, 0%, 100%, .9);
		padding: 9pt;
		box-shadow: 0 0 30px rgba(255, 250, 235, .64) inset;
		font-family: Hiragino Mincho ProN, serif;
		position: relative;
		font-size: 9pt
	}
	.secret_box:after {
		content: "";
		display: block;
		width: 100%;
		height: 10px;
		background: url(/excludes/ozio/lp/bo/sp_o_bo_tk_001/img/common/secret_box-bg.png)50% 0 no-repeat;
		background-size: 100% 20px;
		position: absolute;
		bottom: -10px;
		left: 0
	}
	.secret_hdg-sub {
		border-bottom: 1px solid #623f29;
		position: relative;
		padding: 0 0 8px 65px;
		margin: 0 0 10px
	}
	.secret_hdg-icon {
		position: absolute;
		top: -18px;
		left: -1pc;
		width: 66px
	}
	.secret_image-full {
		margin: 10px auto;
		text-align: center
	}
	.secret_notice {
		font-size: 10px
	}
	.tokyo-univ {
		margin: 25px auto;
		padding: 0 10px;
		text-align: center;
		max-width: 40pc
	}
	.toggle_content {
		max-height: 750pt;
		-webkit-transition: all .04s linear;
		transition: all .04s linear;
		line-height: 1.5
	}
	.close .toggle_content {
		max-height: 7.75em;
		overflow: hidden;
		line-height: 1.5
	}
	.secret_box .close .toggle_content {
		max-height: 3.2em
	}
	.static .toggle_content {
		max-height: none
	}
	.static .toggle_btn {
		display: none
	}
	.toggle_hook {
		margin: 5px 0 0;
		text-align: center;
		font-size: 14px;
		clear: both
	}
	.toggle_btn {
		text-decoration: underline;
		display: block;
		cursor: pointer;
		padding: 10px 0;
		position: relative;
		font-size: 14px;
		background-color: #f6d285;
		background-image: -webkit-linear-gradient(#f7e2b6, #f6d285);
		background-image: linear-gradient(#f7e2b6, #f6d285);
		text-decoration: none;
		font-weight: 700;
		color: #431a06
	}
	.toggle_btn:active, .toggle_btn:hover {
		color: inherit
	}
	.toggle_btn:before {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		border-bottom: 2px solid #412112;
		border-right: 2px solid #412112;
		position: relative;
		top: 0;
		margin: 0 10px 0 0;
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg)
	}
	.close .toggle_btn:before {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: -2px
	}
	.fragrance {
		margin: 30px auto;
		padding: 0 10px;
		text-align: center;
		max-width: 600px
	}
	.fragrance_inner {
		background-color: #efe8ad;
		margin: 0 auto;
		padding: 10px
	}
	.regular {
		margin: 30px auto 10px;
		padding: 0 10px;
		text-align: center;
		max-width: 40pc
	}
	.regular_hdg {
		margin: 0 auto 5px
	}
	.regular_list > li {
		list-style: none
	}
	.notice {
		margin: 10px auto;
		padding: 0 10px;
		max-width: 620px
	}
	.notice_inner {
		margin: 0 auto;
		padding: 68px 10px 10px;
		background: url(/excludes/ozio/lp/bo/sp_o_bo_tk_001/img/common/notice_icon.png)50% 10px no-repeat #fff9eb;
		background-size: 58px auto;
		border: 2px solid #803e1c;
		border-radius: 4px;
		text-align: center
	}
	.notice_hdg {
		font-size: 1pc;
		margin: 0 auto 5px
	}
	.notice_text {
		font-size: 11px;
		line-height: 1.8
	}
	.notice_text strong {
		font-weight: 400;
		background-color: #fff100;
		color: #fc0000;
		display: inline-block;
		padding: 0 4px
	}
	#form_checkout_message {
		margin: 10px 0
	}
	.footer .footer_nav {
		display: block;
		margin-top: 30px
	}
	#footer_o {
		border-top: solid 1px #cacaca;
		margin: 30px 0 0;
		padding: 10px 0 0
	}
	#footer_o .footer_link_o {
		text-align: left;
		margin: 0 10px;
		padding: 0;
		list-style: none;
		width: 300px
	}
	#footer_o .footer_link_o li {
		font-size: 14px;
		line-height: 20px
	}
	#footer_o .footer_company_info_o, #footer_o .footer_copyrigh_o {
		padding-top: 10px;
		text-align: left
	}
	#footer_o .footer_copyrigh_o {
		font-size: 9pt
	}
	.Bnr {
		position: relative;
		margin: 0 auto;
		width: 100%;
		display: none;
		z-index: 3
	}
	.Bnr .Bnr__img {
		position: fixed;
		bottom: 0
	}
	.Bnr .Bnr__img__inner a {
		display: block
	}
	.movie {
		width: 95%;
		margin: 0 auto
	}
	.movie-wrap {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden
	}
	.movie-wrap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%
	}
	.tv {
		background-color: #fef9e3;
		padding: 1px 10px 20px
	}
}
@media screen and (min-width:481px) {
	.comment_list > li .toggle_content {
		font-size: 1pc;
		line-height: 1.6
	}
}
.is-fixed {
	display: none !important
}


/* -------------------------------------------------------------------- 
.con_cart
-------------------------------------------------------------------- */
@media screen and (min-width:768px) {
.cvn_btn {
	position: absolute;
	top: 405px;
	left: 345px;
	overflow: hidden;
}
}
@media screen and (max-width:768px) {
.cvn_bnr {
	position: relative;
	overflow: hidden;
	background: #fff;
}
}
.reflection {
height      :100%;
width       :30px;
position    :absolute;
top         :-180px;
left        :0;
background-color: #fff;
opacity     :0;
transform: rotate(45deg);
animation: reflection 2.3s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2.3s ease-in-out infinite;
-moz-transform: rotate(45deg);
-moz-animation: reflection 2.3s ease-in-out infinite;
-ms-transform: rotate(45deg);
-ms-animation: reflection 2.3s ease-in-out infinite;
-o-transform: rotate(45deg);
-o-animation: reflection 2.3s ease-in-out infinite;
}
@keyframes reflection {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { transform: scale(4) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
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; }
}
@-moz-keyframes reflection {
0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}
/* -------------------------------------------------------------------- 
.howto
-------------------------------------------------------------------- */
.box_howto {margin: 6%;}
.youtube3 {position: relative;padding: 28%;}
.youtube3 iframe {position: absolute;top: 0;	right: 0;width: 100% !important;	height: 100% !important;}
@media screen and (min-width:768px) {
.box_howto {margin: 30px auto;width: 800px;}}
/* -------------------------------------------------------------------- 
.cv_toggle
-------------------------------------------------------------------- */
@media only screen and (max-width:750px) { 
.accordion {
 margin: 0 auto 2em;
 max-width: 95%;
}
.cv_toggle {
 display: none;
}
.option {
 position: relative;
 margin-bottom: 1em;
 border: solid 1px #ccc;
}
.title, .content {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 transform: translateZ(0);
 transition: all 0.3s;
}
.title {
 padding: 1em;
 display: block;
 color: #333;
 font-weight: bold;
 font-size: 16px;
 text-align: center;
 cursor:pointer
}
.title::after, .title::before {
 content: "";
 position: absolute;
 right: 1.25em;
 top: 1.25em;
 width: 2px;
 height: 0.75em;
 background-color: #999;
 transition: all 0.3s;
}
.title::after {
 transform: rotate(90deg);
}
.content {
 max-height: 0;
 overflow: hidden;
}
.content .text_a {
 margin: 0;
 padding: 0em 1em 0em 1em;
 font-size: 12px;
	line-height: 1.3;
	text-align: left;
}
.text_a a {
	text-decoration: underline;
}
.content .text_b {
 margin: 0;
 padding: 0em 1em 0em 2em;
 font-size: 12px;
	line-height: 1.3;
	text-align: left;
 text-indent: -1em;
}
.cv_toggle:checked + .title + .content {
 max-height: 500px;
 transition: all 1.5s;
 padding: 0 0em 1em;
}
.cv_toggle:checked + .title::before {
 transform: rotate(90deg) !important;
}
}
@media only screen and (min-width:750px) { 
.accordion {
 margin: 0 auto 3em;
 max-width: 950px;
}
.cv_toggle {
 display: none;
}
.option {
 position: relative;
 margin-bottom: 1em;
 border: solid 1px #ccc;
}
.title, .content {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 transform: translateZ(0);
 transition: all 0.3s;
}
.title {
 padding: 1em;
 display: block;
 color: #333;
 font-weight: bold;
 font-size: 24px;
 text-align: center;
 cursor:pointer
}
.title::after, .title::before {
 content: "";
 position: absolute;
 right: 1.25em;
 top: 1.25em;
 width: 2px;
 height: 0.75em;
 background-color: #999;
 transition: all 0.3s;
}
.title::after {
 transform: rotate(90deg);
}
.content {
 max-height: 0;
 overflow: hidden;
}
.content .text_a {
 margin: 0;
 padding: 0em 1em 0em 1em;
 font-size: 18px;
	line-height: 1.6;
	text-align: left;
}
.content .text_b {
 margin: 0;
 padding: 0em 1em 0em 2em;
 font-size: 18px;
 text-indent: -1em;
	line-height: 1.6;
	text-align: left;
}
.cv_toggle:checked + .title + .content {
 max-height: 500px;
 transition: all 1.5s;
 padding: 0 0em 1.5em;
}
.cv_toggle:checked + .title::before {
 transform: rotate(90deg) !important;
}
}