@charset "UTF-8";
body { color: #4e3824;}
#hd .menu { background: #fdd87f;}
#hd .menu ul.brand li.top:after { border-right: solid 15px #fdd87f;}
.menu-trig div span { background: #42220f;}
.menu-cart a svg { fill: #42220f;}

.bogo-language-switcher .ja { display: none !important;}

.min { font-family: "Sawarabi Mincho", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif;}

@keyframes fadeInOut{
	 0% { opacity: 0;}
	50% { opacity: 1;}
	80% { opacity: 1;}
 100% { opacity: 0;}
}
#loading { width: 100%; height: 100vh; background: url('../../img/deep/bg-ye.jpg') no-repeat 50% 50% / cover;
 position: fixed; left: 0; top: 0; z-index: 200; transition: 0.4s linear 5.4s;
}
#loading .ctn { position: relative; width: 100%; height: 100vh; text-align: center;}
#loading .ctn img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-55%); max-width: 80%; max-height: 140px; opacity: 0;}
#loading .skip { width: 95px; height: 38px; background: url('../../img/deep/loading/skip.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); cursor: pointer;
}
#loading.fadeOut .ctn img:nth-of-type(1){ animation: 2.0s fadeInOut linear;}
#loading.fadeOut .ctn img:nth-of-type(2){ animation: 2.0s fadeInOut linear 1.8s;}
#loading.fadeOut .ctn img:nth-of-type(3){ animation: 2.0s fadeInOut linear 3.6s;}
#loading.fadeOut { opacity: 0;}
@media (max-width: 481px) {
	#loading .ctn img { top: 35%;}
	#loading .skip { width: 80px; height: 30px;}
}



.wrap { width: 100%; max-width: 1280px; margin: 0 auto;}

#kv { position: relative; margin-bottom: -1px;}
#kv .inner-kv { position: absolute; width: 100%; left: 0; top: 0;}
#kv .inner-kv .txt { width: 94%; margin: 0 auto;}
#kv .inner-kv .txt .inner { position: relative; width: 60%; padding-top: 80px;}
#kv .inner-kv .txt .inner:after { content: ''; display: block; width: 110px; height: 160px;
 background: url('/img/awards/badge-no1-202412.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 5%; top: 40px;
}
#kv .inner-kv .txt h1 { margin-bottom: 30px; text-align: center;}
#kv .inner-kv .txt h1 img { width: 72%; max-width: 380px;}
#kv .inner-kv .txt .news ul li { display: none;}
#kv .inner-kv .txt .news ul li:first-child { display: block;}
#kv .inner-kv .txt .news ul li a { position: relative; display: block; width: 92%; max-width: 430px; margin: 0 auto; padding: 2px;
 background: #fdfbdc; box-shadow: 0px 0px 20px #fdfbdc, 0px 0px 20px #fdfbdc, 0px 0px 20px #fdfbdc; border-radius: 8px;
 color: #6a3906; text-decoration: none;
 transition: 0.8s ease 0.4s; transform: translateX(-50px); opacity: 0;
}
#kv .inner-kv .txt .news ul li a dl { display: table; width: 100%;}
#kv .inner-kv .txt .news ul li a dl dt,
#kv .inner-kv .txt .news ul li a dl dd { display: table-cell; vertical-align: middle;}
#kv .inner-kv .txt .news ul li a dl dt { width: 120px;}
#kv .inner-kv .txt .news ul li a dl dt img { width: 100%;}
#kv .inner-kv .txt .news ul li a dl dd { width: auto; padding-left: 20px; font-size: 12px;}
#kv .inner-kv .txt .news ul li a dl dd span { display: block;}
#kv .inner-kv .txt .news ul li a dl dd span.update { font-size: 11px;}
#kv .inner-kv .txt .news ul li a:hover dl { opacity: 0.8;}

#kv .note { position: absolute; width: 100%; padding: 0 18px; bottom: 20px;}
#kv .note ul { max-width: 540px; margin: 0 0 0 auto; color: #636363;}
#kv .note ul li {}
#kv .note ul li span { display: block;}

#kv .bg-kv { width: 100%;}
#kv .bg-kv img { width: 100%;}
#kv .bg-kv img.sp { display: none;}

#kv.show .inner-kv .txt .news ul li a { transform: translateX(0px); opacity: 1;}
@media (max-width: 1001px) {
	#kv .inner-kv .txt .inner { width: 65%; padding-top: 4vw;}
	#kv .inner-kv .txt .inner:after { top: 20px;}

	#kv .inner-kv .txt h1 { margin-bottom: 20px;}
	#kv .inner-kv .txt h1 img { width: 60%;}
	#kv .inner-kv .txt .news ul li a { width: 86%;}
	#kv .inner-kv .txt .news ul li a dl dt { width: 80px;}
	#kv .inner-kv .txt .news ul li a dl dd { padding-left: 15px; font-size: 11px;}
	#kv .inner-kv .txt .news ul li a dl dd span.update { font-size: 10px;}
}
@media (max-width: 801px) {
	#kv .inner-kv { width: 100%; height: 100%;}
	#kv .inner-kv .txt { width: 100%; height: 100%;}
	#kv .inner-kv .txt .inner { position: relative; width: 100%; height: 100%;}
	#kv .inner-kv .txt .inner:after { width: 80px; height: 120px;}
	#kv .inner-kv .txt .news { position: absolute; left: 0; bottom: 50px; width: 100%;}

	#kv .note { bottom: 26vw;}

	#kv .bg-kv img.pc { display: none;}
	#kv .bg-kv img.sp { display: block;}
}
@media (max-width: 641px) {
	#kv .inner-kv .txt .news { bottom: 40px;}
	#kv .note { bottom: 26vw;}
}
@media (max-width: 481px) {
	#kv .inner-kv .txt .inner {}
	#kv .inner-kv .txt .inner:after { width: 60px; height: 100px; top: 12px; left: 8%;}
	#kv .note { bottom: 25vw;}
	#kv .inner-kv .txt .news { bottom: 0px;}
	#kv .inner-kv .txt .news ul li a { width: 100%; padding: 6px 10px; border-radius: 0px;  box-shadow: none; /* box-shadow: 0px 0px 8px #fdfbdc, 0px 0px 10px #fdfbdc, 0px 0px 20px #fdfbdc;*/}
	#kv .note ul li span { display: inline;}
}


.ttl { background: #faae29;}
.ttl h2 { padding: 16px 0; background: url('../../img/deep/bg-honey.png') no-repeat 50% 50% / auto 72%;
 color: white; font-size: 24px; font-weight: 400; text-align: center;}

.btn { width: 80%; max-width: 310px;}
.btn a { position: relative; display: block; padding: 4px; background: #6a3906; border-radius: 5px;
 color: #fff; font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 600; text-align: center; text-decoration: none;
 transition: opacity .5s ease;
}
.btn a span { display: block; width: 100%; padding: 10px 0; border: solid 1px #fff; border-radius: 4px;
 background: url('../../img/deep/icn-arw.svg') no-repeat 96% 50% / 12px auto;
}
.btn a:hover { opacity: 0.8;}
@media (max-width: 481px) {
	.ttl h2 { padding: 8px 0; font-size: 20px;}
	.btn a { padding: 3px; font-size: 14px; letter-spacing: 0.05rem;}
	.btn a span { padding: 8px 0; background-size: 9px auto;}
}


#award { background: #fff; border-bottom: solid 2px #fff;}
#award .award-tit { position: relative; padding: 4px 0; background: #fd7e00; cursor: pointer;}
#award .award-tit:after { content: ''; display: block; width: 15px; height: 15px; margin-left: 320px;
 border-bottom: solid 4px #fff; border-right: solid 4px #fff;
 position: absolute; left: 50%; top: 50%; transform: translateY(-70%) rotate(45deg); transition: 0.4s linear;
}
#award .award-tit.open:after { transform: translateY(-30%) rotate(-135deg);}
#award .award-tit h2 { padding: 16px 0; background: url('/img/deep/bg-honey.png') no-repeat 50% 50% / auto 72%;
 color: #fff; font-size: 24px; font-weight: 400; letter-spacing: 0.2rem; line-height: 1; text-align: center;
}
#award .award-tit h2:before,
#award .award-tit h2:after { content: ''; display: inline-block; width: 40px; height: 30px; vertical-align: middle;
 background: url('/img/deep/top/icn-award.png') no-repeat 50% 50% / 100% auto;
}
#award .award-tit h2 span { display: inline-block; margin: 0 20px; vertical-align: middle;}
#award .ctn { display: none;}
@media (max-width: 801px) {
	#award .award-tit:after { margin: 0px; left: auto; right: 5%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#award { border-bottom: solid 1px #fff;}
	#award .award-tit { padding: 4px 0;}
	#award .award-tit:after { width: 15px; height: 15px; border-width: 2px;}
	#award .award-tit h2 { padding: 8px 0; font-size: 20px; letter-spacing: 0rem;}
	#award .award-tit h2:before,
	#award .award-tit h2:after { width: 30px; height: 24px;}
	#award .award-tit h2 span { margin: 0 12px;}
}



#concept .ttl { background: #fd7e00;}
#concept .ctn { width: 100%; background: url('../../img/deep/top/bg/concept.png') no-repeat 50% 50% / cover;}
#concept .ctn .inner { width: 94%; margin: 0 auto; padding: 40px 0 80px;}
#concept .ctn h3 { opacity: 0; transition: 0.4s ease; text-align: center;}
#concept .ctn h3 img { position: relative; width: 65%; max-width: 420px;}
#concept .ctn ul { padding-top: 20px; text-align: center; opacity: 0; transition: 0.4s ease 0.2s;}
#concept .ctn ul li { padding: 20px 0;}
#concept .ctn ul li img { width: 65%; max-width: 350px;}
#concept.show .ctn h3,
#concept.show .ctn ul { opacity: 1;}
@media (max-width: 801px) {
	#concept .ctn .inner { padding: 40px 0 80px;}
}
@media (max-width: 641px) {
	#concept .ctn .inner { padding: 30px 0 60px;}
}
@media (max-width: 481px) {
	#concept .ctn .inner { padding: 20px 0 40px;}
	#concept .ctn ul { padding-top: 12px;}
	#concept .ctn ul li { padding: 10px 0;}
}


.sct-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.sct-bg .bg-txt { position: absolute; top: 20px; width: 100%; z-index: 5;}
.sct-bg .bg-txt div { position: relative; width: 100%; max-width: 1000px; margin: 0 auto;}
.sct-bg .bg-txt div img {}
.sct-bg .bg-txt div img.bg-and { position: relative; opacity: 0;}
.sct-bg .bg-txt div img.bg-txt-1 { position: absolute; left: 300px; top: 45%; max-width: calc(100% - 320px); opacity: 0;}

.sct-bg .bg-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.show .sct-bg .bg-txt div img.bg-and { animation: 2.0s linear fadeIn1 0.4s forwards;}
.show .sct-bg .bg-txt div img.bg-txt-1{ animation: 2.0s linear fadeIn1 0.4s forwards;}

.sct-bg .bg-img.bg-overlay-1 { opacity: 1; background: url('../../img/deep/top/bg/overlay-1.png') no-repeat 50% 50% / cover; z-index: 4;}
.sct-bg .bg-img.bg-overlay-2 { opacity: 0; background: url('../../img/deep/top/bg/overlay-2.png') no-repeat 50% 50% / cover; z-index: 2;}
@media (max-width: 801px) {
	.sct-bg .bg-txt div img.bg-and { width: 180px;}
	.sct-bg .bg-txt div img.bg-txt-1 { left: 180px;}
}
@media (max-width: 641px) {
	.sct-bg .bg-txt { display: none;}
}


@keyframes fadeIn1 {
  0% { opacity: 0;}
  60%{ opacity: 1;}
 100%{ opacity: 0.3;}
}
@keyframes fadeIn2 {
 100%{ opacity: 1;}
}
@keyframes fadeOut {
 100%{ opacity: 0;}
}


.sct1 { position: relative;}
.sct1 .inner-sct { position: relative; width: 92%; max-width: 1000px; margin: 0 auto; padding: 140px 0 100px; z-index: 10; opacity: 0;}
.sct1 .tit { margin-bottom: 40px;}
.sct1 .tit h2 { text-align: right;}
.sct1 .tit h2 img { width: 90%; max-width: 540px;}
.sct1 .ctn-flex { display: flex; justify-content: space-between; width: 100%; margin: 0 auto;}
.sct1 .txt { width: 40%;}
.sct1 .fig { width: 58%;}
.sct1 .txt h3 { margin-bottom: 45px; text-align: center;}
.sct1 .txt h3 img { width: 100%; max-width: 300px;}
.sct1 .txt h3 img.sp { display: none;}
.sct1 .txt p { margin-bottom: 20px; font-size: 18px; line-height: 2;}
.sct1 .txt p sup { vertical-align: top; font-size: 12px;}
.sct1 .txt ul.note { width: 100%; max-width: 180px; margin: 0 0 0 auto;}
.sct1 .txt ul.note li { font-size: 10px;}
.sct1 .txt figure { display: none;}
.sct1 .fig figure img { width: 100%;}

.sct1 .sct-bg .bg-img.bg-1a { opacity: 1; background: url('../../img/deep/top/bg/sct1-a.png') no-repeat 50% 50% / cover; z-index: 3;}
.sct1 .sct-bg .bg-img.bg-1b { opacity: 0; background: url('../../img/deep/top/bg/sct1-b.png') no-repeat 50% 50% / cover; z-index: 1;}

.sct1.show .inner-sct { animation: 2.0s linear fadeIn2 3.0s forwards;}
.sct1.show .sct-bg .bg-img.bg-1a { animation: 2.0s linear fadeOut 1.5s forwards;}
.sct1.show .sct-bg .bg-img.bg-overlay-1 { animation: 2.0s linear fadeOut 1.5s forwards;}
.sct1.show .sct-bg .bg-img.bg-1b { animation: 2.0s linear fadeIn2 2.0s forwards;}
.sct1.show .sct-bg .bg-img.bg-overlay-2 { animation: 2.0s linear fadeIn2 2.0s forwards;}
@media (max-width: 1001px) {
	.sct1 .txt { width: 50%;}
	.sct1 .fig { width: 50%;}
	.sct1 .txt p { font-size: 1.85vw;}
}
@media (max-width: 641px) {
	.sct1 .tit { margin-bottom: 20px;}
	.sct1 .tit h2 { text-align: center;}
	.sct1 .ctn-flex { display: block;}
	.sct1 .txt { width: 100%;}
	.sct1 .fig { display: none;}
	.sct1 .txt h3 { margin-bottom: 20px;}
	.sct1 .txt h3 img.pc { display: none;}
	.sct1 .txt h3 img.sp { display: block; width: 100%; max-width: 100%;}
	.sct1 .txt p { font-size: 16px; text-align: left;}
	.sct1 .txt figure { display: block; margin-bottom: 20px; text-align: center;}
	.sct1 .txt figure img { width: 85%;}

	.sct1 .sct-bg .bg-img.bg-1a { background: url('../../img/deep/top/bg/sct1-a-sp.png') no-repeat 50% 0% / cover;}
	.sct1 .sct-bg .bg-img.bg-1b { background: url('../../img/deep/top/bg/sct1-b-sp.png') no-repeat 50% 0% / cover;}
	.sct1 .sct-bg .bg-img.bg-overlay-1,
	.sct1 .sct-bg .bg-img.bg-overlay-2 { display: none;}

	.sct1.show .inner-sct { animation: 1.5s linear fadeIn2 2.0s forwards;}
	.sct1.show .sct-bg .bg-img.bg-1a { animation: 1.5s linear fadeOut 0.5s forwards;}
	.sct1.show .sct-bg .bg-img.bg-1b { animation: 1.5s linear fadeIn2 1.0s forwards;}
}
@media (max-width: 481px) {
	.sct1 .inner-sct { padding: 60px 0 40px;}
	.sct1 .txt p { width: 90%; margin: 0 auto 20px; font-size: 13px;}
	.sct1 .txt ul.note li { font-size: 10px;}
}


.sct2 { position: relative;}
.sct2 .inner-sct { position: relative; width: 92%; max-width: 1000px; margin: 0 auto; padding: 140px 0 100px; z-index: 10; opacity: 0;}
.sct2 .tit { margin-bottom: 40px;}
.sct2 .tit h2 { text-align: right;}
.sct2 .tit h2 img { width: 90%; max-width: 540px;}
.sct2 .ctn-1 { min-height: 550px; position: absolute; opacity: 0;}
.sct2 .ctn-2 { min-height: 550px; position: absolute; opacity: 0;}

.sct2 .ctn-1.def { position: relative; opacity: 1;}
.sct2 .ctn-1.show { position: relative; animation: 0.4s linear fadeIn2 0.4s forwards;}
.sct2 .ctn-2.show { position: relative; animation: 0.4s linear fadeIn2 0.4s forwards;}

.sct2 .ctn-flex { display: flex; justify-content: space-between; width: 92%; margin: 0 auto;}
.sct2 .txt1 { width: 40%;}
.sct2 .fig1 { position: relative; width: 58%;}
.sct2 .txt1 h3 { margin-bottom: 30px; font-weight: 400;}
.sct2 .txt1 h3 img { width: 100%; max-width: 340px;}
.sct2 .txt1 h3 img.sp { display: none;}
.sct2 .txt1 h3 span.note { display: block; margin-top: 5px; font-size: 12px;}
.sct2 .txt1 p { font-size: 18px; line-height: 2; }
.sct2 .txt1 p sup { vertical-align: super; font-size: 12px;}
.sct2 .txt1 p span { display: block;}
.sct2 .txt1 p.tips { margin-bottom: 30px; font-size: 24px; font-weight: 700; line-height: 1.5;}
.sct2 .txt1 p.pc { margin-bottom: 30px;}
.sct2 .txt1 ul.note li { font-size: 10px;}

.sct2 .fig1 figure img { width: 100%;}
.sct2 .fig1 .btn1 { position: absolute; left: 0%; top: 200px; width: 55%; max-width: 300px; cursor: pointer;}
.sct2 .fig1 .btn1 div { width: 92%; max-width: 240px; margin: 0 auto;}
.sct2 .fig1 .btn1 img { width: 100%;}
.sct2 .fig1 .btn1:hover { opacity: 0.8;}
.sct2 .fig1 p { display: none;}
.sct2 .fig1 ul.note { display: none;}
.sct2 .fig1 ul.note li { font-size: 10px;}


.sct2 .txt2 { width: 52%;}
.sct2 .fig2 { width: 48%;}
.sct2 .txt2 h3 { margin-bottom: 30px; font-weight: 400;}
.sct2 .txt2 h3 img { width: 100%; max-width: 450px;}
.sct2 .txt2 p { margin-bottom: 20px; font-size: 18px; line-height: 2;}
.sct2 .txt2 p span { display: block;}
.sct2 .txt2 p.tips{ margin-bottom: 20px; font-size: 24px; font-weight: 700; line-height: 1.5;}
.sct2 .txt2 p sup { vertical-align: super; font-size: 12px;}
.sct2 .txt2 figure { display: none;}
.sct2 .txt2 .btn2 { width: 190px; margin: 0 auto; cursor: pointer;}
.sct2 .txt2 .btn2 img { width: 100%;}
.sct2 .txt2 .btn2:hover { opacity: 0.8;}
.sct2 .txt2 ul.note { margin-bottom: 20px;}
.sct2 .txt2 ul.note li { font-size: 10px;}

.sct2 .fig2 figure figcaption { font-size: 12px; }
.sct2 .fig2 figure img { width: 100%;}

.sct2 .sct-bg .bg-img.bg-2a { opacity: 1; background: url('../../img/deep/top/bg/sct2-a.png') no-repeat 50% 50% / cover; z-index: 3;}
.sct2 .sct-bg .bg-img.bg-2b { opacity: 0; background: url('../../img/deep/top/bg/sct2-b.png') no-repeat 50% 50% / cover; z-index: 1;}

.sct2.show .inner-sct { animation: 2.0s linear fadeIn2 3.0s forwards;}
.sct2.show .sct-bg .bg-img.bg-2a { animation: 2.0s linear fadeOut 1.5s forwards;}
.sct2.show .sct-bg .bg-img.bg-overlay-1 { animation: 2.0s linear fadeOut 1.5s forwards;}
.sct2.show .sct-bg .bg-img.bg-2b { animation: 2.0s linear fadeIn2 2.0s forwards;}
.sct2.show .sct-bg .bg-img.bg-overlay-2 { animation: 2.0s linear fadeIn2 2.0s forwards;}
@media (max-width: 1001px) {
	.sct2 .ctn-1 { min-height: 500px;}
	.sct2 .ctn-2 { min-height: 500px;}
	.sct2 .fig1 .btn1 { top: 30%;}

	.sct2 .txt1 p { font-size: 1.85vw;}
	.sct2 .txt1 p.txt { margin-bottom: 20px; font-size: 2.4vw;}

	.sct2 .txt2 { width: 58%;}
	.sct2 .fig2 { width: 42%;}
	.sct2 .txt2 p { font-size: 1.85vw;}
	.sct2 .txt2 p.txt { font-size: 2.4vw;}
}
@media (max-width: 801px) {
	.sct2 .ctn-1 { min-height: 400px;}
	.sct2 .ctn-2 { min-height: 400px;}
	.sct2 .fig1 .btn1 { top: 25%;}
	.sct2 .fig1 .btn1 div {}
}
@media (max-width: 641px) {
	.sct2 .tit { margin-bottom: 20px;}
	.sct2 .tit h2 { text-align: center;}

	.sct2 .ctn-1 { min-height: 850px;}
	.sct2 .ctn-2 { min-height: 850px;}

	.sct2 .ctn-flex { display: block;}
	.sct2 .txt1 { width: 100%; margin: 0 auto 20px;}
	.sct2 .fig1 { width: 100%;}

	.sct2 .txt1 h3 { margin-bottom: 20px; text-align: left;}
	.sct2 .txt1 h3 img.pc { display: none;}
	.sct2 .txt1 h3 img.sp { display: block; max-width: 100%;}
	.sct2 .txt1 p { font-size: 16px; line-height: 1.85; text-align: left;}
	.sct2 .txt1 p.txt { margin-bottom: 20px; font-size: 24px;}
	.sct2 .txt1 p.pc { display: none;}
	.sct2 .txt1 ul.note { display: none;}

	.sct2 .fig1 figure { margin-bottom: 10px;}
	.sct2 .fig1 p { display: block; margin-bottom: 30px; font-size: 16px; line-height: 1.85; text-align: left;}
	.sct2 .fig1 p sup { font-size: 10px; vertical-align: super;}
	.sct2 .fig1 .btn1 { top: 28%;}
	.sct2 .fig1 .btn1 div { max-width: 240px;}
	.sct2 .fig1 ul.note { display: block;}


	.sct2 .txt2 { width: 100%;}
	.sct2 .fig2 { display: none;}
	.sct2 .txt2 h3 { text-align: left;}
	.sct2 .txt2 p { margin-bottom: 20px; font-size: 16px; line-height: 1.85; text-align: left;}
	.sct2 .txt2 p.txt { font-size: 24px;}
	.sct2 .txt2 p span { display: inline;}

	.sct2 .txt2 figure { display: block; width: 100%; margin: 0 auto 20px; text-align: center;}
	.sct2 .txt2 figure img { width: 80%; max-width: 420px;}

	.sct2 .sct-bg .bg-img.bg-2a { background: url('../../img/deep/top/bg/sct2-a-sp.png') no-repeat 50% 0% / cover;}
	.sct2 .sct-bg .bg-img.bg-2b { background: url('../../img/deep/top/bg/sct2-b-sp.png') no-repeat 50% 0% / cover;}
	.sct2 .sct-bg .bg-img.bg-overlay-1,
	.sct2 .sct-bg .bg-img.bg-overlay-2 { display: none;}

	.sct2.show .inner-sct { animation: 1.5s linear fadeIn2 2.0s forwards;}
	.sct2.show .sct-bg .bg-img.bg-2a { animation: 1.5s linear fadeOut 0.5s forwards;}
	.sct2.show .sct-bg .bg-img.bg-2b { animation: 1.5s linear fadeIn2 1.0s forwards;}
}
@media (max-width: 481px) {
	.sct2 .inner-sct { padding: 60px 0 40px;}
	.sct2 .ctn-1 { min-height: 600px;}
	.sct2 .ctn-2 { min-height: 600px;}
	.sct2 .txt1 h3 span.note { margin-top: 2px; font-size: 11px;}
	.sct2 .txt1 p { font-size: 14px;}
	.sct2 .txt1 p.tips { font-size: 21px;}
	.sct2 .txt1 p.txt { font-size: 20px;}
	.sct2 .txt1 p sup { font-size: 10px;}

	.sct2 .fig1 p { margin-bottom: 20px; font-size: 13px;}
	.sct2 .fig1 .btn1 { top: 21%;}
	
	.sct2 .txt2 p { margin-bottom: 15px; font-size: 14px;}
	.sct2 .txt2 p.tips { font-size: 21px;}
	.sct2 .txt2 p.note { font-size: 10px;}
	.sct2 .txt2 figure { margin: 0 auto 12px;}
	.sct2 .txt2 .btn2 { width: 120px; margin: 0;}
}



.sct3 { position: relative;}
.sct3 .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 140px 0 100px; z-index: 10; opacity: 0;}
.sct3 .tit { width: 92%; max-width: 1000px; margin: 0 auto 60px;}
.sct3 .tit h2 { text-align: right;}
.sct3 .tit h2 img { width: 85%; max-width: 900px;}
.sct3 .tit h2 img.sp { display: none;}
.sct3 .ctn { position: relative; width: 100%; padding-bottom: 80px; background: url('../../img/deep/top/sct3-fig.png') no-repeat 92% 50% / auto 100%;;}
.sct3 .ctn .inner { width: 100%; max-width: 1000px; margin: 0 auto;}
.sct3 .ctn .txt { margin: 0 auto 40px; padding-right: 150px;}
.sct3 .ctn .txt h3 { margin-bottom: 30px; text-align: center;}
.sct3 .ctn .txt h3 img { width: 100%; max-width: 500px;}
.sct3 .ctn .txt p { font-size: 18px; text-align: center;}
.sct3 .ctn .txt p.tips { margin-bottom: 20px; font-size: 24px; font-weight: 700; text-align: center;}

.sct3 .ctn .free { width: 100%; max-width: 720px;}

.sct3 .ctn .free h4 { position: relative; margin-bottom: 20px; padding-left: 260px; color: #4e3824; font-size: 18px;}
.sct3 .ctn .free h4:before { content: ''; display: block; width: 240px; height: 60px;
 background: url('../../img/deep/top/sct3-free.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
.sct3 .ctn .free ul { font-size: 0; text-align: center;}
.sct3 .ctn .free ul li { display: inline-block; height: 70px; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; vertical-align: middle;}
.sct3 .ctn .free ul li span { display: block; font-size: 13px;}
.sct3 .ctn .free ul li:nth-child(1){ width: 25.6%; padding-top: 10px; background: url('../../img/deep/top/bg/free-1.png') no-repeat 50% 50% / 100% auto;}
.sct3 .ctn .free ul li:nth-child(2){ width: 14%; padding-top: 20px; background: url('../../img/deep/top/bg/free-2.png') no-repeat 50% 50% / 100% auto;}
.sct3 .ctn .free ul li:nth-child(3){ width: 14%; padding-top: 20px; background: url('../../img/deep/top/bg/free-3.png') no-repeat 50% 50% / 100% auto;}
.sct3 .ctn .free ul li:nth-child(4){ width: 12%; padding-top: 20px; background: url('../../img/deep/top/bg/free-4.png') no-repeat 50% 50% / 100% auto;}
.sct3 .ctn .free ul li:nth-child(5){ width: 19%; padding-top: 20px; background: url('../../img/deep/top/bg/free-5.png') no-repeat 50% 50% / 100% auto;}
.sct3 .ctn .free ul li:nth-child(6){ width: 14%; padding-top: 10px; background: url('../../img/deep/top/bg/free-6.png') no-repeat 50% 50% / 100% auto;}
.sct3 .ctn .free ul li sup { font-size: 10px; vertical-align: super;}
.sct3 .ctn .free p { display: none; text-align: center;}

.sct3 .ctn ul.note { position: absolute; right: 3%; bottom: -60px; width: 100%; max-width: 200px;}
.sct3 .ctn ul.note li { font-size: 10px; }

.sct3 .sct-bg .bg-img.bg-3a { opacity: 1; background: url('../../img/deep/top/bg/sct3-a.png') no-repeat 50% 50% / cover; z-index: 3;}
.sct3 .sct-bg .bg-img.bg-3b { opacity: 0; background: url('../../img/deep/top/bg/sct3-b.png') no-repeat 50% 50% / cover; z-index: 1;}

.sct3.show .inner-sct { animation: 2.0s linear fadeIn2 3.0s forwards;}
.sct3.show .sct-bg .bg-img.bg-3a { animation: 2.0s linear fadeOut 1.5s forwards;}
.sct3.show .sct-bg .bg-img.bg-overlay-1 { animation: 2.0s linear fadeOut 1.5s forwards;}
.sct3.show .sct-bg .bg-img.bg-3b { animation: 2.0s linear fadeIn2 2.0s forwards;}
.sct3.show .sct-bg .bg-img.bg-overlay-2 { animation: 2.0s linear fadeIn2 2.0s forwards;}
@media (max-width: 1001px) {
	.sct3 .ctn { background-size: 220px auto; background-position: 96% 50%;}
	.sct3 .ctn .inner { padding-left: 30px; padding-right: 280px;}
	.sct3 .ctn .txt p { text-align: left;}
	.sct3 .ctn .free h4 { margin-bottom: 10px; padding: 0px;}
	.sct3 .ctn .free h4:before { position: relative; left: auto; top: auto; transform: translateY(0%); margin-bottom: 8px;}
	.sct3 .ctn .free ul { }
	.sct3 .ctn .free ul li:nth-child(1){ width: 45%; padding-top: 12px; background-size: auto 100%;}
	.sct3 .ctn .free ul li:nth-child(2){ width: 25%; background-size: auto 100%;}
	.sct3 .ctn .free ul li:nth-child(3){ width: 25%; background-size: auto 100%;}
	.sct3 .ctn .free ul li:nth-child(4){ width: 25%; background-size: auto 100%;}
	.sct3 .ctn .free ul li:nth-child(5){ width: 40%;  background-size: auto 100%;}
	.sct3 .ctn .free ul li:nth-child(6){ width: 30%; padding-top: 12px; background-size: auto 100%;}
}
@media (max-width: 801px) {
	.sct3 .ctn { padding-bottom: 0;}
}
@media (max-width: 641px) {
	.sct3 .tit { margin-bottom: 20px;}
	.sct3 .tit h2 { text-align: center;}
	.sct3 .ctn { padding-bottom: 0; background-size: 200px auto; background-position: 96% 40%}
	.sct3 .ctn .inner { margin-bottom: 20px; padding: 0 30px;}
	.sct3 .ctn .txt { margin: 0 0 30px;}
	.sct3 .ctn .txt p { width: 92%;}
	.sct3 .ctn .txt p.tips { text-align: left;}
	.sct3 .ctn .txt p.tips span { display: block;}
	.sct3 .ctn .free h4 span { display: block;}
	.sct3 .ctn .free ul { display: none;}
	.sct3 .ctn .free p { display: block;}
	.sct3 .ctn .free p img { width: 80%; margin: 0 auto;}

	.sct3 .ctn ul.note { position: relative; right: auto; bottom: auto; width: 100%; max-width: 190px; margin: 0 0 0 auto;}

	.sct3 .sct-bg .bg-img.bg-3a { background: url('../../img/deep/top/bg/sct3-a-sp.png') no-repeat 50% 0% / cover;}
	.sct3 .sct-bg .bg-img.bg-3b { background: url('../../img/deep/top/bg/sct3-b-sp.png') no-repeat 50% 0% / cover;}
	.sct3 .sct-bg .bg-img.bg-overlay-1,
	.sct3 .sct-bg .bg-img.bg-overlay-2 { display: none;}

	.sct3.show .inner-sct { animation: 1.5s linear fadeIn2 2.0s forwards;}
	.sct3.show .sct-bg .bg-img.bg-3a { animation: 1.5s linear fadeOut 0.5s forwards;}
	.sct3.show .sct-bg .bg-img.bg-3b { animation: 1.5s linear fadeIn2 1.0s forwards;}
}
@media (max-width: 481px) {
	.sct3 .inner-sct { padding: 60px 0 40px;}
	.sct3 .tit h2 img.pc { display: none;}
	.sct3 .tit h2 img.sp { display: block; margin: 0 auto;}
	.sct3 .ctn { background-size: 120px auto; background-position: 96% 30%}
	.sct3 .ctn .txt { margin: 0 0 20px; padding-right: 80px;}
	.sct3 .ctn .txt h3 { margin-bottom: 20px;}
	.sct3 .ctn .txt p { max-width: 210px; font-size: 13px;}
	.sct3 .ctn .txt p.tips { margin-bottom: 10px; font-size: 20px;}
	.sct3 .ctn .free h4 { font-size: 14px;}
	.sct3 .ctn .free h4:before { width: 140px; height: 40px;}
	.sct3 .ctn .free h4 span { display: inline;}
	.sct3 .ctn p.note { bottom: -30px; font-size: 10px;}
}


.sct4 { position: relative;}
.sct4 .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 140px 0 80px; z-index: 10; opacity: 0;}
.sct4 .tit { width: 92%; max-width: 1000px; margin: 0 auto 60px;}
.sct4 .tit h2 { text-align: right;}
.sct4 .tit h2 img { width: 90%; max-width: 640px;}
.sct4 .ctn { width: 100%; background: url('../../img/deep/top/sct4-fig.png') no-repeat 0 100%;}
.sct4 .ctn .inner { width: 100%; max-width: 1000px; margin: 0 auto; padding-left: 260px;}
.sct4 .ctn .txt { margin: 0 auto 40px;}
.sct4 .ctn .txt h3 { margin-bottom: 30px; text-align: center;}
.sct4 .ctn .txt h3 img { width: 100%; max-width: 540px;}
.sct4 .ctn .txt p { font-size: 18px; text-align: center;}
.sct4 .ctn .txt p.tips { margin-bottom: 20px; font-size: 24px; font-weight: 700; text-align: center;}
.sct4 .ctn .txt p em { font-style: normal; text-decoration: underline;}
.sct4 .ctn .movie { width: 100%; max-width: 680px; margin: 0 auto; padding: 30px 0; padding-left: 40px; border-radius: 10px; background: url('../../img/deep/top/bg/movie.png') no-repeat 100% 50% / cover;}

.sct4 .ctn .movie h4 { margin-bottom: 10px; padding-bottom: 10px; background: url('../../img/deep/top/line-dot.png') no-repeat 0 100%;
 color: #4e3824; font-size: 20px;
}
.sct4 .ctn .movie h4 br { display: none;}
.sct4 .ctn .movie p { color: #4e3824; text-shadow: 0 0 8px #fff,0 0 8px #fff;}
.sct4 .ctn .movie p.mb { margin-bottom: 6px;}
.sct4 .ctn .movie p a { padding-left: 35px; background: url('../../img/deep/top/icn-movie.png') no-repeat 0 50% / 26px auto; color: #4e3824;}
.sct4 .ctn .movie p a span { display: inline-block; padding: 2px; border-bottom: solid 1px #4e3824; font-weight: 700; letter-spacing: 0.05rem;}
.sct4 .ctn .movie p a:hover span { border-color: transparent;}

.sct4 .sct-bg .bg-img.bg-4a { opacity: 1; background: url('../../img/deep/top/bg/sct4-a.png') no-repeat 50% 50% / cover; z-index: 3;}
.sct4 .sct-bg .bg-img.bg-4b { opacity: 0; background: url('../../img/deep/top/bg/sct4-b.png') no-repeat 50% 50% / cover; z-index: 1;}

.sct4.show .inner-sct { animation: 2.0s linear fadeIn2 3.0s forwards;}
.sct4.show .sct-bg .bg-img.bg-4a { animation: 2.0s linear fadeOut 1.5s forwards;}
.sct4.show .sct-bg .bg-img.bg-overlay-1 { animation: 2.0s linear fadeOut 1.5s forwards;}
.sct4.show .sct-bg .bg-img.bg-4b { animation: 2.0s linear fadeIn2 2.0s forwards;}
.sct4.show .sct-bg .bg-img.bg-overlay-2 { animation: 2.0s linear fadeIn2 2.0s forwards;}
@media (max-width: 1001px) {
	.sct4 .ctn { background-size: 300px auto;}
	.sct4 .ctn .txt { margin: 0 auto 20px;}
	.sct4 .ctn .txt h3 { margin-bottom: 15px;}
	.sct4 .ctn .txt p { font-size: 1.85vw; text-align: left;}
	.sct4 .ctn .txt p.tips { margin-bottom: 10px;}
	.sct4 .ctn .movie h4 { font-size: 2.0vw;}
	.sct4 .ctn .movie p { font-size: 1.85vw;}
}
@media (max-width: 801px) {
	.sct4 .ctn { background-size: 240px auto;}
	.sct4 .ctn .inner { padding-left: 220px;}
}
@media (max-width: 641px) {
	.sct4 .tit { margin-bottom: 20px;}
	.sct4 .tit h2 { text-align: center;}
	.sct4 .ctn { background-size: 240px auto; background-position: -20px 100px;}
	.sct4 .ctn .inner { padding: 0 40px;}
	.sct4 .ctn .txt { margin: 0 auto 90px;}
	.sct4 .ctn .txt h3 { margin-bottom: 30px;}
	.sct4 .ctn .txt p { padding-left: 200px; font-size: 14px;}
	.sct4 .ctn .txt p.tips { text-align: left;}
	.sct4 .ctn .movie { padding: 20px; background-position: 90% 50%;}
	.sct4 .ctn .movie h4 { font-size: 16px;}
	.sct4 .ctn .movie p { font-size: 14px;}
	.sct4 .ctn .movie p a { background-size: 20px auto;}

	.sct4 .sct-bg .bg-img.bg-4a { background: url('../../img/deep/top/bg/sct4-a-sp.png') no-repeat 50% 0% / cover;}
	.sct4 .sct-bg .bg-img.bg-4b { background: url('../../img/deep/top/bg/sct4-b-sp.png') no-repeat 50% 0% / cover;}
	.sct4 .sct-bg .bg-img.bg-overlay-1,
	.sct4 .sct-bg .bg-img.bg-overlay-2 { display: none;}

	.sct4.show .inner-sct { animation: 1.5s linear fadeIn2 2.0s forwards;}
	.sct4.show .sct-bg .bg-img.bg-4a { animation: 1.5s linear fadeOut 0.5s forwards;}
	.sct4.show .sct-bg .bg-img.bg-4b { animation: 1.5s linear fadeIn2 1.0s forwards;}
}
@media (max-width: 481px) {
	.sct4 .inner-sct { padding: 60px 0 40px;}
	.sct4 .ctn { background-size: 190px auto; background-position: -36px 80px;}
	.sct4 .ctn .inner { padding: 0 15px;}
	.sct4 .ctn .txt { margin: 0 auto 50px;}
	.sct4 .ctn .txt p { padding-left: 120px; font-size: 13px;}
	.sct4 .ctn .txt p.tips { font-size: 20px;}

	.sct4 .ctn .movie { padding: 12px; padding-right: 120px;}
	.sct4 .ctn .movie h4 { font-size: 14px; line-height: 1.4;}
	.sct4 .ctn .movie h4 br { display: block;}
	.sct4 .ctn .movie p { font-size: 12px; line-height: 1.5;}
	.sct4 .ctn .movie p br { display: none;}
	.sct4 .ctn .movie p a { padding-left: 28px;}
}



.sct5 { position: relative;}
.sct5 .inner-sct { position: relative; width: 92%; max-width: 1000px; margin: 0 auto; padding: 140px 0 80px; z-index: 10; opacity: 0;}
.sct5 .tit { width: 100%; max-width: 1000px; margin: 0 auto 60px;}
.sct5 .tit h2 { text-align: right;}
.sct5 .tit h2 img { width: 90%; max-width: 750px;}
.sct5 .tit h2 img.sp { display: none;}
.sct5 .ctn { margin-bottom: 20px;}
.sct5 .ctn h3 { margin-bottom: 30px; padding-left: 240px; text-align: center;}
.sct5 .ctn h3 img { width: 100%;}
.sct5 .ctn h3 img.sp { display: none;}
.sct5 .ctn ul { width: 100%; margin: 0 auto; font-size: 0px; text-align: center;}
.sct5 .ctn ul li { display: inline-block; vertical-align: top;}
.sct5 .ctn ul li:nth-child(1) { width: 24.6%;}
.sct5 .ctn ul li:nth-child(2) { width: 23.6%;}
.sct5 .ctn ul li:nth-child(3) { width: 26.8%;}
.sct5 .ctn ul li:nth-child(4) { width: 24.6%;}
.sct5 .ctn ul li img { width: 96%;}
.sct5 .ctn p { display: none;}
.sct5 ul.note { width: 96%; margin: 0 auto;}
.sct5 ul.note li { font-size: 10px; text-align: right;}

.sct5 .sct-bg .bg-img.bg-5a { opacity: 1; background: url('../../img/deep/top/bg/sct5-a.jpg') no-repeat 50% 50% / cover; z-index: 3;}
.sct5 .sct-bg .bg-img.bg-5b { opacity: 0; background: url('../../img/deep/top/bg/sct5-b.jpg') no-repeat 50% 50% / cover; z-index: 1;}

.sct5.show .inner-sct { animation: 2.0s linear fadeIn2 3.0s forwards;}
.sct5.show .sct-bg .bg-img.bg-5a { animation: 2.0s linear fadeOut 1.5s forwards;}
.sct5.show .sct-bg .bg-img.bg-overlay-1 { animation: 2.0s linear fadeOut 1.5s forwards;}
.sct5.show .sct-bg .bg-img.bg-5b { animation: 2.0s linear fadeIn2 2.0s forwards;}
@media (max-width: 1001px) {
	.sct5 .ctn h3 { padding-left: 180px;}
}
@media (max-width: 641px) {
	.sct5 .tit { margin-bottom: 20px;}
	.sct5 .tit h2 { text-align: center;}
	.sct5 .tit h2 img.pc { display: none;}
	.sct5 .tit h2 img.sp { display: block;}
	.sct5 .ctn h3 { margin-bottom: 20px; padding-left: 0px;}
	.sct5 .ctn h3 img.pc { display: none;}
	.sct5 .ctn h3 img.sp { display: block;}
	.sct5 .ctn ul { display: none;}
	.sct5 .ctn p { display: block;}
	.sct5 .ctn p img { width: 100%;}

	.sct5 .sct-bg .bg-img.bg-5a { background: url('../../img/deep/top/bg/sct5-a-sp.jpg') no-repeat 50% 0% / cover;}
	.sct5 .sct-bg .bg-img.bg-5b { background: url('../../img/deep/top/bg/sct5-b-sp.jpg') no-repeat 50% 0% / cover;}
	.sct5 .sct-bg .bg-img.bg-overlay-1,
	.sct5 .sct-bg .bg-img.bg-overlay-2 { display: none;}

	.sct5.show .inner-sct { animation: 1.5s linear fadeIn2 2.0s forwards;}
	.sct5.show .sct-bg .bg-img.bg-5a { animation: 1.5s linear fadeOut 0.5s forwards;}
	.sct5.show .sct-bg .bg-img.bg-5b { animation: 1.5s linear fadeIn2 1.0s forwards;}
}
@media (max-width: 481px) {
	.sct5 .inner-sct { padding: 60px 0 40px;}
	.sct5 .tit h2 img.sp { margin: 0 auto;}
	.sct5 .ctn { margin-bottom: 12px;}
}


.sct6 { position: relative;}
.sct6 .inner-sct { position: relative; width: 92%; max-width: 1280px; margin: 0 auto; padding: 140px 0 60px; z-index: 10; opacity: 0;}
.sct6 .tit { width: 100%; max-width: 1000px; margin: 0 auto 60px;}
.sct6 .tit h2 { text-align: right;}
.sct6 .tit h2 img { width: 90%; max-width: 750px;}
.sct6 .tit h2 img.sp { display: none;}
.sct6 .ctn { width: 100%; max-width: 1000px; margin: 0 auto; padding-bottom: 100px; background: url('../../img/deep/top/bg/flavor.png') no-repeat 50% 100% / 100% auto;}
.sct6 .ctn h3 { margin-bottom: 30px; text-align: center;}
.sct6 .ctn h3 img { width: 100%;}
.sct6 .ctn h3 img.sp { display: none;}
.sct6 .ctn ul { width: 94%; margin: 0 auto; font-size: 0px; text-align: center;}
.sct6 .ctn ul li { display: inline-block; width: 25%;}
.sct6 .ctn ul li img { width: 94%; max-width: 200px;}
.sct6 .ctn p { display: none; text-align: right;}

.sct6 .sct-bg .bg-img.bg-6a { opacity: 1; background: url('../../img/deep/top/bg/sct6-a.png') no-repeat 50% 50% / cover; z-index: 3;}
.sct6 .sct-bg .bg-img.bg-6b { opacity: 0; background: url('../../img/deep/top/bg/sct6-b.png') no-repeat 50% 50% / cover; z-index: 1;}

.sct6.show .inner-sct { animation: 2.0s linear fadeIn2 3.0s forwards;}
.sct6.show .sct-bg .bg-img.bg-6a { animation: 2.0s linear fadeOut 1.5s forwards;}
.sct6.show .sct-bg .bg-img.bg-overlay-1 { animation: 2.0s linear fadeOut 1.5s forwards;}
.sct6.show .sct-bg .bg-img.bg-6b { animation: 2.0s linear fadeIn2 2.0s forwards;}
.sct6.show .sct-bg .bg-img.bg-overlay-2 { animation: 2.0s linear fadeIn2 2.0s forwards;}
@media (max-width: 641px) {
	.sct6 .tit { margin-bottom: 20px;}
	.sct6 .tit h2 { text-align: center;}
	.sct6 .tit h2 img.pc { display: none;}
	.sct6 .tit h2 img.sp { display: block;}
	.sct6 .ctn { padding: 0; background: none;}
	.sct6 .ctn h3 img.pc { display: none;}
	.sct6 .ctn h3 img.sp { display: block;}
	.sct6 .ctn ul { display: none;}
	.sct6 .ctn p { display: block; text-align: center;}
	.sct6 .ctn p img { width: 98%;}

	.sct6 .sct-bg .bg-img.bg-6a { background: url('../../img/deep/top/bg/sct6-a-sp.png') no-repeat 50% 0% / cover;}
	.sct6 .sct-bg .bg-img.bg-6b { background: url('../../img/deep/top/bg/sct6-b-sp.png') no-repeat 50% 0% / cover;}
	.sct6 .sct-bg .bg-img.bg-overlay-1,
	.sct6 .sct-bg .bg-img.bg-overlay-2 { display: none;}

	.sct6.show .inner-sct { animation: 1.5s linear fadeIn2 2.0s forwards;}
	.sct6.show .sct-bg .bg-img.bg-6a { animation: 1.5s linear fadeOut 0.5s forwards;}
	.sct6.show .sct-bg .bg-img.bg-6b { animation: 1.5s linear fadeIn2 1.0s forwards;}
}
@media (max-width: 481px) {
	.sct6 .inner-sct { padding: 60px 0 40px;}
	.sct6 .tit h2 img.sp { width: 75%; margin: 0 auto;}
	.sct6 .ctn h3 { margin-bottom: 12px;}
	.sct6 .ctn p { text-align: right;}
}



#series .bg{ background: url('../../img/deep/top/bg/select.jpg') no-repeat 50% 50% / cover;}
#series .inner-sct { width: 96%; max-width: 1200px; margin: 0 auto; padding: 50px 0 70px;}
#series h2 { margin-bottom: 30px; text-align: center;}
#series h2 img { width: 80%; max-width: 560px;}
#series p { margin-bottom: 40px; color: #4e3824; font-size: 21px; font-weight: 400; text-align: center;}
@media (max-width: 801px) {
	#series .inner-sct { width: 100%;}
}
@media (max-width: 641px) {
	#series p span { display: block;}
}
@media (max-width: 481px) {
	#series .inner-sct { padding: 40px 0;}
	#series p { margin-bottom: 20px; font-size: 16px;}
}



#product .ctn { position: relative; background: url('../../img/deep/top/bg/lineup.jpg') no-repeat 50% 0% / cover; opacity: 0; transition: 0.4s linear;}
#product .ctn .ctn-inner { position: relative; width: 90%; height: 900px; margin: 0 auto;}
#product .ctn .inner { position: relative; width: 50%; margin: 0 0 0 auto; padding-top: 100px;}
#product .ctn h3 { margin-bottom: 20px;}
#product .ctn h3 img { width: 100%; max-width: 480px;}
#product .ctn h3 img.sp { display: none;}
#product.show .ctn { opacity: 1;}
@media (max-width: 1001px) {
	#product .ctn .ctn-inner { height: 800px;}
}
@media (max-width: 801px) {
	#product .ctn .ctn-inner { height: 600px;}
}
@media (max-width: 641px) {
	#product .ctn { height: 0px; padding-top: 140%; background: url('../../img/deep/top/bg/lineup-sp.jpg') no-repeat 50% 50% / 100% auto;}
	#product .ctn .ctn-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
	#product .ctn .inner { width: 100%; height: 100%; margin: 0 auto;}
	#product .ctn h3 { text-align: center;}
	#product .ctn h3 img.pc { display: none;}
	#product .ctn h3 img.sp { display: block; width: 78%; margin: 0 auto;}
	#product .ctn .btn { position: absolute; left: 0; bottom: 40px; width: 100%; max-width: 100%;}
	#product .ctn .btn a { width: 80%; max-width: 310px; margin: 0 auto;}
}
@media (max-width: 481px) {
	#product .ctn { padding-top: 120%;}
	#product .ctn .inner { padding-top: 30px;}
	#product .ctn .btn { bottom: 30px;}
}


#shop .ctn { background: url('../../img/deep/top/bg/shop.jpg') no-repeat 50% 50% / cover; opacity: 0; transition: 0.4s linear;}
#shop .ctn .inner { padding: 86px 0 120px;}
#shop .ctn h3 { margin-bottom: 20px;
 color: #4e3824; font-family: 'Noto Serif JP', serif; font-size: 34px;font-weight: 400; letter-spacing: 2px; line-height: 1.2; text-align: center;
}
#shop .ctn p { margin-bottom: 40px; color: #4e3824; font-family: 'Noto-Sans-Cjk-JP', 'Sans-Serif'; font-size: 16px; letter-spacing: 0.1em; text-align: center;
}
#shop .btn { margin: 0 auto;}
#shop.show .ctn { opacity: 1;}
@media all and (max-width: 641px) {
	#shop .ctn .inner { padding: 80px 0;}
	#shop .ctn h3 { font-size: 5.0vw;}
	#shop .ctn h3 span { display: block;}
	#shop .ctn p { font-size: 14px;}
}
@media all and (max-width: 481px) {
	#shop .ctn .inner { padding: 50px 0;}
	#shop .ctn h3 { margin-bottom: 12px; font-size: 21px;}
	#shop .ctn p { margin-bottom: 20px; font-size: 12px;}
}