/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document ========================================================================== */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700;900&display=swap");
html { -webkit-text-size-adjust: 100%; /* 2 */ line-height: 1.15; /* 1 */ }

.l-search__text { line-height:1.65; }

/* Sections ========================================================================== */
/** Remove the margin in all browsers. */
body { margin: 0; }

/** Render the `main` element consistently in IE. */
main { display: block; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { margin: 0.67em 0; font-size: 2em; }

/* Grouping content ========================================================================== */
/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/* Text-level semantics ========================================================================== */
/** Remove the gray background on active links in IE 10. */
a { background-color: transparent; }

/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { -webkit-text-decoration: underline dotted; border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Remove the border on images inside links in IE 10. */
img { border-style: none; }

/* Forms ========================================================================== */
/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { margin: 0; /* 2 */ font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { overflow: visible; /* 1 */ }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { text-transform: none; /* 1 */ }

/** Correct the inability to style clickable types in iOS and Safari. */
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Correct the padding in Firefox. */
fieldset { padding: 0.35em 0.75em 0.625em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ color: inherit; /* 2 */ white-space: normal; /* 1 */ }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Remove the default vertical scrollbar in IE 10+. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10. 2. Remove the padding in IE 10. */
[type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive ========================================================================== */
/* Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Misc ========================================================================== */
/** Add the correct display in IE 10+. */
template { display: none; }

/** Add the correct display in IE 10. */
[hidden] { display: none; }

h1, h2, h3, h4, h5, h6 { margin: 0; }

.-pc { display: none; }

.-sp { display: block; }

.pj-contents { margin: 0; }

.content__body { padding-bottom: 16vw; background-color: #000; color: #fff; font-family: "Noto Serif JP", serif; }

.content__body input, .content__body textarea { font-family: "Noto Serif JP", serif; }

.c-title { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 5.33333vw; font-weight: 400; letter-spacing: .3em; text-align: center; }

.c-title:after { display: block; width: 42.66667vw; height: 0.66667vw; margin: 2.93333vw auto 0; background-image: -webkit-gradient(linear, left top, right top, from(#deb92e), color-stop(#f6e9ac), to(#deb92e)); background-image: linear-gradient(90deg, #deb92e, #f6e9ac, #deb92e); background-size: cover; content: ""; }

.c-title.-thin { letter-spacing: 0; }

.c-button-wrap { width: 100%; max-width: 840px; height: 21.33333vw; overflow: hidden; border-radius: 10.66667vw; background-color: #464646; }

.-enabled .c-button-wrap { background-color: #fff; }

.c-button-coat { -webkit-box-sizing: border-box; -webkit-transition: opacity 180ms; box-sizing: border-box; width: 100%; height: 100%; padding: 1.6vw; border-radius: 10.66667vw; background: #464646; pointer-events: none; transition: opacity 180ms; }

.-enabled .c-button-coat { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(18%, #deb92e), color-stop(87%, #f6e9ac), to(#dcb72e)); background-image: linear-gradient(0deg, #deb92e 18%, #f6e9ac 87%, #dcb72e 100%); }

.-enabled .c-button-coat:hover { opacity: 0.9; }

.c-button-highlight { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 9.73333vw; color: #211c1c; font-size: 5.73333vw; font-style: italic; text-align: center; }

.-enabled .c-button-highlight { -webkit-box-shadow: -0.5vw -0.5vw 0.25vw #424141 inset, 0.53333vw 0.53333vw 0.53333vw #000 inset; background-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(10%, #424242), color-stop(70%, #141414), to(#000)); background-image: linear-gradient(#000, #424242 10%, #141414 70%, #000 100%); box-shadow: -0.5vw -0.5vw 0.25vw #424141 inset, 0.53333vw 0.53333vw 0.53333vw #000 inset; color: #ffde00; }

.c-button-highlight:after { -webkit-box-sizing: border-box; -webkit-transform: rotate(45deg); box-sizing: border-box; display: block; position: absolute; top: 39%; right: 4.93333vw; width: 3.73333vw; height: 3.73333vw; transform: rotate(45deg); content: ""; }

.-enabled .c-button-highlight:after { border-width: 0.66667vw 0.66667vw 0 0; border-style: solid; border-color: #ffde00; }

.c-button { -webkit-transition: opacity 180ms; position: relative; width: 94.66667vw; margin: 0 auto; padding: 7.46667vw 0; color: #000000; font-size: 4.8vw; font-style: italic; line-height: 1.33; text-align: center; transition: opacity 180ms; }

.-enabled .c-button { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(18%, #deb92e), color-stop(87%, #f6e9ac), to(#dcb72e)); background-image: linear-gradient(0deg, #deb92e 18%, #f6e9ac 87%, #dcb72e 100%); }

.c-button:hover { opacity: 0.9; }

.c-button:after { -webkit-box-sizing: border-box; -webkit-transform: rotate(45deg); box-sizing: border-box; display: block; position: absolute; top: 39%; right: 4.93333vw; width: 3.73333vw; height: 3.73333vw; transform: rotate(45deg); border-width: 0.66667vw 0.66667vw 0 0; border-style: solid; border-color: #000000; content: ""; }

.c-textlink { -webkit-transition: color 180ms; color: #ffffff; text-decoration: underline; transition: color 180ms; }

.c-textlink:hover { color: #deb92e; }

.c-boxlink { display: block; color: #ffffff; text-decoration: none; }

.u-section { margin: 0 auto; }

.u-section + .u-section { margin-top: 13.33333vw; }

.u-section > .lead { -webkit-box-sizing: border-box; box-sizing: border-box; width: 94.66667vw; margin: 7.33333vw auto 0; }

.u-section > .lead p { margin: 0; font-size: 3.2vw; line-height: 1.5; }

.u-section > .lead p small, .u-section > .lead p .-note { line-height: 1.33; }

.u-section > .lead.-wrap { width: 94.66667vw; margin-top: 3.6vw; padding: 2.66667vw 2vw; background-color: #1b1b1b; }

.u-section > .lead.-wrap .u-scrollbox { height: 54.66667vw; }

.u-section .summary { width: 93.33333vw; margin: 7.33333vw auto 0; }

.u-section .summary > .list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: row wrap; margin: 0 auto; font-size: 3.2vw; line-height: 1.5; }

.u-section .summary > .list > .term { width: 20vw; margin: 0; padding: 0.75em 0; border-bottom: 1px solid #a0a0a0; }

.u-section .summary > .list > .description { width: 73.33333vw; margin: 0; padding: 0.75em 0; border-bottom: 1px solid #a0a0a0; }

.u-photo > img { max-width: 100%; }

.u-photo .figure { margin: .67em auto 3.33em; font-size: 4vw; text-align: center; }

.u-scrollbox { overflow: auto; }

.u-scrollbox .title { font-size: 3.2vw; line-height: 1.5; }

.u-scrollbox * + .title { margin-top: 1.1em; }

.u-scrollbox .list { padding: 0; }

.u-scrollbox .list.-nostyle { margin: 0; padding: 0; list-style: none; }

.u-scrollbox .list > .item { padding-left: 1em; font-size: 3.2vw; line-height: 1.5; text-indent: -1em; }

.u-scrollbox .list > .item + .item { margin-top: .2em; }

.hero-image { width: 100%; margin: 0 auto; text-align: center; }

.hero-image > img { width: 100%; }

.hero-image .close-message { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; height: 140.53333vw; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7))), url("../img/csm_present_201201_special/heroimage_sp.jpg"); background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/csm_present_201201_special/heroimage_sp.jpg"); background-position: center top, center top; background-repeat: repeat, no-repeat; background-size: cover, cover; font-size: 6.13333vw; line-height: 1.33; text-indent: 0.75em; }

.content-nav { z-index: 10; position: -webkit-sticky; position: sticky; top: 0; width: 100%; height: 27.6vw; }

.content-nav.-fixed { -webkit-transform: translateX(-50%); position: fixed; left: 50%; transform: translateX(-50%); }

.content-nav .border { background-image: -webkit-gradient(linear, left top, right top, from(#deb92e), color-stop(#f6e9ac), to(#dcb72e)); background-image: linear-gradient(90deg, #deb92e, #f6e9ac, #dcb72e); }

.content-nav .background > .list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; width: 100%; margin: 0 auto; padding: 0.53333vw 0 0.53333vw; }

.content-nav .background > .list > .item { -webkit-box-sizing: border-box; box-sizing: border-box; width: 50%; height: 12.66667vw; font-size: 4vw; list-style: none; text-align: center; }

.content-nav .background > .list > .item:nth-child(1), .content-nav .background > .list > .item:nth-child(3) { background: radial-gradient(ellipse farthest-side at 100% 50%, #323232, #000); }

.content-nav .background > .list > .item:nth-child(2), .content-nav .background > .list > .item:nth-child(4) { background: radial-gradient(ellipse farthest-side at 0% 50%, #323232, #000); }

.content-nav .background > .list > .item:nth-child(3), .content-nav .background > .list > .item:nth-child(4) { margin-top: 0.53333vw; }

.content-nav .background > .list > .item > .c-boxlink { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; width: 100%; height: 100%; }

.content-nav .background > .list > .item > .c-boxlink:hover { color: #deb92e; }

.-fixed + .box01 { padding-top: 27.6vw; }

.box01 { margin-top: 13.33333vw; }

.box01 > .howto > .step { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: column nowrap; width: 93.33333vw; margin: 0 auto; padding: 0; }

.box01 > .howto > .step > .item { position: relative; margin-top: 12vw; list-style: none; }

.box01 > .howto > .step > .item > .badge-container { margin-bottom: 5.06667vw; text-align: center; }

.box01 > .howto > .step > .item > .badge-container .badge { width: 30.66667vw; }

.box01 > .howto > .step > .item > .title > span { display: block; width: 77.33333vw; margin: 0 auto; font-size: 4.8vw; }

.box01 > .howto > .step > .item:nth-child(1) > .title > span { width: 82.66667vw; }

.box01 > .howto > .step > .item:nth-child(2) > .title > span { width: 77.33333vw; }

.box01 > .howto > .step > .item > .lead { width: 77.33333vw; margin: 20px auto 0; font-size: 3.2vw; line-height: 1.5; }

.box08 .movie { width: 94.66667vw; margin: 7.33333vw auto 0; }

.box08 h2 { letter-spacing: 0; line-height: 1.2; }

.box08 .caption { background-image: url("../img/csm_present_201201_special/slider-deco-left.png"), url("../img/csm_present_201201_special/slider-deco-right.png"); background-position: left 13.33333vw center, right 13.33333vw center; background-repeat: no-repeat, no-repeat; background-size: 10vw auto; font-size: 3.2vw; text-align: center; }

.box08 .video-container { position: relative; width: 100%; max-width: 992px; margin: 3.06667vw auto 0; }

.box08 .video-container #mute-button { -webkit-transition: opacity 180ms; position: absolute; right: 1.5vw; bottom: 2.5vw; width: 0.1vw; width: 10vw; height: 0.1vw; height: 10vw; background-size: 100% auto; cursor: pointer; opacity: 0.5; transition: opacity 180ms; }

.box08 .video-container #mute-button:hover { opacity: 1; }

.box08 .video-container #mute-button.-muted { background-image: url("../img/csm_present_201201_special/button_mute_01.png"); }

.box08 .video-container #mute-button.-unmute { background-image: url("../img/csm_present_201201_special/button_mute_02.png"); }

.box08 .video-container #play-button { -webkit-transition: 180ms; position: absolute; right: 1.5vw; bottom: 13.5vw; width: 10vw; height: 10vw; background-size: 100% auto; cursor: pointer; opacity: 0.5; transition: 180ms; }

.box08 .video-container #play-button:hover { opacity: 1; }

.box08 .video-container #play-button.-play { background-image: url("../img/csm_present_201201_special/button_play_01.png"); }

.box08 .video-container #play-button.-stop { background-image: url("../img/csm_present_201201_special/button_play_02.png"); }

.box08 .video-container #play-button.-playback { background-image: url("../img/csm_present_201201_special/button_play_03.png"); opacity: 1; }

.box08 .video-container #play-button.-start { -webkit-transform: translate(50%, 50%); right: 50%; bottom: 50%; width: 20vw; height: 20vw; transform: translate(50%, 50%); }

.box08 .video-container + .notes { margin-bottom: 2.5em; font-size: 3.2vw; text-align: center; }

.box08 #prize-video { width: 95vw; margin: 0 auto; }

.box08 .lottery .c-boxlink { pointer-events: none; }

.box08 .lottery .c-boxlink.-enabled { pointer-events: auto; }

.box02 .node { margin-top: 7.33333vw; }

.box02 .node + .node { margin-top: 13.33333vw; }

.box02 .node .lead { margin: .8em auto; font-size: 3.73333vw; line-height: 1.8; text-align: center; }

.box02 .node .lead p { margin: 0; }

.box02 .node .lead .-em02 { color: #dcb72e; font-weight: 400; }

.box02 .node .lead .-small { font-size: 3.73333vw; }

.box02 .present-title { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-box-align: start; -ms-flex-align: start; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: row nowrap; align-items: flex-start; justify-content: flex-start; width: 94.66667vw; margin: 0 auto; font-weight: 400; }

.box02 .present-title > .badge { width: 24.53333vw; }

.box02 .present-title > span { margin-left: .5em; }

.box02 .slider-parts, .box02 .u-photo { width: 94.66667vw; margin: 2.66667vw auto 0; }

.box07 h3.title { margin: 1.5em auto 0; font-size: 4.53333vw; text-align: center; }

.box07 .lead { max-width: 83.73333vw; }

.slider-caption { margin: 1.0em auto 0; font-size: 4.8vw; text-align: center; }

.slider-caption > p { margin: 0; }

.slider-main { opacity: 0; }

.slider-main.slick-initialized { opacity: 1; }

.slider-main .slider-item .photo { width: 94.66667vw; height: auto; }

.slider-main .slider-item .figure { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; height: 14.66667vw; background-image: url("../img/csm_present_201201_special/slider-deco-left.png"), url("../img/csm_present_201201_special/slider-deco-right.png"); background-position: left 10vw center, right 10vw center; background-repeat: no-repeat, no-repeat; background-size: 11.6vw 4.53333vw, 11.6vw 4.53333vw; font-size: 2.93333vw; text-align: center; }

.slider-main .slider-item .figure > .weekday { display: block; font-family: "Noto Serif JP", serif; font-size: 4.8vw; line-height: 1.8; }

.thumbnail-list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; margin-top: 5.33333vw; }

.thumbnail-list > .thumbnail-item { width: 23.33333vw; margin: 2vw 0 0 0.26667vw; background-position: center bottom; background-repeat: no-repeat; background-size: contain; }

.thumbnail-list > .thumbnail-item:nth-child(1) { background-image: url("../img/csm_present_201201_special/slider-thumb_item01_sp.png"); }

.thumbnail-list > .thumbnail-item:nth-child(2) { background-image: url("../img/csm_present_201201_special/slider-thumb_item02_sp.png"); }

.thumbnail-list > .thumbnail-item:nth-child(3) { background-image: url("../img/csm_present_201201_special/slider-thumb_item03_sp.png"); }

.thumbnail-list > .thumbnail-item:nth-child(4) { background-image: url("../img/csm_present_201201_special/slider-thumb_item04_sp.png"); }

.thumbnail-list > .thumbnail-item:nth-child(5) { background-image: url("../img/csm_present_201201_special/slider-thumb_item05_sp.png"); }

.thumbnail-list > .thumbnail-item:nth-child(6) { background-image: url("../img/csm_present_201201_special/slider-thumb_item06_sp.png"); }

.thumbnail-list > .thumbnail-item:nth-child(7) { background-image: url("../img/csm_present_201201_special/slider-thumb_item07_sp.png"); }

.thumbnail-list > .thumbnail-item.thumbnail-current > .title { border-width: 1.33333vw; border-style: solid; border-color: rgba(255, 255, 255, 0.4); }

.thumbnail-list > .thumbnail-item > .caption { display: block; padding-bottom: .2em; font-size: 2.93333vw; text-align: center; }

.thumbnail-list > .thumbnail-item > .title { -webkit-box-sizing: border-box; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-transition: border 260ms ease-out; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; height: 18.53333vw; border-width: 0; border-style: solid; border-color: transparent; background-position: center center; background-repeat: no-repeat; background-size: contain; font-size: 2.93333vw; line-height: 1.1; transition: border 260ms ease-out; }

.thumbnail-list > .thumbnail-item > .title > span { display: block; width: 100%; padding: 1.6vw 0; background-color: rgba(0, 0, 0, 0.6); text-align: center; }

#caution-container .inner-container { margin-top: 9.33333vw; margin-right: auto; margin-left: auto; padding-right: 2.5%; padding-left: 2.5%; border-style: solid; border-color: #f00; background-color: #fff; color: #000; }

#caution-container .caution-head { font-size: 5.33333vw; text-align: center; }

#caution-container p span { display: inline-block; }

#caution-container + #contact { margin-top: 13.33333vw; }

@media screen and (min-width: 800px) { .-pc { display: block; } .-sp { display: none; } .c-title { font-size: 2.5em; letter-spacing: .2em; line-height: 1; } .c-title:after { width: 320px; height: 5px; margin: 1.4375em auto 0; font-size: 16px; } .c-button-wrap { height: 100px; border-radius: 50px; } .c-button-coat { padding: 5px; } .-enabled .c-button-highlight { -webkit-box-shadow: -4px -4px 2px #424141 inset, 4px 4px 4px #000 inset; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #424242), color-stop(70%, #141414), to(#000)); background-image: linear-gradient(#424242 10%, #141414 70%, #000 100%); box-shadow: -4px -4px 2px #424141 inset, 4px 4px 4px #000 inset; } .c-button-highlight { padding: 5px; border-radius: 45px; font-size: 36px; } .c-button-highlight:after { top: 41%; right: 3.01205vw; width: 18px; height: 18px; border-width: 0.08333em 0.08333em 0 0; }
  .-enabled .c-button-highlight:after { border-width: 5px 5px 0 0; } .c-button { width: 100%; max-width: 840px; padding: 0.72222em 0; font-size: 2.25em; line-height: 1.33; } .c-button:after { top: 41%; right: 1.73611vw; width: 18px; height: 18px; border-width: 0.08333em 0.08333em 0 0; } .u-section { width: 100%; max-width: 840px; } .u-section + .u-section { margin-top: 100px; } .u-section > .lead { width: 100%; max-width: 840px; margin-top: 3.4375em; } .u-section > .lead p { font-size: 16px; line-height: 1.875; } .u-section > .lead.-wrap { width: auto; padding: 10px; } .u-section > .lead.-wrap .u-scrollbox { height: 410px; } .u-section .summary { width: 840px; margin-top: 55px; } .u-section .summary > .list { width: 71.18644vw; font-size: 16px; } .u-section .summary > .list > .term { width: 11.44068vw; } .u-section .summary > .list > .description { width: 59.74576vw; } .u-photo .figure { font-size: 18px; } .u-scrollbox .title { font-size: 14px; line-height: 1.71; } .u-scrollbox .list > .item { font-size: 16px; line-height: 1.71; } .hero-image { max-width: 1180px; } .hero-image .close-message { height: 7.5em; margin-bottom: 1.50em; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7))), url("../img/csm_present_201201_special/heroimage_pc.jpg"); background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/csm_present_201201_special/heroimage_pc.jpg"); font-size: 2.875em; } .content-nav { width: 100%; height: 80px; } .content-nav .border { padding: 4px 0; } .content-nav .background { background-color: #000; } .content-nav .background > .list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0; background: radial-gradient(ellipse closest-side, #323232 30%, #000 100%); } .content-nav .background > .list > .item { width: 25%; height: 8.47458vw; font-size: 2.0339vw; }
  .content-nav .background > .list > .item:nth-child(1), .content-nav .background > .list > .item:nth-child(2), .content-nav .background > .list > .item:nth-child(3), .content-nav .background > .list > .item:nth-child(4) { margin-top: 0; background: none; } .-fixed + .box01 { padding-top: 100px; } .box01 { margin-top: 128px; } .box01 > .howto { margin-top: 115px; } .box01 > .howto > .step { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; width: auto; } .box01 > .howto > .step > .item { width: 50%; margin-top: 0; } .box01 > .howto > .step > .item > .badge-container { margin-bottom: 40px; } .box01 > .howto > .step > .item > .badge-container .badge { width: auto; } .box01 > .howto > .step > .item > .title > span { width: 350px; font-size: 24px; line-height: 1.25; } .box01 > .howto > .step > .item:nth-child(1) > .title > span { width: 350px; } .box01 > .howto > .step > .item:nth-child(2) > .title > span { width: 350px; } .box01 > .howto > .step > .item > .lead { width: 350px; font-size: 16px; } .box08 .movie { width: 100%; max-width: 840px; margin-top: 3.4375em; } .box08 .caption { background-position: left 0.5em center, right 0.5em center; background-size: auto, auto; font-size: 24px; } .box08 .video-container { margin: 20px auto 25px; } .box08 .video-container #mute-button { right: 15px; bottom: 75px; width: 40px; height: 40px; } .box08 .video-container #play-button { right: 15px; bottom: 125px; width: 40px; height: 40px; }
  .box08 .video-container #play-button.-start { width: 150px; height: 150px; } .box08 .video-container + .notes { font-size: 2rem; } .box08 #prize-video { width: 100%; max-width: 992px; } .box02 .node { margin-top: 60px; } .box02 .node + .node { margin-top: 165px; } .box02 .node .lead { font-size: 18px; } .box02 .node .lead .-small { font-size: 16px; } .box02 .present-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; max-width: 840px; } .box02 .present-title > .badge { width: 184px; } .box02 .present-title > span { font-size: 2.54237vw; letter-spacing: .1em; } .box02 .slider-parts, .box02 .u-photo { width: 100%; max-width: 840px; margin-top: 22px; } .box07 h3.title { font-size: 24px; } .box07 .lead { max-width: 500px; margin-top: 30px; text-indent: 1.8em; } .slider-caption { font-size: 30px; } .slider-main .slider-item .photo { width: 840px; } .slider-main .slider-item .figure { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; height: 50px; background-position: left .5em bottom, right .5em bottom; background-size: auto, auto; font-size: 24px; line-height: 1.25; } .slider-main .slider-item .figure > .weekday { display: inline; padding-right: .4em; font-size: 24px; } .slider-main .slider-item .figure > .-pc { padding-right: .4em; } .thumbnail-list { margin-top: 40px; } .thumbnail-list > .thumbnail-item { width: 200px; margin: 1.25em 0 0 13px; } .thumbnail-list > .thumbnail-item:nth-child(1) { margin-left: 0; background-image: url("../img/csm_present_201201_special/slider-thumb_item01_pc.png"); } .thumbnail-list > .thumbnail-item:nth-child(2) { background-image: url("../img/csm_present_201201_special/slider-thumb_item02_pc.png"); } .thumbnail-list > .thumbnail-item:nth-child(3) { background-image: url("../img/csm_present_201201_special/slider-thumb_item03_pc.png"); } .thumbnail-list > .thumbnail-item:nth-child(4) { background-image: url("../img/csm_present_201201_special/slider-thumb_item04_pc.png"); } .thumbnail-list > .thumbnail-item:nth-child(5) { margin-left: 0; background-image: url("../img/csm_present_201201_special/slider-thumb_item05_pc.png"); } .thumbnail-list > .thumbnail-item:nth-child(6) { background-image: url("../img/csm_present_201201_special/slider-thumb_item06_pc.png"); } .thumbnail-list > .thumbnail-item:nth-child(7) { background-image: url("../img/csm_present_201201_special/slider-thumb_item07_pc.png"); } .thumbnail-list > .thumbnail-item.thumbnail-current > .title { border-width: 10px; } .thumbnail-list > .thumbnail-item > .caption { padding-bottom: .3em; font-size: 16px; } .thumbnail-list > .thumbnail-item > .title { height: 113px; border-width: 10px; font-size: 14px; } .thumbnail-list > .thumbnail-item > .title > span { width: 90%; padding: 1.5em 0; } #caution-container .inner-container { width: 780px; margin-top: 70px; border-width: 6px; } #caution-container .caution-head { font-size: 40px; } #caution-container p { font-size: 16px; text-align: center; } #caution-container + #contact { margin-top: 128px; } }

@media screen and (min-width: 1180px) { .u-section .summary > .list { width: 840px; } .u-section .summary > .list > .term { width: 105px; } .u-section .summary > .list > .description { width: 735px; } .content-nav .background > .list > .item { height: 100px; font-size: 24px; } .box02 .present-title > span { font-size: 30px; } }

@media all and (-ms-high-contrast: none) { *::-ms-backdrop:before, *::-ms-backdrop:after, .content-nav:before, .content-nav:after { display: table; content: ''; } }