@charset "utf-8";
.block-contents-12 .prod-contents a:link,
.block-contents-12 .prod-contents a:visited {text-decoration: underline;}
.block-contents-12 .prod-contents a:hover,
.block-contents-12 .prod-contents a:active {text-decoration: underline;}

/* -----------------------------------------------------
How To
----------------------------------------------------- */
.howto_Cserum_section {margin-top: 50px;}
#HowTo {background-color: #f8e1d8; padding: 40px 0; text-align: center; margin: 0 0 60px;}
#HowTo .howto_title {font-size: 2.25em; color: #ef8f68; font-weight: bold; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 0; margin: 0; padding: 0; background: none;}
#HowTo .howto_movie {margin: 36px 0 24px;}
#HowTo .howto_movie_title {font-size: 1.125em; font-weight: normal; padding: 0 0 12px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 0; margin: 0; background: none;}

/* -----------------------------------------------------
Virtual Tester
----------------------------------------------------- */
.virtual_tester_section {margin-top: 50px;}
#VirtualTester {background-color: #ffeecc; padding: 40px 0; text-align: center; margin: 0 0 60px;}
#VirtualTester .vt_title {font-size: 2.25em; color: #cc9966; font-weight: bold; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 0; margin: 0; padding: 0; background: none;}
#VirtualTester .vt_movie {margin: 36px 0 24px;}

/* -----------------------------------------------------
Voice
----------------------------------------------------- */
#Voice {margin: 0 0 40px;}
#Voice .voice_title {font-size: 1.625em; line-height: 1.2; color: #fff; font-weight: bold; background: none; background-color: #ef8f68; padding: 12px 0; text-align: left; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 0; margin: 0;}
#Voice .voice_title .ico_voice {display: inline-block; background-color: #ffffff; color: #ef8f68; padding: 0.4em 1em; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; vertical-align: top; margin-right: 8px; line-height: 1.0;}
#Voice .voice_list {margin: 40px 5% 0; height: 400px;}
#Voice .voice_list iframe {width: 100%; height: 400px;}


/* -----------------------------------------------------
黒いボタン共通
----------------------------------------------------- */
.shopping_btns {cldar: both; text-align: center; margin-top: 30px;}
.shopping_btns li,
.shopping_btns li a {display: block;}
.shopping_btns li a {position: relative; background-color: #000; color: #fff; font-size: 1.56em; font-weight: bold; text-decoration: none; -webkit-transition:0.3s opacity; -moz-transition:0.3s opacity; transition:0.3s opacity;}
.shopping_btns li a.txt2line {font-size: 1.36em; line-height: 1.2; letter-spacing: -2px;}
.shopping_btns li a.txt2line .txt {padding-left: 40px;}
.shopping_btns li a.txt2line .txt2 {letter-spacing: -4px;}
.shopping_btns li a.txt2line .txt3 {padding-left: 30px;}
.shopping_btns li a img.icon {padding-right: 10px;}
.shopping_btns li a.txt2line img.icon {position: absolute; margin-top: 10px;}
.shopping_btns li.btn_buy a img.icon {width: 32px; height: auto;}
.shopping_btns li.btn_shop a img.icon {width: 30px; height: auto;}
.shopping_btns li a:hover,
.shopping_btns li a:active {filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; -moz-opacity:0.7; opacity:0.7;}
.shopping_btns li a img.ico_blank {position: absolute; top: 11px; right: 13px; padding: 0;}


/* ========================================

Media Queries

======================================== */
/* --------------------------- PC --------------------------- */
		@media print, screen and (min-width:1025px) {

.block-contents-12 h2 {margin-top: 0;}
.block-contents-12 .prod-contents {margin-bottom: 40px; line-height: 1.5;}

/* ------ 黒いボタン ------ */
.shopping_btns {width: 852px; margin: 40px auto 0;}
.shopping_btns li a {width: 420px; height: 58px; padding: 22px 0 0;}
.shopping_btns li.btn_buy {float: left;}
.shopping_btns li.btn_shop {float: right;}
.shopping_btns li a.txt2line {height: 66px; padding: 14px 0 0;}

/* ------ Voice ------ */
#Voice .voice_title {text-align: center;}
#Voice .voice_list {height: 600px; margin: 0;}
#Voice .voice_list iframe {width: 100%; height: 600px;}

		}

/* --------------------------- TB --------------------------- */
		@media screen and (min-width:641px) and (max-width:1024px) {

.block-contents-12 h2 {margin-top: 0;}
.block-contents-12 .prod-contents {margin-bottom: 40px; line-height: 1.5;}

/* ------ 黒いボタン ------ */
.shopping_btns li {width: 49%;}
.shopping_btns li a {height: 58px; padding: 22px 0 0;}
.shopping_btns li.btn_buy {float: left;}
.shopping_btns li.btn_shop {float: right;}
.shopping_btns li a.txt2line {height: 66px; padding: 14px 0 0;}

/* ------ Voice ------ */
#Voice .voice_title {text-align: center;}
#Voice .voice_list {margin: 0;}

		}


/* --------------------------- SP --------------------------- */
		@media screen and (max-width: 641px) {

/* ------ How To ------ */
#HowTo .howto_movie {padding-left: 20px; padding-right: 20px;}
#HowTo .howto_movie iframe {width: 306px; height: 172px;}
/* ------ Virtual Tester ------ */
#VirtualTester .vt_title {font-size: 2em; letter-spacing: -2px;}
#VirtualTester .vt_movie {padding-left: 20px; padding-right: 20px;}
#VirtualTester .vt_movie iframe {width: 225px; height: 400px;}

/* ------ 黒いボタン ------ */
.shopping_btns li {margin: 0 0 20px;}
.shopping_btns li a {padding: 18px 0;}
.shopping_btns li a.txt2line {padding: 12px 0;}

/* ------ Voice ------ */
#Voice .voice_title {padding-left: 0.6em; padding-right: 0.5em;}
#Voice .voice_title .ico_voice_sp {display: block; margin-bottom: 6px;}
#Voice .voice_list {height: 500px; overflow: auto;}
#Voice .voice_list iframe {height: 500px !important;}

		}

/* -----------------------------------------------------
c-product/uv-emulsion/
DB内「マルチプロテクト UV乳液について」のテキストを一部非表示
----------------------------------------------------- */
form[action="/c-product/uv-emulsion/"] .block-contents-12 .prod-contents a.faq_links {display: none;}