@charset "UTF-8";

html{margin:0;padding:0}

body{margin:0;padding:0}

button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;font-size:1.0rem;margin:0;padding:0}

dl,dd,ol,ul,li{margin:0;padding:0;list-style: none;}

select{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border-width:0;margin:0;padding:0}

html{color:#000;font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;font-weight: 300;overflow: auto;}

body{overflow: hidden;max-width: 100vw;}

a{color:#000;text-decoration:none;}



button {

 -webkit-tap-highlight-color:rgba(0,0,0,0);

}

a {

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	-webkit-box-shadow: none;

    box-shadow: none;

	outline: none;

}

a:hover,

button:hover {

	transition: .3s;

}

button:focus {

	outline: none;

}

* {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -ms-box-sizing: border-box;

    -o-box-sizing: border-box;

    box-sizing: border-box;

}

h1, h2, h3, h4, h5, h6 {

	font-family: "Gothic MB101 Bold","MySansSerif","YakuHanJP", sans-serif !important;

	margin: 0;

}

p {

	margin: 0;

	line-height: 1.8;

}

figure {

	margin: 0;

}

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

    - body

    	> header

    	> main

    	> footer

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

main {

	text-rendering: optimizeLegibility;

	color: #333;

    line-height: 1.75;

    display: block;

}

main img {

	width: 100%;

	vertical-align: bottom;

}

main h1 {

	font-size: 64px;

	color: #222;

}

main h2 {

	font-size: 40px;

	line-height: 1;

	color: #222;

}

main h3 {

	font-size: 24px;

	line-height: 1.5;

	color: #222;

}

main h4 {

	font-size: 16px;

	line-height: 1;

	color: #222;

}

main p {

	font-size: 15px;

}

main section .container {

	max-width: 1000px;

    padding: 0 100px;

	margin: 0 auto;

}

main article .container {

	max-width: 1000px;

	margin: 0 auto;

}

main .container-left {

	float: left;

}

main .container-right {

	float: right;

}

main .clearfix:after {

	clear: both;

	content: '';

	display: block;

}

main br.pcbr{display: block;}

main br.spbr{display: none;}



main .in-block {

	display: inline-block;

}

main .price {

	margin-left: 12px;

	font-weight: 300;

}

main .price .num {

    margin: 0 4px;

    font-weight: bold;

    font-size: 19px;

    font-family: "Helvetica", sans-serif;

}

main .hide {

	display: none !important;

}

main .init_btm {

	margin-bottom: 0px !important;

}

main .spacing {

	letter-spacing: -0.5em;

}

@media screen and (max-width: 1000px) {

	main section .container {

	    padding: 0 10vw;

	}

}

@media screen and (max-width: 767px) {

	main h1 {

		font-size: 10.135vw;

	}

	main h2 {

		font-size: 7.467vw;

	}

	main h3 {

		font-size: 6.4vw;

	}

	main h4 {

		font-size: 3.733vw;

	}

	main p {

		font-size: 14px;

	}

	main section .container {

	    padding: 0 8vw;

	}

	main article .container {

	    padding: 0 8vw;

	}

	main br.pcbr{display: none!important;}

	main br.spbr{display: block!important;}

	main .price {

		margin-left: 2.933vw;

	}

	main .price .num {

	    font-size: 4.533vw;

	}

}

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

    - main

    	> #hero

    	> #theme

    	> #story

    	> #set

    	> #single

    	> #try-bnr

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

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



  #hero



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

#hero {

	position: relative;

}

#hero .hero-ttl {

	position: absolute;

	top: 20.6vw;

    left: 58.2vw;

    -ms-writing-mode: tb-rl;

    writing-mode: vertical-rl;

}

#hero .hero-ttl.en,

#hero .hero-ttl.cht {

	z-index: -1;

}

#hero .hero-ttl h1 {

	font-size: 4.267vw;

	color: #fff;

	line-height: 1.15625;

}

@media screen and (max-width: 767px) {

	#hero .hero-ttl {

		top: 55.2vw;

	    left: 60.13vw;

	}

	#hero .hero-ttl h1 {

		font-size: 10.135vw;

		line-height: 1.1351;

	}

}

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



  #theme



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

#theme {

	padding: 150px 0;

}

#theme .theme-txt {

	text-align: center;

}

@media screen and (max-width: 767px) {

	#theme {

	    padding: 80px 0;

	}

	#theme .theme-txt {

		max-width: initial;

		max-width: auto;

		text-align: left;

	}

}

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



  #story



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

#story {

	padding-bottom: 200px;

}

#story .story-content+.story-content {

	margin-top: 180px;

}

#story .story-txt {

	width: 50%;

	padding-right: 30px;

}

#story .story-img {

	width: 50%;

	padding-left: 30px;

}

#story .story-txt h3 {

	margin-top: 5px;

	margin-bottom: 33px;

}

#story .story-txt p+p {

	margin-top: 10px;

}

#story figure+figure {

	margin-top: 60px;

}

#story figure img+img {

	margin-top: 20px;

}

#story figure figcaption {

	margin-top: 10px;

	line-height: 1;

	font-size: 12px;

	font-weight: 600;

}

.cap-img {

	width: calc(100% + 20px);

}

.knock-img {

	width: calc(100% + 33px);

}

.refill-img {

	width: calc(100% - 8px);

}

@media screen and (max-width: 767px) {

	#story {

	    padding-bottom: 80px;

	}

	#story .story-content+.story-content {

		margin-top: 120px;

	}

	#story .story-txt {

		width: 100%;

		padding-right: initial;

		padding-right: 0px;

	}

	#story .story-img {

		width: 100%;

		padding-left: initial;

		padding-left: 0px;

	}

	#story .story-txt h3 {

		margin-top: initial;

		margin-top: 0px;

		margin-bottom: 40px;

	}

	#story .story-txt p:first-child {

		margin-top: 40px;

	}

	#story .story-txt p+p {

		margin-top: 15px;

	}

	#story figure+figure {

		margin-top: 50px;

	}

	#story figure img+img {

		margin-top: 15px;

	}

	#story figure figcaption {

		margin-top: 15px;

		font-size: 3.2vw;

	}

	.cap-img {

		width: calc(100% - 7px);

	}

	.knock-img {

		width: 100%;

	}

	.refill-img {

		width: calc(100% - 38px);

	}

}

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



  #set,single common



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

.name {

	font-size: 16px;

	font-weight: 600;

	line-height: 1;

}

#single .name {

	font-size: 13px;

}

#single .tab-btn button img,

#set .chip img,

.replaced-svg {

	width: 34%;

	max-width: 26px;

	max-height: 26px;

}

.length {

	width: 66%;

	text-align: center;

}

.color {

	width: 100%;

	text-align: center;

}

.detail {

	line-height: 1;

}

.detail a {

	position: relative;

	margin-left: 30px;

	margin-right: 20px;

	border-bottom: #fff solid 2px;

	font-size: 11px;

	color: #999;

}

#single .detail a {

	margin-right: initial;

	margin-right: 0px;

}

.detail a:before {

	position: absolute;

    content: '';

    margin: auto 0;

    top: 0;

    bottom: 0;

    left: -15px;

    width: 6px;

    height: 6px;

    border-top: 1px solid #999;

    border-right: 1px solid #999;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

}

.detail a:hover {

	border-bottom: #cecece solid 2px;

	color: #666;

}

.cap-chip path {

	fill: #1c8c6a;

}

.knock-chip path {

	fill: #59403a;

}

@media screen and (max-width: 767px) {

	#single .length,

	#set .length {

		width: 70%;

		font-size: 2.666vw;

	}

	#single .color {

		width: 70%;

		font-size: 2.666vw;

	}

	#single .name,

	#set .name {

	     font-size: 3.2vw;

	}

	#single .detail a,

	#set .detail a {

		font-size: 2.666vw;

		margin-right: 4vw;

    	margin-left: 5.86vw;

    	color: #59403a;

    	white-space: nowrap;

    	display: inline-block;

	}

	.detail a:before {

	    left: -3.1vw;

	    width: 1.2vw;

    	height: 1.2vw;

	}

}

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



  #set



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

#set .lead,

#single .lead {

	padding-top: 160px;

	text-align: center;

	background: linear-gradient(#f8f8f8, #ffffff);

}

#set .lead p,

#single .lead p {

	margin-top: 45px;

}

#set .content,

#single .content {

	margin: 160px 0;

}

#set .content-ttl,

#single .content-ttl {

	margin-bottom: 60px;

	text-align: center;

}

#set .content-ttl h4 {

	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;

	font-weight: 600;

}



#set .content-ttl .price {

	margin-left: initial;

	margin-left: 0px;

	margin-top: 20px;

	font-size: 12px;

	line-height: 1;

}

#set .content-detail {

	margin-top: 25px;

	text-align: center;

}

#set .name {

	margin-bottom: 30px;

}

#set .content-detail ul {

	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

	-webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin: 0 auto;

}

#set .content-detail ul li {

	padding: 0 15px;

}

#set .chip {

	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin: 0 auto;

    font-size: 12px;

	font-weight: 600;

	color: #666;

	padding: 0 10px;

	margin-bottom: 20px;

}

#set .content-slide ul {

	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin: 0 auto;

    width: 120%;

    margin-left: -10%;

}

#set .content-slide ul li {

	width: 64px;

	font-size: 0px;

}

#set .content-cap .content-slide ul li button {

	padding: 0 16px 0 8px;

	margin-bottom: 30px;

}

#set .content-knock .content-slide ul li button {

	padding: 0 14px 0 6px;

	margin-bottom: 30px;

}

#set .content-slide ul li button:hover {

	margin-top: 8px;

	margin-bottom: 22px;

	opacity: 0.8;

}

#set .content-slide ul li button.selected:hover {

	margin-bottom: initial;

	margin-bottom: 0px;

	margin-top: 30px;

	opacity: 1;

}

#set .content-slide ul li  button.selected {

	margin-bottom: initial;

	margin-bottom: 0px;

	margin-top: 30px;

    height: auto;

}

@media screen and (max-width: 1000px) {

	#set .content-slide ul li {

		width: 6.4vw;

	}

	#set .content-knock .content-slide ul li button {

	    padding: 0 1.4vw 0 0.6vw;

	}

	#set .content-cap .content-slide ul li button {

	    padding: 0 1.6vw 0 0.8vw;

	}

}

@media screen and (max-width: 767px) {

	#set .lead,

	#single .lead {

		padding: 80px 8vw 0;

	}

	#set .lead p,

	#single .lead p {

		margin-top: 40px;

		text-align: left;

	}

	#set .content,

	#single .content {

		margin: 80px 0;

	}

	#single .content+.content {

		margin-bottom: 95px;

	}

	#set .content-ttl .price {

		margin-left: initial;

		margin-left: 0px;

		margin-top: 2.666vw;

		font-size: 3.2vw;

	}

	#set .content-detail ul li {

	    padding: 0px 1.066vw;

	}

}

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



  #single



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

#single .content-ttl h3 {

	line-height: 1;

}

#single .content-ttl .price {

	margin-left: initial;

	margin-left: 0px;

	margin-top: 15px;

	font-size: 12px;

}

#single .content-ttl p {

	margin-top: 20px;

}

#single .content-tab {

	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

	-webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin-bottom: 80px;

}

#single .tab-core {

	-webkit-box-align: start;

    -webkit-align-items: flex-start;

    -ms-flex-align: start;

    align-items: flex-start;

}

#single .content-tab dt {

	font-size: 12px;

	font-weight: 600;

	line-height: 1.5;

}

#single .tab-core dt {

	margin-top: 4px;

}

#single .tab-core dt:not(:first-child) {

	margin-left: 40px;

	line-height: 3.0;

}

#single .tab-body .tab-btn {

	margin-left: 22px;

	width: 160px;

}

#single .tab-core .tab-btn {

	margin-left: 22px;

	width: 120px;

}

.tab-btn+.tab-btn {

	margin-left: 15px;

}

.tab-core .tab-btn p {

	margin-top: 10px;

	text-align: center;

	font-size: 12px;

	font-weight: 300;

	line-height: 1.5;

}

.tab-btn button {

	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    border: #e2e2e2 solid 1px;

    font-size: 12px;

	font-weight: 600;

	color: #999;

	width: 100%;

}

.tab-body .tab-btn button {

    padding: 7px 5px 7px 13px;

	border-radius: 30px;

}

.tab-core .tab-btn button {

    padding: 7px 8px 7px 15px;

	border-radius: 30px;

}

#single .tab-btn button:hover {

	border: #666 solid 1px;

	color: #666;

}

#single .tab-btn button.selected {

	border: #e9e9e9 solid 1px;

	background-color: #cecece;

	color: #333;

}

#single .tab-btn button.selected:hover {

	border: #e9e9e9 solid 1px;

	color: #333;

}

#single .tab-btn button img,

.replaced-svg {

	width: 34%;

	max-width: 26px;

	max-height: 26px;

}

#single .tab-body .circle{

  display: inline-block;

  width: 34%;

  max-width: 26px;

  height: -moz-available;

  height: -webkit-fill-available;

  height: fill-available;

  max-height: 26px;

  min-height: 26px;

  border-radius: 50%;

}

#single .tab-body .white {background: #f1f1e7;}

#single .tab-body .black {background: #313131;}

#single .tab-body .clear {background: #d4d4d4;}

/*   item-list   */

#single .item-list {

	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    padding: 0 100px;

    margin: 0 auto;

    max-width: 1000px;

}

#single .item-list li {

	width: 50%;

	margin-bottom: 48px;

}

#single .item-list li:last-child,

#single .item-list li:nth-last-child(2):nth-child(odd) {

	margin-bottom: initial;

	margin-bottom: 0px;

}

#single .item-body li {

	padding-right: 30px;

}

#single .item-core li {

	padding-right: 42px;

}

#single .item-list li:nth-of-type(2n) {

	padding-right: initial;

	padding-right: 0px;

}

#single .item-body li:nth-of-type(2n) {

	padding-left: 20px;

}

#single .item-core li:nth-of-type(2n) {

	padding-left: 47px;

}

#single .item-ttl {

	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

	-webkit-box-pack: start;

    -webkit-justify-content: flex-start;

    -ms-flex-pack: start;

    justify-content: flex-start;

    margin-bottom: 20px;

}

#single .item-ttl div:first-child {

}

#single .item-ttl .right {

	margin-left: auto;

	white-space: nowrap;

}

#single .item-ttl .right div {

	display: inline-block;

}

@media screen and (max-width: 1000px) {

	#single .tab-core dt:not(:first-child) {

		margin-left: 3.0vw;

	}

	#single .tab-core .tab-btn {

		margin-left: 2.0vw;

		width: 12vw;

	}

	#single .tab-btn+.tab-btn {

		margin-left: 1.25vw;

	}

	#single .tab-body .tab-btn button {

	    padding: 7px 0.4vw 7px 0.8vw;

	}

	#single .tab-core .tab-btn button {

	    padding: 7px 0.5vw 7px 1.0vw;

	}

	#single .item-list {

	    padding: 0 10vw;

	}

	#single .item-body li {

		padding-right: 3vw;

	}

	#single .item-core li {

		padding-right: 4.2vw;

	}

	#single .item-body li:nth-of-type(2n) {

		padding-left: 2vw;

	}

	#single .item-core li:nth-of-type(2n) {

		padding-left: 4.7vw;

	}

}

@media screen and (max-width: 767px) {

	#single .content-ttl .price {

		margin-top: 4vw;

		font-size: 3.2vw;

	}

	#single .content-ttl p {

		text-align: left;

	}

	#single .tab-body dt {

		font-size: 3.466vw;

		width: 100%;

		text-align: center;

		margin-bottom: 25px;

	}

	#single .tab-core dt {

	    margin-top: initial;

	    margin-top: 0px;

	    font-size: 3.466vw;

	    width: 35%;

	}

	#single .tab-core dt:first-child {

	    margin-bottom: 9.066vw;

	}

	#single .tab-core dt:not(:first-child) {

	    margin-left: initial;

	    margin-left: 0px;

	}

	#single .content-tab {

		margin-left: initial;

		margin-left: 0px;

		-webkit-box-pack: justify;

	    -webkit-justify-content: space-between;

	    -ms-flex-pack: justify;

	    justify-content: space-between;

	}

	#single .tab-body {

		margin-bottom: 65px;

	}

	#single .tab-core {

		margin-bottom: 40px;

	}

	#single .content-tab .tab-btn {

		margin-left: initial;

		margin-left: 0px;

	}

	#single .tab-body .tab-btn {

	    width: 50%;

	    margin-bottom: 5.333vw;

	}

	#single .tab-body .tab-btn:last-child {

	    margin-bottom: 0;

	}

	#single .tab-core .tab-btn {

		display: -webkit-box;

		display: -webkit-flex;

		display: -ms-flexbox;

		display: flex;

		-webkit-box-align: center;

	    -webkit-align-items: center;

	    -ms-flex-align: center;

	    align-items: center;

	    -webkit-box-pack: justify;

	    -webkit-justify-content: space-between;

	    -ms-flex-pack: justify;

	    justify-content: space-between;

	    width: 65%;

	}

	#single .tab-btn+.tab-btn {

		margin-left: initial;

		margin-left: 0px;

	}

	#single .tab-core .tab-btn+.tab-btn {

		margin-left: 35%;

		margin-top: 4vw;

	}

	.tab-btn button {

		border: #bdbdbd solid 1px;

		width: 36vw;

	}

	#single .tab-body .tab-btn button {

	    padding: 2vw 3.33vw 2vw 3.33vw;

		border-radius: 5.0vw;

		margin: 0 auto;

	}

	#single .tab-core .tab-btn button {

	    padding: 2vw 2.666vw 2vw 3.066vw;

		border-radius: 5.333vw;

		width: 25.333vw;

		min-width: 25.333vw;

	}

	#single .tab-body .circle {

	    width: 5.333vw;

	    max-width: 5.333vw;

	    max-height: 5.333vw;

	    min-height: 5.333vw;

	}

	#single .tab-btn button img,

	#set .chip img,

	.replaced-svg {

		width: 5.333vw;

		max-width: 5.333vw;

	    max-height: 5.333vw;

	}

	#single .tab-core .tab-btn p {

	    margin-top: initial;

	    margin-top: 0px;

	    text-align: left;

	    font-size: 2.666vw;

	    width: 53.6%;

	    margin-left: 4vw;

	}

	#single .item-list {

	    margin: initial;

	    margin: 0px;

	    padding: initial;

	    padding: 0px;

	}

	#single .item-list li {

		display: -webkit-box;

		display: -webkit-flex;

		display: -ms-flexbox;

		display: flex;

		-webkit-box-align: center;

	    -webkit-align-items: center;

	    -ms-flex-align: center;

	    align-items: center;

	    width: 100%;

		margin-bottom: 9.6vw;

	}

	#single .item-body li {

		padding-right: 8vw;

	}

	#single .item-core li {

		padding-right: initial;

		padding-right: 0px;

		padding-left: 8vw;

	}

	#single .item-list li:nth-of-type(2n) {

		padding-right: initial;

		padding-right: 0px;

	}

	#single .item-body li:nth-of-type(2n) {

		padding-left: initial;

		padding-left: 0px;

		padding-right: 8vw;

	}

	#single .item-core li:nth-of-type(2n) {

		padding-left: initial;

		padding-left: 0px;

		padding-left: 8vw;

	}

	#single .item-list li:nth-last-child(2):nth-child(odd) {

	    margin-bottom: 9.6vw;

	}

	#single .item-list li:last-child {

		margin-bottom: 0;



	}

	#single .item-body li {

		-webkit-box-orient: horizontal;

	    -webkit-box-direction: reverse;

	    -webkit-flex-direction: row-reverse;

	    -ms-flex-direction: row-reverse;

	    flex-direction: row-reverse;

	    padding-right: 8vw;

	}

	#single .item-body .item-img {

		margin-left: -34.666vw;

	}

	#single .item-core .item-img {

	}

	#single .item-core .img-wrapper {

		margin-right: -34.666vw;

	}

	#single .item-ttl {

		display: -webkit-box;

		display: -webkit-flex;

		display: -ms-flexbox;

		display: flex;

		-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	    flex-wrap: wrap;

		-webkit-box-pack: center;

	    -webkit-justify-content: center;

	    -ms-flex-pack: center;

	    justify-content: center;

	    margin-bottom: initial;

	    margin-bottom: 0px;

	    text-align: center;

	    width: 25.333vw;

	}

	#single .item-ttl .right {

	    white-space: normal;

	    margin-right: auto;

	    margin-left: initial;

	    margin-left: 0px;

	}

	#single .item-body .item-ttl {

		 margin-left: 6vw;

	}

	#single .item-core .item-ttl {

		 margin-right: 6vw;

		 width: 25.333vw;

		 min-width: 96.13px;

		 max-width: 194.42px;

	}

	#single .item-ttl div:first-child {

		margin-right: initial;

		margin-right: 0px;

	}

	#single .item-ttl > div {

	}

	#single .item-ttl div + div {

		margin-top: 4vw;

	}

}

@media screen and (max-width: 374px) {

	#single .tab-core .tab-btn {

		-webkit-box-align: start;

	    -webkit-align-items: flex-start;

	    -ms-flex-align: start;

	    align-items: flex-start;

	}

	#single .item-core .item-ttl {

		 width: 25.333vw;

		 min-width: 91.11px;

	}

	#single .item-ttl > div {

		width: 25.333vw;

		min-width: 96.13px;

	}

}

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



  #try-bnr



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

.bnr {

	position: relative;

	bottom: initial;

	bottom: 0px;

	right: initial;

	right: 0px;

	margin-bottom: 160px;

}

#try-btn .pen-trial-wrap {

	position: fixed;

    z-index: 9000;

    bottom: 2.5vw;

    right: 6.666vw;

    text-align: center;

}

.pen-trial-open-link {

	cursor: pointer;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	-webkit-box-shadow: none;

    box-shadow: none;

	outline: none;

}

#try-btn .pen-trial-wrap:hover .pen-trial-open-button-label {

	opacity: 1!important;

	transition: .3s;

}

#try-btn .pen-trial-open-button-label {

	font-size: 12px;

    line-height: 1.5;

    margin-bottom: 15px;

}

#try-btn .btn {

	width: 90px;

    height: 90px;

}

#try-bnr .try-txt {

	position: absolute;

	top:35px;

	left: 0;

    right: 0;

    pointer-events: none;

    text-align: center;

}

#try-bnr .try-txt h3 {

	font-size: 28px;

	line-height: 1.5;

}

#try-bnr .try-btn {

	display: inline-block;

	margin-top: 20px;

	padding: 15px 50px;

	border-radius: 30px;

	background-color: #000;

	color: #fff;

	font-size: 14px;

	font-weight: 600;

	line-height: 1;

}

.page .help-button {

	display: none;

}

@media screen and (max-width: 1000px) {

	#try-bnr .try-txt {

		top: 3.5vw;

	}

	#try-bnr .try-txt h3 {

		font-size: 2.8vw;

	}

	#try-bnr .try-btn {

		margin-top: 2.0vw;

		padding: 1.5vw 5.0vw;

		border-radius: 3.0vw;

		font-size: 1.4vw;

	}

	#try-btn .pen-trial-open-button-label {

		font-size: 1.2vw;

		margin-bottom: 1.5vw;

	}

	#try-btn .btn {

		width: 9vw;

	    height: 9vw;

	}

}

@media screen and (max-width: 767px) {

	.bnr{

		position: relative;

		bottom: initial;

		bottom: 0px;

		right: initial;

		right: 0px;

		margin-bottom: 90px;

	}

	#try-bnr .try-txt {

		top: 9.067vw;

	}

	#try-bnr .try-txt h3 {

		font-size: 6.4vw;

	}

	#try-bnr .try-txt p {

		font-size: 3.2vw;

		margin-top: 4.0vw;

		line-height: 1.5;

	}

	#try-btn .pen-trial-wrap {

	    bottom: 5.333vw;

	    right: 5.333vw;

	    text-align: center;

	}

	#try-btn .pen-trial-inner {

		display: -webkit-box;

		display: -webkit-flex;

		display: -ms-flexbox;

		display: flex;

		-webkit-box-align: center;

	    -webkit-align-items: center;

	    -ms-flex-align: center;

	    align-items: center;

	}

	#try-bnr .try-btn {

		margin-top: 6.667vw;

		padding: 2.933vw 10.267vw;

		border-radius: 6.0vw;

		font-size: 3.733vw;

	}

	#try-btn .pen-trial-open-button-label {

		margin-bottom: 0;

		margin-right: 3vw;

		font-size: 2.666vw;

		text-align: right;

	}

	#try-btn .pen-trial-wrap:hover .pen-trial-open-button-label {

		opacity: 0!important;

	}

	#try-btn .btn {

		width: 13.333vw;

	    height: 13.333vw;

	}

}

/* IE10以上 */

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

	#try-btn {

		display: none;

	}

	#try-bnr {

		display: none;

	}

}

/*Swiper*/



.swiper-container {

    display: none;

}

@media screen and (max-width: 767px) {

	.content-slide {

		display: none;

	}

	.swiper-container {

		display: block;

	    width: 136%;

	    margin-left: -18%;

	}

	.knock-swiper {

		display: block;

	    width: 240%;

	    margin-left: -70%;

	}

	.swiper-container li {

		transition: .3s;

		padding-bottom: 40px;

	}

	li.swiper-slide-active {

		margin-top: 40px;

		padding-bottom: initial;

		padding-bottom: 0px;

	}

	li.swiper-slide-prev,

	li.swiper-slide-next {

		margin-top: 5px;

		padding-bottom: 35px;

	}

}