*{	
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #323232;
	box-sizing: border-box;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.08em;
	text-align: justify;
}

.mincho{ font-family: "游明朝", YuMincho, yu-mincho-pr6, sans-serif; font-weight: 500; font-style: normal; }
.garamond{ font-family: adobe-garamond-pro, serif; font-weight: 400; letter-spacing: .03em; }

/*** adobe使用フォント
Adobe Garamond Pro Regular font-family: adobe-garamond-pro, serif; font-weight: 400; font-style: normal;
Adobe Garamond Pro Semibold font-family: adobe-garamond-pro, serif; font-weight: 600; font-style: normal;
Yu Mincho Pr6 R font-family: yu-mincho-pr6, sans-serif; font-weight: 400; font-style: normal;
***/


a{ transition: .3s; }
a:hover{ opacity: .6; }
br{ line-height: inherit; }
span, a, strong, small{ color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit; letter-spacing: inherit; }

.wrap{ width: 800px; margin: 0 auto; position: relative; }
.wrap.midium{ width: 900px; }
.wrap.large{ width: 1000px; }
.row{ display: flex; justify-content: space-between; }

.linkwrap{ width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 10; }
.body-wrap{ overflow: hidden; position: relative; }

h2{ font-family: "游明朝", YuMincho, yu-mincho-pr6, sans-serif; font-weight: 500; }
h2.general{ font-size: 34px; text-align: center; line-height: 1.4; }
h2.general.white{ color: #fff; }
h2.general span{ display: block; text-align: center; font-size: 22px; color: #bdb78d; background: url(../images/common/item-ttl01.png) no-repeat center bottom/21px; padding-bottom: 20px; margin-bottom: 5px; }
h2.general.white span{ color: #fff; }
h2.general strong{ font-size: 50px; line-height: 1; color: #bdb78d; }

.btn{ width: 150px; height: 34px; font-size: 14px; font-family: "游明朝", YuMincho, yu-mincho-pr6, sans-serif; font-weight: 500; border-radius: 5px; border: solid 1px; display: flex; align-items: center; padding-left: 1em; position: relative; }
.btn.white{ color: #fff; }
.btn:before{ content: ''; width: 6px; height: 12px; background: url(../images/common/arrow04.png) no-repeat center/contain; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: .3s; }
.btn.white:before{ background-image: url(../images/common/arrow01.png); }
.btn:after{ content: ''; width: 6px; height: 12px; background: url(../images/common/arrow01.png) no-repeat center/contain; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: .3s; opacity: 0; }
.btn:hover{ opacity: 1; background: #323232; border-color: #323232; color: #fff;  }
.btn:hover:before{ opacity: 0; }
.btn:hover:after{ opacity: 1; }
.btn.midium{ width: 300px; }

.web-btn{ font-family: "游明朝", YuMincho, yu-mincho-pr6, sans-serif; font-weight: 500; font-size: 18px; width: 400px; height: 70px; border-radius: 10px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 0; overflow: hidden; margin-left: auto; margin-right: auto; }
.web-btn:before{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; transition: .3s;
	background: rgb(50,200,190); /* Old browsers */
	background: -moz-linear-gradient(45deg, rgba(50,200,190,1) 0%, rgba(50,200,190,1) 38%, rgba(152,227,222,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(50,200,190,1) 0%,rgba(50,200,190,1) 38%,rgba(152,227,222,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(50,200,190,1) 0%,rgba(50,200,190,1) 38%,rgba(152,227,222,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32c8be', endColorstr='#98e3de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
.web-btn:after{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -2; transition: .3s;
	background: rgb(71,134,129); /* Old browsers */
	background: -moz-linear-gradient(45deg, rgba(71,134,129,1) 0%, rgba(71,134,129,1) 38%, rgba(114,153,151,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(71,134,129,1) 0%,rgba(71,134,129,1) 38%,rgba(114,153,151,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(71,134,129,1) 0%,rgba(71,134,129,1) 38%,rgba(114,153,151,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#478681', endColorstr='#729997',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
.web-btn span{ padding: 0 20px 0 33px; position: relative; letter-spacing: .04em; }
.web-btn span:before{ content: ''; width: 100%; height: 100%; background-image: url(../images/common/icon-webbtn01.png), url(../images/common/arrow04.png); background-size: 23px, 6px; background-position: left center, right center; background-repeat: no-repeat, no-repeat; position: absolute; top: 0; left: 0; transition: .3s; }
.web-btn span:after{ content: ''; width: 100%; height: 100%; background-image: url(../images/common/icon-webbtn02.png), url(../images/common/arrow01.png); background-size: 23px, 6px; background-position: left center, right center; background-repeat: no-repeat, no-repeat; position: absolute; top: 0; left: 0; transition: .3s; opacity: 0; }
.web-btn:hover{ opacity: 1; color: #fff; }
.web-btn:hover:before{ opacity: 0; }
.web-btn:hover span:before{ opacity: 0; }
.web-btn:hover span:after{ opacity: 1; }

.yt-btn{ width: 400px; height: 70px; border-radius: 10px; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; display: block; background: url(../images/common/webp/yt-btn02.webp) no-repeat center/cover; }
.no-webp .yt-btn{ background-image: url(../images/common/yt-btn02.jpg); }
.yt-btn:before{ content: ''; width: 100%; height: 100%; background: url(../images/common/webp/yt-btn01.webp) no-repeat center/cover; position: absolute; top: 0; left: 0; z-index: 1; transition: .3s; }
.no-webp .yt-btn:before{ background-image: url(../images/common/yt-btn01.jpg); }
.yt-btn:hover{ opacity: 1; }
.yt-btn:hover:before{ opacity: 0; }

.sp{ display: none; }

header{ width: 100%; height: 80px; display: flex; align-items: center; padding: 0 90px 0 30px; }
header .logo{ display: block; width: 290px; }
header.index .logo{ display: none; }
header .right{ display: flex; align-items: center; margin-left: auto; }
header .btn-row{ display: flex; margin-left: 30px; }
header .btn-row a{ display: flex; justify-content: center; align-items: center; height: 38px; font-size: 14px; border: solid 1px; padding: 0 20px 0 42px; position: relative; border-radius: 5px; }
header .btn-row a.btn-contact:before{ content: ''; width: 17px; height: 11px; background: url(../images/common/icon-mail02.png) no-repeat center/contain; position: absolute; top: 50%; left: 18px; transform: translateY(-50%); transition: .3s; }
header .btn-row a.btn-contact:after{ content: ''; width: 17px; height: 11px; background: url(../images/common/icon-mail01.png) no-repeat center/contain; position: absolute; top: 50%; left: 18px; transform: translateY(-50%); transition: .3s; }
header .btn-row a.btn-resonus:before{ content: ''; width: 20px; height: 20px; background: url(../images/common/icon-logo01.png) no-repeat center/contain; position: absolute; top: 50%; left: 16px; transform: translateY(-50%); transition: .3s; }
header .btn-row a.btn-resonus:after{ content: ''; width: 20px; height: 20px; background: url(../images/common/icon-logo02.png) no-repeat center/contain; position: absolute; top: 50%; left: 16px; transform: translateY(-50%); transition: .3s; }
header .btn-row a.btn-resonus span{ padding-right: 25px; position: relative; }
header .btn-row a.btn-resonus span:before{ content: ''; width: 13px; height: 13px; background: url(../images/common/icon-blank01.png) no-repeat center/contain; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: .3s; }
header .btn-row a.btn-resonus span:after{ content: ''; width: 13px; height: 13px; background: url(../images/common/icon-blank02.png) no-repeat center/contain; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: .3s; opacity: 0; }
header .btn-row a:after{ opacity: 0; }
header .btn-row a:hover{ background: #323232; border-color: #323232; color: #fff; opacity: 1; }
header .btn-row a:hover:after, header .btn-row a.btn-resonus:hover span:after{ opacity: 1; }
header .btn-row a:hover:before, header .btn-row a.btn-resonus:hover span:before{ opacity: 0; }
header .btn-row a + a{ margin-left: 15px; }
header.clone{ position: fixed; top: -80px; left: 0; transition: .4s; z-index: 9996; background: #fff; }
header.clone.active{ top: 0; }

.menu-btn{ width: 36px; position: fixed; top: 24px; right: 30px; z-index: 9998; cursor: pointer; }
.menu-btn .inner{ width: 100%; height: 15px; position: relative; }
.menu-btn .inner span{ height: 1px; background: #323232; transition: .6s; position: absolute; right: 0; }
.menu-btn .inner span:nth-of-type(1){ width: 100%; top: 0; }
.menu-btn .inner span:nth-of-type(2){ width: 70%; top: 50%; transform: translateY(-50%); }
.menu-btn .inner span:nth-of-type(3){ width: 40%; bottom: 0; }
.menu-btn.active .inner span{ background: #fff; }
.menu-btn.active .inner span:nth-of-type(1){ transform: translate(0,5px) rotate(45deg); }
.menu-btn.active .inner span:nth-of-type(2){ opacity: 0; }
.menu-btn.active .inner span:nth-of-type(3){ width: 100%; transform: translate(0,-9px) rotate(-45deg); }
.menu-btn p{ font-size: 12px; color: #323232; font-weight: 600; text-align: center; white-space: nowrap; margin-top: .3em; transition: .6s; }
.menu-btn.active p{ color: #fff; }

nav.float-nav{ width: 400px; height: 100vh; background: rgba(50,50,50,.98); position: fixed; top: 0; right: -400px; z-index: 9997; overflow-y: scroll; padding: 120px 45px; transition: .6s; }
nav.float-nav.active{ right: 0; }
nav.float-nav .gnav{ margin-bottom: 30px; }
nav.float-nav .gnav li{ font-family: inherit; font-size: 18px; color: #fff; text-align: center; padding: .5em 0; border-bottom: solid 1px #464646; }
nav.float-nav .banner{ display: block; width: 100%; margin-bottom: 20px; }
nav.float-nav ul.sns{ width: 116px; margin: 35px auto 0; }
nav.float-nav ul.sns li a.icon-insta{ width: 24px; height: 24px; }
nav.float-nav ul.sns li a.icon-fb{ width: 11px; height: 24px; }
nav.float-nav ul.sns li a.icon-yt{ width: 34px; height: 24px; }

ul.sns{ display: flex; align-items: center; justify-content: space-between; width: 50px; }
ul.sns li a{ display: block; }
ul.sns li a.icon-insta{ width: 16px; height: 16px; background: url(../images/common/icon-insta01.png) no-repeat center/contain; }
ul.sns li a.icon-fb{ width: 8px; height: 16px; background: url(../images/common/icon-fb01.png) no-repeat center/contain; }
ul.sns li a.icon-yt{ width: 23px; height: 16px; background: url(../images/common/icon-yt01.png) no-repeat center/contain; }
ul.sns.pink li a.icon-insta{ background: url(../images/common/icon-insta02.png) no-repeat center/contain; }
ul.sns.pink li a.icon-fb{ background: url(../images/common/icon-fb02.png) no-repeat center/contain; }
ul.sns.pink li a.icon-yt{ background: url(../images/common/icon-yt02.png) no-repeat center/contain; }

footer{ padding-top: 40px; }
footer .logo{ display: block; width: 511px; margin: 0 auto 40px; }
footer .left{ width: 50%; border-right: solid 1px #f7f7f7; }
footer .left .row{ justify-content: flex-start; margin-bottom: 34px; }
footer .left .foot-nav + .foot-nav{ margin-left: 40px; }
footer .left .foot-nav li{ font-family: inherit; font-size: 13px; line-height: 2; }
footer .left .sns{ margin-bottom: 22px; }
footer .left .terms{ display: flex; }
footer .left .terms li{ font-size: 11px; }
footer .left .terms li + li{ margin-left: 1em; }
footer .right{ width: 50%; padding-left: 40px; }
footer .right .banner{ display: block; }
footer .right .banner + .banner{ margin-top: 20px; }
footer .right .banner img{ display: block; width: 100%; }
footer .sns.sp{ display: none; }
footer .copy{ font-size: 11px; text-align: center; padding: 66px 0 14px; display: block; }

.float-webbtn{ -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; position: fixed; top: 50%; right: -60px; transform: translateY(-50%); z-index: 9990; text-orientation: upright; font-size: 18px; height: 250px; width: 60px; display: flex; justify-content: center; align-items: center; border-radius: 20px 0 0 20px; box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.2); transition: .4s;
	background: rgb(50,200,190); /* Old browsers */
	background: -moz-linear-gradient(45deg, rgba(50,200,190,1) 0%, rgba(50,200,190,1) 38%, rgba(152,227,222,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(50,200,190,1) 0%,rgba(50,200,190,1) 38%,rgba(152,227,222,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(50,200,190,1) 0%,rgba(50,200,190,1) 38%,rgba(152,227,222,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32c8be', endColorstr='#98e3de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
.float-webbtn.active{ right: 0; }
.float-webbtn span{ padding: 23px 0 19px; position: relative; }
.float-webbtn span:before{ content: ''; width: 19px; height: 14px; background: url(../images/common/icon-webbtn01.png) no-repeat center/contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.float-webbtn span:after{ content: ''; width: 12px; height: 6px; background: url(../images/common/arrow05.png) no-repeat center/contain; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
header .btn-row a.btn-shop:before{ content: ''; width: 20px; height: 20px; background: url(../../images/common/icon-shop03.png) no-repeat center/contain; position: absolute; top: 50%; left: 16px; transform: translateY(-50%); transition: .3s; }
header .btn-row a.btn-shop:after{ content: ''; width: 20px; height: 20px; background: url(../../images/common/icon-shop03.png) no-repeat center/contain; position: absolute; top: 50%; left: 16px; transform: translateY(-50%); transition: .3s; }

@media(max-width: 768px){
	*{ font-size: 3.73vw; }

	.sp{ display: block; }
	.pc{ display: none !important; }

	.wrap{ width: 100%; padding-left: 6.66vw; padding-right: 6.66vw; }
	.wrap.midium, .wrap.large{ width: 100%; }
	.row{ flex-wrap: wrap; }

	.btn{ width: 40vw; height: 9.33vw; font-size: 3.73vw; margin-left: auto; margin-right: auto; border-radius: 1.33vw; }
	.btn:before{ width: 1.52vw; height: 3.06vw; right: 5.33vw; }
	.btn.midium{ width: 80vw; }

	.web-btn{ width: 80vw; height: 17.73vw; border-radius: 2vw; line-height: 1.4; font-size: 4.8vw; }
	.web-btn span{ padding: 0 14.26vw 0	10.33vw; }
	.web-btn span:before, .web-btn span:after{ background-size: 7.6vw, 1.6vw; }

	.yt-btn{ width: 80vw; height: 17.73vw; border-radius: 2vw; }
	.yt-btn:before{ background-image: url(../images/common/webp/yt-btn01-sp.webp); }
	.yt-btn:hover:before{ opacity: 1; }
	.yt-btn:after{ content: none; }

	h2.general span{ font-size: 5.06vw; background-size: 5.6vw; padding-bottom: 1em; margin-bottom: .4em; }
	h2.general{ font-size: 5.86vw; white-space: nowrap; }
	h2.general strong{ font-size: 9.33vw; }

	.menu-btn{ width: 15.33vw; height: 15.33vw; top: 0; right: 0; }
	.menu-btn .inner{ width: 9.6vw; height: 4vw; margin: 3.46vw auto 0; }
	.menu-btn.active .inner span:nth-of-type(1){ top: 50%; transform: translate(0,-50%) rotate(45deg); }
	.menu-btn.active .inner span:nth-of-type(3){ bottom: 50%; transform: translate(0,50%) rotate(-45deg); }
	.menu-btn p{ font-size: 3.2vw; }

	nav.float-nav{ width: 60vw; right: -60vw; padding: 20vw 8.66vw 9.33vw; }
	nav.float-nav .gnav{ margin-bottom: 4.66vw; }
	nav.float-nav .gnav li{ font-size: 3.46vw; }
	nav.float-nav .banner{ margin-bottom: 2vw; }
	nav.float-nav ul.sns{ width: 28.53vw; margin-top: 2.66vw; }
	nav.float-nav ul.sns li a.icon-insta{ width: 5.86vw; height: 5.86vw; }
	nav.float-nav ul.sns li a.icon-fb{ width: 2.73vw; height: 5.86vw; }
	nav.float-nav ul.sns li a.icon-yt{ width: 8.24vw; height: 5.86vw; }

	footer{ padding-top: 12vw; }
	footer .logo{ width: 68.13vw; margin-bottom: 9.33vw; }
	footer .left{ width: 100vw; border-right: none; margin: 0 -6.66vw; border-top: solid 1px #f7f7f7; }
	footer .left .row{ margin-bottom: 6.66vw; }
	footer .left .foot-nav{ width: 100%; }
	footer .left .foot-nav + .foot-nav{ margin-left: 0; }
	footer .left .foot-nav li{ font-size: 2.93vw; text-align: center; border-bottom: solid 1px #f7f7f7; line-height: 2.8; }	
	footer .right{ width: 86.66vw; margin: 0 auto 7.46vw; padding: 0; display: flex; justify-content: space-between; }
	footer .right .banner{ width: 41.33vw; }
	footer .right .banner + .banner{ margin-top: 0; }
	footer .sns.sp{ display: flex; width: 35.2vw; margin: 0 auto; }
	footer ul.sns li a.icon-insta{ width: 5.86vw; height: 5.86vw; }
	footer ul.sns li a.icon-fb{ width: 2.73vw; height: 5.86vw; }
	footer ul.sns li a.icon-yt{ width: 8.37vw; height: 5.86vw; }
	footer .copy{ font-size: 2.4vw; padding: 4.93vw 0 20vw; }

	.float-btn{ width: 100%; background: #fff; padding: 2.66vw; position: fixed; bottom: 0; left: 0; z-index: 9990; display: flex; justify-content: space-between; }
	.float-btn li{ width: 92vw; height: 10.66vw; border-radius: 1.33vw; display: flex; justify-content: center; align-items: center; position: relative; font-family: "游明朝", YuMincho, yu-mincho-pr6, sans-serif; font-weight: 500; }
	.float-btn li:nth-of-type(1){ 
		background: rgb(255,180,180); /* Old browsers */
		background: -moz-linear-gradient(45deg, rgba(255,180,180,1) 0%, rgba(255,180,180,1) 38%, rgba(255,210,210,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(45deg, rgba(255,180,180,1) 0%,rgba(255,180,180,1) 38%,rgba(255,210,210,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(45deg, rgba(255,180,180,1) 0%,rgba(255,180,180,1) 38%,rgba(255,210,210,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb4b4', endColorstr='#ffd2d2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
	.float-btn li:nth-of-type(2){		
		background: rgb(50,200,190); /* Old browsers */
		background: -moz-linear-gradient(45deg, rgba(50,200,190,1) 0%, rgba(50,200,190,1) 38%, rgba(152,227,222,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(45deg, rgba(50,200,190,1) 0%,rgba(50,200,190,1) 38%,rgba(152,227,222,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(45deg, rgba(50,200,190,1) 0%,rgba(50,200,190,1) 38%,rgba(152,227,222,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32c8be', endColorstr='#98e3de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
	.float-btn li:nth-of-type(1) span{ padding-left: 6.13vw; background: url(../images/common/icon-mail02.png) no-repeat center left/4.46vw; }
	.float-btn li:nth-of-type(2) span{ padding-left: 6vw; background: url(../images/common/icon-webbtn01.png) no-repeat top 1vw left/4.94vw; }
}