@charset "utf-8";
/* --------------------------------------------------
	reset
-------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

img{ vertical-align: bottom;}
ul{ list-style: none;}
ul li{ list-style-type: none;}
figure { margin: 0;}


/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0;}
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend { border: 0;}
button,
input,
select,
textarea { font-size: 100%; margin: 0; vertical-align: baseline;}
button,
input { line-height: normal;}
button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0;}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top;}
input[type="search"]:focus { outline: none;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

@media (max-width: 481px) {
}



/*		font-style
-------------------------------------------------- */
body { width: 100%;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
/*	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;*/
	font-size: 16px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.fixed { position: fixed;} 
input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

.min {font-family: "游明朝", "Yu Mincho", "YuMincho", serif;}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}


a { color:#002159; text-decoration: underline;}
a:link   { color:#002159;}
a:visited{ color:#002159;}
a:hover  { color:#002159;}
a:active { color:#002159;}

em{ font-style: normal;}


/*		utility
-------------------------------------------------- */
.cf{ clear: both;}
.cf:after{ content: ''; display: block; clear: both;}

#wrapper { background: url('./img/bg/ptn-1.jpg') repeat-y 50% 0 / 1400px auto;}
.bg-2 { background: url('./img/bg/ptn-2.png') repeat-y 50% 0 / 1400px auto;}


#ft { position: relative;}
#ft .copyright { padding: 15px 0;}
#ft .copyright p { text-align: center;}


.btn-bloc.mb { margin-bottom: 60px;}
.btn-bloc .inner { width: 92%; max-width: 700px; margin: 0 auto;}
.btn-bloc h4 { text-align: center;}
.btn-bloc h4 img { width: 100%; margin: 0 !important;}
.btn-bloc a { display: block; width: 84%; max-width: 560px; margin: 0 auto; background: #fff; border-radius: 50px; box-shadow: 0 5px 40px #d1d0de; overflow: hidden;}
.btn-bloc a img { width: 100%; margin: 0 !important;}
.btn-bloc a:hover img { opacity: 0.8;}

@media (max-width: 481px) {
	.btn-bloc.mb { margin-bottom: 30px;}
}

#hd { position: absolute; left: 0; top: 0; width: 100%; z-index: 10;}
#hd .inner-hd { position: relative; width: 96%; max-width: 1280px; height: 50px; margin: 0 auto;}
#hd .logo { width: 75%; max-width: 620px;}
#hd .logo h1 img { width: 100%; margin: 0 !important;}
#hd .logo h1 img.sp-show { display: none;}
@media (max-width: 641px) {
	#hd .logo h1 img.pc-show { display: none;}
	#hd .logo h1 img.sp-show { display: block;}
}
@media (max-width: 481px) {
	#hd .inner-hd { padding: 12px 0;}
}


#kv { position: relative; margin-bottom: 0px;}
#kv .inner-kv { width: 100%; height: 1290px; background: url('./img/kv.png') no-repeat 50% 0 / 1400px auto;}
#kv h2 img { display: none; margin: 0 auto !important;}
@media (max-width: 1401px) {
	#kv .inner-kv { height: 92.5vw; background-size: auto 100%;}
}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#kv .inner-kv { height: auto; background: none;}
	#kv h2 img { display: block; width: 100%;}
}
@media (max-width: 641px) {
}


#lead { position: relative;}
#lead .inner-sct { width: 94%; max-width: 1100px; margin: 0 auto;}
#lead .ctn { width: 100%; padding: 40px 0 60px; background: url('./img/pht-0.png') no-repeat 100% 50% / auto 100%;}
#lead .ctn p img { width: 60%; max-width: 640px; margin: 0 !important;}
#lead .ctn figure { display: none;}
@media (max-width: 1281px) {
}
@media (max-width: 641px) {
	#lead .ctn { padding: 0px; background: none;}
	#lead .ctn p img { width: 100%;}
	#lead .ctn figure { display: block; width: 100%;}
	#lead .ctn figure { width: 80%; margin: 0 auto !important;}
}
@media (max-width: 481px) {
}


.pageNav .inner { width: 92%; max-width: 1100px; margin: 0 auto; padding: 30px 0;}
.pageNav ul { font-size: 0; text-align: center;}
.pageNav ul li { display: inline-block; width: 20%; padding: 0;}
.pageNav ul li a { display: block; width: 96%; margin: 0 auto;}
.pageNav ul li a img { width: 100%;}
.pageNav ul li a:hover { opacity: 0.8;}
.pageNav p { color: #4f2384; font-size: 14px; text-align: center; text-shadow: 0px 0px 8px #fff,0px 0px 8px #fff,0px 0px 8px #fff;}
@media (max-width: 641px) {
	.pageNav .inner { padding: 20px 0;}
	.pageNav ul li { width: 32%;}
}
@media (max-width: 481px) {
	.pageNav p { font-size: 10px;}
}


.sct { position: relative;}
.sct .box { position: relative; width: 92%; max-width: 1100px; margin: 0 auto; background: rgba(255,255,255,.8); box-shadow: 0 0 12px #b9dbe6;}
.sct .box.mb { margin-bottom: 40px;}
.sct .box .inner-box { position: relative; padding: 30px 80px 70px;}
.sct .box:before,
.sct .box:after,
.sct .box .inner-box:before,
.sct .box .inner-box:after { content: ''; display: block; width: 110px; height: 105px; position: absolute;}
.sct .box:before{ left: 12px; top: 12px; background: url('./img/bg/top-left.png') no-repeat 0% 0% / 100% auto;}
.sct .box:after { right: 12px; top: 12px; background: url('./img/bg/top-right.png') no-repeat 100% 0% / 100% auto;}
.sct .box .inner-box:before { left: 12px; bottom: 12px; background: url('./img/bg/bottom-left.png') no-repeat 0% 100% / 100% auto;}
.sct .box .inner-box:after { right: 12px; bottom: 12px; background: url('./img/bg/bottom-right.png') no-repeat 100% 100% / 100% auto;}
.sct .box#descript .inner-box{ background: url('./img/bg-2.png') no-repeat 50% 2%;}
.sct .box#result .inner-box{
 background-image: url('./img/bg-2a.png'), url('./img/bg-2b.png');
 background-position: 50% 8%, 50% 54%;
 background-repeat: no-repeat, no-repeat;
}
.sct .box .box-top-3 { margin-bottom: 30px; padding-top: 40px;
 background-image: url('./img/bg-top-3L.png'), url('./img/bg-top-3R.png');
 background-position: 12% 50%,86% 50%;
 background-repeat: no-repeat, no-repeat;
 background-size: 120px auto, 120px auto;
}
.sct .box .box-tit { margin-bottom: 30px;}
.sct .box figure img { max-width: 100%; margin: 0 !important;}
.sct .box figure img.sp-show { display: none;}

/*
.sct .box .box-tit.mb { margin-bottom: 30px;}
*/
.sct .box .box-tit h2 { text-align: center;}
.sct .box .box-tit h2 img { width: 60%; max-width: 300px; margin: 0px auto !important;}
.sct .box .box-tit h2 img.sp-show { display: none;}
.sct .box .box-ctn p { color: #3c478a; font-size: 20px; font-weight: 700; letter-spacing: 0.075rem; line-height: 2.5;
 text-shadow: 0px 0px 8px #fff,0px 0px 8px #fff,0px 0px 8px #fff;
}
.sct .box .box-ctn p br.sp-show { display: none;}
@media (max-width: 801px) {
	.sct .box .inner-box { position: relative; padding: 40px 50px 60px;}
	.sct .box .box-ctn p { font-size: 2.2vw;}
	.sct .box figure img.pc-show { display: none;}
	.sct .box figure img.sp-show { display: block;}
}
@media (max-width: 641px) {
	.sct .box .box-tit h2 img.pc-show { display: none;}
	.sct .box .box-tit h2 img.sp-show { display: block; margin: 0 auto !important;}
	.sct .box .box-ctn p { font-size: 2.8vw;}
	.sct .box .box-ctn p br.sp-show { display: block;}
}
@media (max-width: 481px) {
	.sct .box:before,
	.sct .box:after,
	.sct .box .inner-box:before,
	.sct .box .inner-box:after { width: 45px; height: 40px;}
	.sct .box:before{ left: 4px; top: 4px;}
	.sct .box:after { right: 4px; top: 4px;}
	.sct .box .inner-box:before{ left: 4px; bottom: 4px;}
	.sct .box .inner-box:after { right: 4px; bottom: 4px;}
	.sct .box .inner-box { padding: 20px 12px 40px;}

	.sct .box .box-tit { margin-bottom: 8px;}

	.sct .box .box-ctn p span { display: block;}

}


#collabo .box .inner-box { position: relative; padding: 30px 0px 70px;}
#collabo .box .box-tit.mb0 { margin-bottom: 0px;}
#collabo .box .box-tit h2 img { width: 80%; max-width: 880px; margin: 0 auto !important;}

#collabo .box .read { margin-bottom: 40px;}
#collabo .box .read p { color: #4f2384; font-size: 26px; font-weight: 700; letter-spacing: 0.075rem; line-height: 1.8;
 text-align: center; text-shadow: 0px 0px 8px #fff,0px 0px 8px #fff,0px 0px 8px #fff;
}
#collabo .box .read p span.bloc { display: block;}
#collabo .box .read p span.fontL{ font-size: 32px;}
#collabo .box .read p br.sp-show { display: none;}

#collabo .box .descript.bg1 { background: url('./img/bg/juwery-1.png') no-repeat 50% 40% / 100% auto;}
#collabo .box .descript.bg2 { background: url('./img/bg/juwery-2.png') no-repeat 50% 40% / 100% auto;}
#collabo .box .descript figure.image { margin-bottom: 20px; text-align: center;}
#collabo .box .descript figure.image img { width: 80%; max-width: 650px; margin: 0 auto !important;}
@media (max-width: 801px) {
	#collabo .box .read p { font-size: 2.4vw; line-height: 1.65;}
	#collabo .box .read p span.fontL{ font-size: 3.0vw;}
	#collabo .box .read p br.pc-show { display: none;}
	#collabo .box .read p br.sp-show { display: block;}
}
@media (max-width: 641px) {
	#collabo .box .box-tit h2 img { width: 86%;}
	#collabo .box .read p { font-size: 3.0vw;}
	#collabo .box .read p span.fontL{ font-size: 3.6vw;}

	#collabo .box .descript.bg1 { background: none;}
	#collabo .box .descript.bg2 { background: none;}
}
@media (max-width: 481px) {
	#collabo .box .inner-box { position: relative; padding: 18px 0px 50px;}
	#collabo .box .read { margin-bottom: 30px;}
	#collabo .box .read p { font-size: 14px; letter-spacing: 0rem;}
	#collabo .box .read p span.fontL{ font-size: 18px;}

	#collabo .box .descript figure.image { margin-bottom: 12px;}
	#collabo .box .descript figure.image img { width: 86%;}
}


#collabo .box .pendant { margin-bottom: 40px; padding-top: 40px;
 background-image: url('./img/bg/ribon-L.png'),url('./img/bg/ribon-R.png');
 background-repeat: no-repeat, no-repeat;
 background-position: 0% 40%, 100% 0;
 background-size: 140px auto, 140px auto;
}
#collabo .box .pendant .ctn-flex { display: flex; justify-content: space-between; margin-bottom: 20px;}
#collabo .box .pendant .pht { width: 50%;}
#collabo .box .pendant .txt { width: 50%; padding-right: 100px;}
#collabo .box .pendant .pht figure { text-align: center;}
#collabo .box .pendant .pht figure img { width: 80%; margin: 0 auto !important;}
#collabo .box .pendant .txt .tit { position: relative;}
#collabo .box .pendant .txt .tit:after { content: ''; display: block; width: 98%; height: 2px; background: #cd9539;
 position: absolute; left: 10px; bottom: 24px;
}
#collabo .box .pendant .txt .tit h3 img { width: 88%; margin: 0 !important;}
#collabo .box .pendant .txt h4 { margin-bottom: 12px; color: #4f2384; font-size: 30px; font-weight: 700; text-shadow: 0px 0px 8px #fff,0px 0px 8px #fff,0px 0px 8px #fff;}
#collabo .box .pendant .txt h4 span { display: block;}
#collabo .box .pendant .txt p { color: #3c478a; font-size: 20px; font-weight: 700; letter-spacing: .005rem;}
#collabo .box .pendant ul { width: 92%; margin: 0 auto; font-size: 0px; text-align: center;}
#collabo .box .pendant ul li { display: inline-block; width: 33.33334%; padding: 10px 0; vertical-align: top;}
#collabo .box .pendant ul li dl { width: 92%; margin: 0 auto;}
#collabo .box .pendant ul li dl dt { margin-bottom: 10px;}
#collabo .box .pendant ul li dl dt img { width: 90%; margin: 0 auto !important;}
#collabo .box .pendant ul li dl dd { padding: 0 12px; color: #3c478a; font-size: 18px; font-weight: 700; letter-spacing: 0.05rem; text-align: justify;}
#collabo .box .pendant ul li dl dd span.note{ font-size: 16px;}
#collabo .box .pendant ul li dl dd a { text-decoration-thickness: 1px; text-underline-offset: 3px;}
#collabo .box .pendant ul li dl dd a:hover { text-decoration: none;}

#collabo .box hr { width: 100%; height: 1px; margin-bottom: 80px; border: none;}

#collabo .box .ring { margin-bottom: 40px; margin-bottom: 40px; padding-top: 40px;
 background-image: url('./img/bg/ribon-L.png'),url('./img/bg/ribon-R.png');
 background-repeat: no-repeat, no-repeat;
 background-position: 0% 40%, 100% 0;
 background-size: 140px auto, 140px auto;
}
#collabo .box .ring .ctn-flex { display: flex; justify-content: space-between; margin-bottom: 20px;}
#collabo .box .ring .pht { width: 50%;}
#collabo .box .ring .txt { width: 50%; padding-right: 100px;}
#collabo .box .ring .pht figure { text-align: center;}
#collabo .box .ring .pht figure img { width: 80%; margin: 0 auto !important;}
#collabo .box .ring .txt .tit { position: relative;}
#collabo .box .ring .txt .tit:after { content: ''; display: block; width: 100%; height: 2px; background: #cd9539;
 position: absolute; left: 10px; bottom: 24px;
}
#collabo .box .ring .txt .tit h3 img { width: 88%; margin: 0 !important;}
#collabo .box .ring .txt h4 { margin-bottom: 12px; color: #4f2384; font-size: 30px; font-weight: 700;}
#collabo .box .ring .txt h4 span { display: block;}
#collabo .box .ring .txt p { color: #3c478a; font-size: 20px; font-weight: 700; letter-spacing: .005rem;}
#collabo .box .ring ul { width: 92%; max-width: 680px; margin: 0 auto; font-size: 0px; text-align: center;}
#collabo .box .ring ul li { display: inline-block; width: 50%; padding: 10px 0; vertical-align: top;}
#collabo .box .ring ul li dl { width: 92%; margin: 0 auto;}
#collabo .box .ring ul li dl dt { margin-bottom: 10px;}
#collabo .box .ring ul li dl dt img { width: 90%; margin: 0 auto !important;}
#collabo .box .ring ul li dl dd { padding: 0 12px; color: #3c478a; font-size: 18px; font-weight: 700; letter-spacing: 0.05rem; text-align: justify;}
#collabo .box .ring ul li dl dd .note { display: block; font-size: 14px; line-height: 1.45;}
#collabo .box .ring ul li dl dd a { text-decoration-thickness: 1px; text-underline-offset: 3px;}
#collabo .box .ring ul li dl dd a:hover { text-decoration: none;}


#collabo .box .spec { width: 92%; max-width: 880px; margin: 0 auto;}
#collabo .box .spec h3 { color: #cd9539; font-size: 24px; font-weight: 700;}
#collabo .box .spec ul { border-top: solid 1px #cd9539;}
#collabo .box .spec ul.mb { margin-bottom: 50px;}
#collabo .box .spec ul li { padding: 10px; border-bottom: solid 1px #cd9539;}
#collabo .box .spec ul li dl { display: table; width: 100%;}
#collabo .box .spec ul li dl dt,
#collabo .box .spec ul li dl dd { display: table-cell; font-size: 18px; line-height: 1.4;}
#collabo .box .spec ul li dl dt { width: 26%; padding-left: 10px; color: #cd9539; font-weight: 700;}
#collabo .box .spec ul li dl dt br { display: none;}
#collabo .box .spec ul li dl dd { width: auto; color: #4f2384; font-weight: 700;}
#collabo .box .spec ul li dl dd br.sp-show { display: none;}
#collabo .box .spec ul li dl dd span.note { font-size: 16px;}
#collabo .box .spec ul li dl dd a { text-decoration-thickness: 1px; text-underline-offset: 3px;}
#collabo .box .spec ul li dl dd a:hover { text-decoration: none;}

/*
#collabo .box .charm { margin-bottom: 80px;}
*/
#collabo .box .charm:before,
#collabo .box .charm:after { content: ''; display: block; width: 100%; height: 20px; background: url('./img/line.png') no-repeat 50% 50% / 580px auto;}
#collabo .box .charm:before { margin-bottom: 30px;}
#collabo .box .charm .ctn-flex { display: flex; justify-content: space-between; flex-direction: row-reverse; width: 90%; max-width: 880px; margin: 0 auto;}
#collabo .box .charm .txt { width: 55%;}
#collabo .box .charm .pht { width: 42%;}
#collabo .box .charm .txt h3 { margin-bottom: 20px; color: #4f2384; font-size: 30px; font-weight: 700;}
#collabo .box .charm .txt p { margin-bottom: 20px; color: #3c478a; font-size: 20px; font-weight: 700; letter-spacing: 0.05rem;}
#collabo .box .charm .txt ul { padding: 16px 0; border-top: solid 1px #cd9539; border-bottom: solid 1px #cd9539;}
#collabo .box .charm .txt ul li { padding: 2px 0; color: #3c478a; font-size: 18px; font-weight: 700;}
#collabo .box .charm .txt ul li span { display: block;}
#collabo .box .charm .txt ul li:nth-child(2) span { text-indent: 8em;}
#collabo .box .charm .txt ul li:nth-child(3) span { text-indent: 9em;}
#collabo .box .charm .pht figure img { width: 100%; margin: 0 auto !important;}
#collabo .box .charm .note { padding: 30px 0; text-align: center;}
#collabo .box .charm .note ul { display: inline-block; text-align: left;}
#collabo .box .charm .note ul li { color: #3c478a; font-weight: 700;}
@media (max-width: 801px) {
	#collabo .box .pendant { margin-bottom: 30px; padding-top: 20px; background-position: 0% 25%, 100% 0; background-size: 120px auto, 120px auto;}
	#collabo .box .pendant .ctn-flex { display: block;}
	#collabo .box .pendant .pht { width: 100%;}
	#collabo .box .pendant .txt { width: 90%; margin: 0 auto; padding-right: 0px;}
	#collabo .box .pendant .pht figure img { width: 65%;}
	#collabo .box .pendant .txt .tit:after { width: 96%;}
	#collabo .box .pendant .txt .tit h3 img { width: 60%;}
	#collabo .box .pendant .txt h4 { font-size: 3.2vw;}
	#collabo .box .pendant .txt p { font-size: 18px;}
	#collabo .box .pendant ul li { width: 50%;}
	#collabo .box .pendant ul li dl dd { font-size: 16px;}
	#collabo .box .pendant ul li dl dd span.note { display: block; font-size: 14px;}

	#collabo .box hr { margin-bottom: 80px;}

	#collabo .box .ring { margin-bottom: 30px; padding-top: 20px; background-position: 0% 25%, 100% 0; background-size: 120px auto, 120px auto;}
	#collabo .box .ring .ctn-flex { display: block;}
	#collabo .box .ring .pht { width: 100%;}
	#collabo .box .ring .txt { width: 90%; margin: 0 auto; padding-right: 0px;}
	#collabo .box .ring .pht figure img { width: 65%;}
	#collabo .box .ring .txt .tit:after { width: 96%;}
	#collabo .box .ring .txt .tit h3 img { width: 72%;}
	#collabo .box .ring .txt h4 { font-size: 3.2vw;}
	#collabo .box .ring .txt p { font-size: 18px;}
	#collabo .box .ring ul li { width: 50%;}
	#collabo .box .ring ul li dl dd { font-size: 16px;}
	#collabo .box .ring ul li dl dd span.note { display: block; font-size: 14px;}
	
	#collabo .box .spec ul li dl dt,
	#collabo .box .spec ul li dl dd { font-size: 16px;}
	#collabo .box .spec ul li dl dt { width: 150px;}
	#collabo .box .spec ul li dl dt br { display: block;}
	#collabo .box .spec ul li dl dd span.note { display: block; font-size: 14px;}


	#collabo .box .charm { margin-bottom: 60px;}
	#collabo .box .charm:before,
	#collabo .box .charm:after { background-size: 90% auto;}
	#collabo .box .charm .ctn-flex { display: block;}
	#collabo .box .charm .pht { width: 100%; margin-bottom: 20px;}
	#collabo .box .charm .pht figure img { width: 65%;}
	#collabo .box .charm .txt { width: 100%;}
	#collabo .box .charm .txt h3 { margin-bottom: 12px; font-size: 3.6vw;}
	#collabo .box .charm .txt p { margin-bottom: 12px; font-size: 16px;}
	#collabo .box .charm .txt ul li { font-size: 16px;}
	#collabo .box .charm .note ul li { font-size: 16px;}
}

@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#collabo .box .pendant { margin-bottom: 12px; padding-top: 0px; background-size: 60px auto, 60px auto; background-position: 0% 260px, 100% 20px;}
	#collabo .box .pendant .txt .tit:after { width: 100%; height: 1px; left: 0; bottom: 10px;}
	#collabo .box .pendant .txt .tit h3 img { width: 76%;}
	#collabo .box .pendant .txt .inner { padding: 0 10px;}
	#collabo .box .pendant .txt h4 { font-size: 18px;}
	#collabo .box .pendant .txt p { font-size: 13px;}
	#collabo .box .pendant ul li { padding: 6px 0;}
	#collabo .box .pendant ul li dl { width: 96%;}
	#collabo .box .pendant ul li dl dt { margin-bottom: 5px;}
	#collabo .box .pendant ul li dl dd { font-size: 12px; letter-spacing: 0rem; line-height: 1.45;}
	#collabo .box .pendant ul li dl dd span.note { display: block; padding-top: 4px; font-size: 11px;}

	#collabo .box hr { margin-bottom: 60px;}

	#collabo .box .ring { margin-bottom: 30px; padding-top: 0px; background-size: 60px auto, 60px auto; background-position: 0% 260px, 100% 20px;}
	#collabo .box .ring .txt .tit { margin-bottom: 5px;}
	#collabo .box .ring .txt .tit:after { width: 100%; height: 1px; left: 0; bottom: 2px;}
	#collabo .box .ring .txt .tit h3 img { width: 76%;}
	#collabo .box .ring .txt .inner { padding: 0 10px;}
	#collabo .box .ring .txt h4 { font-size: 18px;}
	#collabo .box .ring .txt p { font-size: 13px;}
	#collabo .box .ring ul li { padding: 6px 0;}
	#collabo .box .ring ul li dl { width: 96%;}
	#collabo .box .ring ul li dl dt { margin-bottom: 5px;}
	#collabo .box .ring ul li dl dd { font-size: 12px; letter-spacing: 0rem;}
	#collabo .box .ring ul li dl dd span.note { font-size: 11px;}

	#collabo .box .spec h3 { margin-bottom: 6px; font-size: 16px;}
	#collabo .box .spec ul li { padding: 6px; padding-right: 0px;}
	#collabo .box .spec ul li dl dt,
	#collabo .box .spec ul li dl dd { font-size: 12px;}
	#collabo .box .spec ul li dl dt { width: 100px; padding-left: 5px;}
	#collabo .box .spec ul li dl dd br.sp-show { display: block;}
	#collabo .box .spec ul li dl dd span.note { display: block; font-size: 12px;}

	#collabo .box .charm { margin-bottom: 40px;}
	#collabo .box .charm:before { margin-bottom: 12px;}
	#collabo .box .charm .txt { width: 90%; margin: 0 auto;}
	#collabo .box .charm .txt h3 { margin-bottom: 8px; font-size: 18px;}
	#collabo .box .charm .txt p { font-size: 12px;}
	#collabo .box .charm .txt ul { padding: 8px 0;}
	#collabo .box .charm .txt ul li { font-size: 13px;}

	#collabo .box .charm .note { padding: 12px 0 18px;}
	#collabo .box .charm .note ul { width: 82%; margin: 0 auto;}
	#collabo .box .charm .note ul li { font-size: 11px;}
}




#collabo .box .btn { padding: 40px 0;}
#collabo .box .btn a { display: block; width: 78%; max-width: 500px; margin: 0 auto;}
#collabo .box .btn a img { width: 100%; margin: 0 !important;}
#collabo .box .btn a:hover { opacity: 0.8;}

#collabo .box .coomingsoon .ctn-flex { position: relative; display: flex; justify-content: space-between; width: 92%; margin: 0 auto; align-items: center;}
#collabo .box .coomingsoon .ctn-flex.re { margin-top: -40px; flex-direction: row-reverse;}
#collabo .box .coomingsoon .pht { position: relative; width: 50%;}
#collabo .box .coomingsoon .txt { position: relative; width: 50%; padding: 0 20px;}
#collabo .box .coomingsoon .pht figure { text-align: center;}
#collabo .box .coomingsoon .pht figure img { width: 80%; margin: 0 auto !important;}
#collabo .box .coomingsoon .txt .tit { position: relative;}
#collabo .box .coomingsoon .txt .tit:after { content: ''; display: block; width: 100%; height: 2px; background: #cd9539;
 position: absolute; left: 10px; bottom: 12px;
}
#collabo .box .coomingsoon .txt .tit h3 img { width: 80%; margin: 0 !important;}
#collabo .box .coomingsoon .txt .inner { padding: 0 10px;}
#collabo .box .coomingsoon .txt h4 { margin-bottom: 12px; color: #4f2384; font-size: 30px; font-weight: 700;}
#collabo .box .coomingsoon .txt h4 span { display: block;}
#collabo .box .coomingsoon .txt p { color: #3c478a; font-size: 20px; font-weight: 700;}

@media (max-width: 801px) {
	#collabo .box .coomingsoon .ctn-flex { display: block;}
	#collabo .box .coomingsoon .ctn-flex.re { margin-top: 0px; padding-top: 30px;}
	#collabo .box .coomingsoon .pht { width: 100%; margin-bottom: -20px;}
	#collabo .box .coomingsoon .txt { width: 100%; padding: 0px;}
	#collabo .box .coomingsoon .txt .tit:after { width: 98%; bottom: 24px;}
	#collabo .box .coomingsoon .txt .tit h3 img { width: 60%;}
	#collabo .box .coomingsoon .txt h4 { font-size: 3.2vw;}
	#collabo .box .coomingsoon .txt p { font-size: 16px;}
	#collabo .box .coomingsoon .pht figure img { width: 65%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#collabo .box .btn { margin-bottom: 20px; padding: 30px 0;}
	#collabo .box .coomingsoon .pht { margin-bottom: -12px;}
	#collabo .box .coomingsoon .txt .tit:after { height: 1px; bottom: 8px; left: 0;}
	#collabo .box .coomingsoon .txt .tit h3 img { width: 76%;}
	#collabo .box .coomingsoon .txt h4 { font-size: 18px;}
	#collabo .box .coomingsoon .txt p { font-size: 13px;}
}




#feature { margin-bottom: 40px;}
#feature .box .box-tit h2 img { width: 70%; max-width: 520px;}
#feature .box-bg { margin-bottom: 40px; padding-top: 20px;
 background-image: url('./img/bg/top-2L.png'), url('./img/bg/top-2R.png');
 background-position: 0% 80%,100% 80%;
 background-repeat: no-repeat, no-repeat;
 background-size: 140px auto, 140px auto;
}
#feature figure { text-align: center;}
#feature figure img { width: 75%; max-width: 560px; margin: 0 auto !important;}
#feature .box .ctn-flex { display: flex; justify-content: space-between;}
#feature .box .txt { width: 48%;}
#feature .box .txt p { color: #3c478a; font-weight: 700; letter-spacing: 0.075rem; line-height: 1.8;}
@media (max-width: 1001px) {
	#feature .box-bg { background-size: 140px auto, 140px auto;}
}
@media (max-width: 801px) {
	#feature .box .ctn-flex { display: block;}
	#feature .box .txt { width: 100%;}
	#feature .box .txt p { font-size: 14px; letter-spacing: 0.05rem;}
}
@media (max-width: 481px) {
	#feature .inner-box { padding: 20px 25px 30px;}
	#feature .box-bg { margin-bottom: 20px; padding-top: 0px; background: none;}
	#feature .box .txt p { font-size: 13px; letter-spacing: 0;}
}



#amanity { margin-bottom: 40px;}
#amanity .box .inner-box { padding: 50px 80px 70px;}
#amanity .box .box-tit h2 img { width: 75%; max-width: 520px;}
#amanity .box .ctn-flex { display: flex; justify-content: space-between;}
#amanity .box .ctn-flex.re { flex-direction: row-reverse; padding: 60px 0;}
#amanity .box .pht { width: 30%;}
#amanity .box .txt { width: 62%;}
#amanity .box .txt h3 { margin-bottom: 12px; color: #4f2384; font-size: 28px; font-weight: 700; text-align: left; text-shadow: 0px 0px 8px #fff,0px 0px 8px #fff,0px 0px 8px #fff;}
#amanity .box .txt p { color: #3c478a; font-weight: 700;}
#amanity .box .txt p.note { margin-top: 20px; font-size: 14px;}
@media (max-width: 801px) {
	#amanity .box .inner-box { padding: 40px 50px 60px;}
	#amanity .box .ctn-flex.re { padding: 40px 0;}
	#amanity .box .txt h3 { font-size: 2.8vw;}
	#amanity .box .txt p { font-size: 14px;}
	#amanity .box .txt p.note { font-size: 12px;}
}
@media (max-width: 641px) {
	#amanity .box .ctn-flex { display: block}
	#amanity .box .pht { width: 100%; margin-bottom: 20px;}
	#amanity .box .txt { width: 100%;}
	#amanity .box .pht figure img { width: 60%; margin: 0 auto !important;}
	#amanity .box .txt h3 { font-size: 3.2vw;}
}
@media (max-width: 481px) {
	#amanity { margin-bottom: 30px;}
	#amanity .box .inner-box { padding: 20px 20px 30px;}
	#amanity .box .ctn-flex { padding: 10px;}
	#amanity .box .txt h3 { margin-bottom: 8px; font-size: 18px;}
	#amanity .box .txt p { font-size: 13px; line-height: 1.65;}
}



#popup { margin-bottom: 40px;}
#popup .box .box-tit h2 img { width: 70%; max-width: 650px;}
#popup .box .inner-box{ padding: 30px 60px 40px; background: url('./img/bg/popup.png') no-repeat 50% 0;}
#popup .box p.min { margin-bottom: 70px; line-height: 1.7; text-align: center;}
#popup .box p.min span { display: block;}
#popup .box .board { position: relative; width: 94%; max-width: 790px; margin: 0 auto 30px; padding: 2px; border-radius: 3px;
 background: linear-gradient(#dfd981,#cd9539,#dfd981,#cd9539,#dfd981); box-shadow: 0 2px 10px #d1d0de;
}
#popup .box .board:after { content: ''; display: block; width: 60px; height: 204px; background: url('./img/img-popup.png') no-repeat 50% 50% / 100% auto;
 position: absolute; right: -10px; top: -30px; transform: rotate(8deg);
}
#popup .box .board .inner{ padding: 40px 60px 20px; background: #fff;}
#popup .box .board h3 { position: absolute; left: 0; top: -30px; width: 100%; text-align: center;}
#popup .box .board h3 img { width: 76%; max-width: 670px; margin: 0 auto !important;}
#popup .box .board h3 img.sp-show { display: none;}
#popup .box .board ul li { color: #333; padding: 4px; font-size: 21px;}
/*
#popup .box .board .ctn-flex { display: flex; justify-content: space-between; margin-top: 30px;}
#popup .box .board .pht { width: 28%;}
#popup .box .board .txt { width: 68%;}
#popup .box .board .pht figure img { width: 90%; margin: 0 auto !important;}
#popup .box .board .txt h4 { font-size: 18px;}
#popup .box .board .txt p { margin: 0; font-size: 13px; text-align: left;}
*/
#popup .box .ctn-flex { display: flex; justify-content: space-between; width: 94%; max-width: 820px; margin: 0 auto 20px;}
#popup .box .pht { width: 34%;}
#popup .box .txt { width: 64%;}
#popup .box .pht figure img { width: 90%; margin: 0 auto !important;}
#popup .box .txt h4 { margin-bottom: 10px; color: #4f2384; font-size: 24px;}
#popup .box .txt p { margin: 0; color: #3c478a; font-size: 16px; font-weight: 700; text-align: left;}

#popup .box p.note { width: 94%; max-width: 790px; margin: 0 auto; font-size: 14px;}
@media (max-width: 1001px) {
	#popup .box .board .inner{ padding: 30px 30px 20px;}
	#popup .box .board ul li { font-size: 18px;}
}
@media (max-width: 801px) {
	#popup .box .inner-box{ background: url('./img/bg/popup-sp.png') no-repeat 50% 0 / 100% auto;}
	#popup .box .board:after { width: 50px; height: 162px;}
}
@media (max-width: 641px) {
	#popup .box p.min { margin-bottom: 90px;}
	#popup .box .board:after { right: -20px;}
	#popup .box .board .inner{ padding: 50px 30px 20px;}
	#popup .box .board h3 { top: -42px;}
	#popup .box .board h3 img.pc-show { display: none;}
	#popup .box .board h3 img.sp-show { display: block; margin: 0 auto !important;}
	#popup .box .board ul li { padding: 2px; font-size: 16px; line-height: 1.5;}
	#popup .box .board ul li span { display: block; padding-left: 3em;}
	#popup .box .board ul li:nth-child(3) span { padding-left: 5em;}
/*
	#popup .box .board .ctn-flex { display: block; margin-top: 25px;}
	#popup .box .board .pht { width: 100%; margin-bottom: 10px;}
	#popup .box .board .txt { width: 100%;}
	#popup .box .board .pht figure img { width: 55%;}
*/
	#popup .box .ctn-flex { display: block; margin-top: 25px;}
	#popup .box .pht { width: 100%; margin-bottom: 10px;}
	#popup .box .txt { width: 100%;}
	#popup .box .pht figure img { width: 55%;}

	#popup .box p.note { font-size: 12px;}
}
@media (max-width: 481px) {
	#popup { margin-bottom: 30px;}
	#popup .box .inner-box{ padding: 20px 12px 40px;}
	#popup .box p.min { margin-bottom: 50px;}
	#popup .box .board { margin: 0 auto 8px; box-shadow: 0 2px 6px #d1d0de;}
	#popup .box .board:after { width: 30px; height: 104px; right: 0px; top: -20px;}
	#popup .box .board .inner{ padding: 30px 20px 10px;}
	#popup .box .board h3 { top: -26px;}
	#popup .box .board ul li { font-size: 13px;}
/*
	#popup .box .board .txt h4 { font-size: 14px;}
	#popup .box .board .txt p { font-size: 12px;}
*/
	#popup .box .txt h4 { margin-bottom: 8px; font-size: 18px;}
	#popup .box .txt p { margin-bottom: 0px; font-size: 13px; line-height: 1.65;}

	#popup .box p.note { font-size: 10px;}
}


#about-1 { margin-bottom: 40px;}
#about-1 .box .box-tit h2 img { width: 70%; max-width: 520px;}
#about-1 .box.box-1 { margin-bottom: 50px;}
#about-1 .box.box-1 .inner-box { position: relative; padding: 30px 60px 80px;}
#about-1 .box .box-top-1 { padding-top: 60px;
 background-image: url('./img/bg/top-1L.png'), url('./img/bg/top-1R.png');
 background-position: 8% 0,95% 0;
 background-repeat: no-repeat, no-repeat;
 background-size: auto 100%, auto 100%; 
}
#about-1 .box.box-1 .box-ctn { padding-top: 30px; padding-left: 300px; background: url('./img/about-1a.png') no-repeat 20px 80% / 250px auto;}
#about-1 .box.box-1 .box-ctn p { margin-bottom: 40px;}

#about-1 .box figure.karatz { margin-bottom: 40px; text-align: center;}
#about-1 .box figure.karatz img { width: 80%; max-width: 570px; margin: 0 auto !important;}
#about-1 .box .ctn-flex { display: flex; justify-content: space-between;}
#about-1 .box .ctn-flex div { width: 48%;}
#about-1 .box .ctn-flex div p { color: #3c478a; font-weight: 700; letter-spacing: 0.05rem; line-height: 1.8;}
#about-1 .box .ctn-flex div p a { text-decoration-thickness: 1px; text-underline-offset: 3px;}
#about-1 .box .ctn-flex div p a:hover { text-decoration: none;}
@media (max-width: 801px) {
	#about-1 .box .box-top-1 { padding-top: 40px; background-position: 4% 0,98% 0;}
	#about-1 .box .ctn-flex { display: block; padding: 0 6px;}
	#about-1 .box .ctn-flex div { width: 100%;}
	#about-1 .box .ctn-flex div p { line-height: 1.8;}
	#about-1 .box.box-1 .box-ctn { padding-top: 0px; padding-left: 0px; background: url('./img/about-1a-sp.png') no-repeat 100% 48% / 150px auto;}
	#about-1 .box.box-1 .box-ctn figure img { width: 90%; margin: 0 auto !important;}
}
@media (max-width: 481px) {
	#about-1 .box.box-1 { margin-bottom: 30px;}
	#about-1 .box .box-top-1 { padding-top: 20px; background-size: 50px auto, 50px auto;}

	#about-1 .box.box-1 .inner-box { padding: 20px 12px 40px;}
	#about-1 .box.box-1 .box-ctn { padding-top: 0px; padding-left: 3.2vw; background-size: 80px auto; background-position: 100% 50%;}
	#about-1 .box.box-1 .box-ctn p { margin-bottom: 20px; font-size: 15px; line-height: 1.75; font-feature-settings: "palt";}

	#about-1 .box figure.karatz { margin-bottom: 20px;}
	#about-1 .box .ctn-flex div p { font-size: 12px; font-weight: 400; letter-spacing: 0rem; line-height: 1.65;}
	#about-1 .box .ctn-flex div p span { display: block;}

}

.pagetop { position: fixed; left: 5%; bottom: 40px; width: 90px;}
.pagetop a { display: block; width: 100%;}
.pagetop a img { width: 100%;}
.pagetop a:hover { opacity: 0.8;}
.fix-btn { position: fixed; left: 0; bottom: 0; width: 100%; padding: 12px 0 6px; background: rgba(255,255,255,0.85); z-index: 99;}
.fix-btn a { display: block; width: 78%; max-width: 500px; margin: 0 auto; border-radius: 50px; overflow: hidden;}
.fix-btn a img { width: 100%; margin: 0 !important;}
.fix-btn a:hover { opacity: 0.9;}
#ft { padding-bottom: 120px;}
@media (max-width: 641px) {
	.pagetop { left: 4%; bottom: 20px; width: 60px;}
	#ft .copyright p { font-size: 12px;}
}
@media (max-width: 481px) {
	#ft { padding-bottom: 80px;}
	#ft .copyright { padding: 10px 0;}
	#ft .copyright p { font-size: 10px;}
}