@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap");
.u-red {
color: #f0027f; }
.u-blue {
color: #002ac6; }
.u-mark {
background: #fffc00;
padding: 0.5rem;
margin: 0 0.5rem; }
body {
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif"; }
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.8.1
*/
html {
color: #000; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0; }
table {
border-collapse: collapse;
border-spacing: 0; }
fieldset, img {
border: 0; }
address, caption, cite, code, dfn, em, strong, th, var, optgroup {
font-style: inherit;
font-weight: inherit; }
del, ins {
text-decoration: none; }
ul li {
list-style: none; }
caption, th {
text-align: left; }
/* h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} */
q:before, q:after {
content: ''; }
abbr, acronym {
border: 0;
font-variant: normal; }
sup {
vertical-align: baseline; }
sub {
vertical-align: baseline; }
legend {
color: #000; }
input, button, textarea, select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit; }
input, button, textarea, select {
*font-size: 100%; }
body.device-type-desktop {
overflow: scroll !important; }
.wrapper .related-programs-subtitle-2TQOq {
color: #333; }
@-webkit-keyframes fadeIn {
0% {
display: none;
opacity: 0; }
1% {
display: block;
opacity: 0; }
100% {
display: block;
opacity: 1; } }
@keyframes fadeIn {
0% {
display: none;
opacity: 0; }
1% {
display: block;
opacity: 0; }
100% {
display: block;
opacity: 1; } }
.wrapper .modal {
display: none; }
.wrapper .modal.active {
display: block; }
.wrapper .btn-more-box .load-more {
display: none; }
#common-footer a {
font-size: 1.2rem; }
.sp-header-banner, .sp-footer-banner {
text-align: center; }
.param-link {
cursor: pointer; }
.cf:after, .clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden; }
.cf, .clearfix {
display: inline-block; }
/* Hides from IE Mac */
* html .cf, * html .clearfix {
height: 1%; }
.cf, .clearfix {
display: block; }
.u-f11 {
font-size: 1.1rem !important; }
.u-f12 {
font-size: 1.2rem !important; }
.u-f13 {
font-size: 1.3rem !important; }
.u-f14 {
font-size: 1.4rem !important; }
.u-f15 {
font-size: 1.5rem !important; }
.u-f16 {
font-size: 1.6rem !important; }
.u-f17 {
font-size: 1.7rem !important; }
.u-f18 {
font-size: 1.8rem !important; }
.u-f19 {
font-size: 1.9rem !important; }
.u-f20 {
font-size: 2.0rem !important; }
.u-f21 {
font-size: 2.1rem !important; }
.u-f22 {
font-size: 2.2rem !important; }
.u-f23 {
font-size: 2.3rem !important; }
.u-f24 {
font-size: 2.4rem !important; }
.u-f25 {
font-size: 2.5rem !important; }
.u-f26 {
font-size: 2.6rem !important; }
.u-f27 {
font-size: 2.7rem !important; }
.u-f28 {
font-size: 2.8rem !important; }
.u-f29 {
font-size: 2.9rem !important; }
.u-f30 {
font-size: 3.0rem !important; }
.u-f31 {
font-size: 3.1rem !important; }
.u-f32 {
font-size: 3.2rem !important; }
.u-f33 {
font-size: 3.3rem !important; }
.u-f34 {
font-size: 3.4rem !important; }
.u-f35 {
font-size: 3.5rem !important; }
.u-f36 {
font-size: 3.6rem !important; }
.u-f37 {
font-size: 3.7rem !important; }
.u-f38 {
font-size: 3.8rem !important; }
.u-f39 {
font-size: 3.9rem !important; }
.u-f40 {
font-size: 4.0rem !important; }
.u-tl {
text-align: left !important; }
.u-tc {
text-align: center !important; }
.u-tr {
text-align: right !important; }
.u-db {
display: block !important; }
.u-di {
display: inline-block !important; }
.u-fl {
float: left !important; }
.u-fr {
float: right !important; }
.u-b {
font-weight: bold !important; }
.u-cp {
cursor: pointer !important; }
.u-vt {
vertical-align: top !important; }
.u-vm {
vertical-align: middle !important; }
.u-vba {
vertical-align: baseline !important; }
.u-vbo {
vertical-align: bottom !important; }
.device-type-desktop .u-mtn {
margin-top: 0 !important; }
.device-type-desktop .u-mts {
margin-top: 1rem !important; }
.device-type-desktop .u-mtm {
margin-top: 2rem !important; }
.device-type-desktop .u-mtl {
margin-top: 3rem !important; }
.device-type-desktop .u-mtx {
margin-top: 4rem !important; }
.device-type-desktop .u-mtxl {
margin-top: 5rem !important; }
.device-type-desktop .u-mbn {
margin-bottom: 0 !important; }
.device-type-desktop .u-mbs {
margin-bottom: 1rem !important; }
.device-type-desktop .u-mbm {
margin-bottom: 2rem !important; }
.device-type-desktop .u-mbl {
margin-bottom: 3rem !important; }
.device-type-desktop .u-mbx {
margin-bottom: 4rem !important; }
.device-type-desktop .u-mbxl {
margin-bottom: 5rem !important; }
.device-type-desktop .u-mln {
margin-left: 0 !important; }
.device-type-desktop .u-mls {
margin-left: 1rem !important; }
.device-type-desktop .u-mlm {
margin-left: 2rem !important; }
.device-type-desktop .u-mll {
margin-left: 3rem !important; }
.device-type-desktop .u-mlx {
margin-left: 4rem !important; }
.device-type-desktop .u-mlxl {
margin-left: 5rem !important; }
.device-type-desktop .u-mrn {
margin-right: 0 !important; }
.device-type-desktop .u-mrs {
margin-right: 1rem !important; }
.device-type-desktop .u-mrm {
margin-right: 2rem !important; }
.device-type-desktop .u-mrl {
margin-right: 3rem !important; }
.device-type-desktop .u-mrx {
margin-right: 4rem !important; }
.device-type-desktop .u-mrxl {
margin-right: 5rem !important; }
.device-type-desktop .u-mra {
margin-right: auto !important; }
.device-type-desktop .u-mla {
margin-left: auto !important; }
.device-type-desktop .u-mca {
margin-left: auto !important;
margin-right: auto !important; }
.device-type-desktop .u-ptn {
padding-top: 0 !important; }
.device-type-desktop .u-pts {
padding-top: 1rem !important; }
.device-type-desktop .u-ptm {
padding-top: 2rem !important; }
.device-type-desktop .u-ptl {
padding-top: 3rem !important; }
.device-type-desktop .u-ptx {
padding-top: 4rem !important; }
.device-type-desktop .u-ptxl {
padding-top: 5rem !important; }
.device-type-desktop .u-pbn {
padding-bottom: 0 !important; }
.device-type-desktop .u-pbs {
padding-bottom: 1rem !important; }
.device-type-desktop .u-pbm {
padding-bottom: 2rem !important; }
.device-type-desktop .u-pbl {
padding-bottom: 3rem !important; }
.device-type-desktop .u-pbx {
padding-bottom: 4rem !important; }
.device-type-desktop .u-pbxl {
padding-bottom: 5rem !important; }
.device-type-desktop .u-pln {
padding-left: 0 !important; }
.device-type-desktop .u-pls {
padding-left: 1rem !important; }
.device-type-desktop .u-plm {
padding-left: 2rem !important; }
.device-type-desktop .u-pll {
padding-left: 3rem !important; }
.device-type-desktop .u-plx {
padding-left: 4rem !important; }
.device-type-desktop .u-plxl {
padding-left: 5rem !important; }
.device-type-desktop .u-prn {
padding-right: 0 !important; }
.device-type-desktop .u-prs {
padding-right: 1rem !important; }
.device-type-desktop .u-prm {
padding-right: 2rem !important; }
.device-type-desktop .u-prl {
padding-right: 3rem !important; }
.device-type-desktop .u-prx {
padding-right: 4rem !important; }
.device-type-desktop .u-prxl {
padding-right: 5rem !important; }
.device-type-mobile .u-mtn {
margin-top: 0 !important; }
.device-type-mobile .u-mts {
margin-top: 1rem !important; }
.device-type-mobile .u-mtm {
margin-top: 1.5rem !important; }
.device-type-mobile .u-mtl {
margin-top: 2rem !important; }
.device-type-mobile .u-mtx {
margin-top: 3rem !important; }
.device-type-mobile .u-mtxl {
margin-top: 3.5rem !important; }
.device-type-mobile .u-mbn {
margin-bottom: 0 !important; }
.device-type-mobile .u-mbs {
margin-bottom: 1rem !important; }
.device-type-mobile .u-mbm {
margin-bottom: 1.5rem !important; }
.device-type-mobile .u-mbl {
margin-bottom: 2rem !important; }
.device-type-mobile .u-mbx {
margin-bottom: 3rem !important; }
.device-type-mobile .u-mbxl {
margin-bottom: 3.5rem !important; }
.device-type-mobile .u-mln {
margin-left: 0 !important; }
.device-type-mobile .u-mls {
margin-left: 1rem !important; }
.device-type-mobile .u-mlm {
margin-left: 1.5rem !important; }
.device-type-mobile .u-mll {
margin-left: 2rem !important; }
.device-type-mobile .u-mlx {
margin-left: 3rem !important; }
.device-type-mobile .u-mlxl {
margin-left: 3.5rem !important; }
.device-type-mobile .u-mrn {
margin-right: 0 !important; }
.device-type-mobile .u-mrs {
margin-right: 1rem !important; }
.device-type-mobile .u-mrm {
margin-right: 1.5rem !important; }
.device-type-mobile .u-mrl {
margin-right: 2rem !important; }
.device-type-mobile .u-mrx {
margin-right: 3rem !important; }
.device-type-mobile .u-mrxl {
margin-right: 3.5rem !important; }
.device-type-mobile .u-mra {
margin-right: auto !important; }
.device-type-mobile .u-mla {
margin-left: auto !important; }
.device-type-mobile .u-mca {
margin-left: auto !important;
margin-right: auto !important; }
.device-type-mobile .u-ptn {
padding-top: 0 !important; }
.device-type-mobile .u-pts {
padding-top: 1rem !important; }
.device-type-mobile .u-ptm {
padding-top: 1.5rem !important; }
.device-type-mobile .u-ptl {
padding-top: 2rem !important; }
.device-type-mobile .u-ptx {
padding-top: 3rem !important; }
.device-type-mobile .u-ptxl {
padding-top: 3.5rem !important; }
.device-type-mobile .u-pbn {
padding-bottom: 0 !important; }
.device-type-mobile .u-pbs {
padding-bottom: 1rem !important; }
.device-type-mobile .u-pbm {
padding-bottom: 1.5rem !important; }
.device-type-mobile .u-pbl {
padding-bottom: 2rem !important; }
.device-type-mobile .u-pbx {
padding-bottom: 3rem !important; }
.device-type-mobile .u-pbxl {
padding-bottom: 3.5rem !important; }
.device-type-mobile .u-pln {
padding-left: 0 !important; }
.device-type-mobile .u-pls {
padding-left: 1rem !important; }
.device-type-mobile .u-plm {
padding-left: 1.5rem !important; }
.device-type-mobile .u-pll {
padding-left: 2rem !important; }
.device-type-mobile .u-plx {
padding-left: 3rem !important; }
.device-type-mobile .u-plxl {
padding-left: 3.5rem !important; }
.device-type-mobile .u-prn {
padding-right: 0 !important; }
.device-type-mobile .u-prs {
padding-right: 1rem !important; }
.device-type-mobile .u-prm {
padding-right: 1.5rem !important; }
.device-type-mobile .u-prl {
padding-right: 2rem !important; }
.device-type-mobile .u-prx {
padding-right: 3rem !important; }
.device-type-mobile .u-prxl {
padding-right: 3.5rem !important; }
/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow: visible !important; }
#cboxWrapper {
max-width: none; }
#cboxOverlay {
position: fixed;
width: 100%;
height: 100%; }
#cboxMiddleLeft, #cboxBottomLeft {
clear: left; }
#cboxContent {
position: relative; }
#cboxLoadedContent {
overflow: auto;
-webkit-overflow-scrolling: touch; }
#cboxTitle {
margin: 0; }
#cboxLoadingOverlay, #cboxLoadingGraphic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
cursor: pointer; }
.cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
max-width: none;
-ms-interpolation-mode: bicubic; }
.cboxIframe {
width: 100%;
height: 100%;
display: block;
border: 0;
padding: 0;
margin: 0; }
#colorbox, #cboxContent, #cboxLoadedContent {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; }
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
background: #000;
opacity: 0.9;
filter: alpha(opacity=90); }
#colorbox {
outline: 0; }
#cboxContent {
margin-top: 32px;
overflow: visible; }
#cboxError {
padding: 50px;
border: 1px solid #ccc; }
#cboxLoadedContent {
padding: 0px; }
#cboxLoadingGraphic {
background: url(../common-img/colorbox/loading.gif) no-repeat center center; }
#cboxLoadingOverlay {
background: #000; }
#cboxTitle {
position: absolute;
top: -22px;
left: 0;
color: #000; }
#cboxCurrent {
position: absolute;
top: -22px;
right: 205px;
text-indent: -9999px; }
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
border: 0;
padding: 0;
margin: 0;
overflow: visible;
text-indent: -9999px;
width: 20px;
height: 20px;
position: absolute;
top: -20px;
background: url(../common-img/colorbox/controls.png) no-repeat 0 0; }
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
outline: 0; }
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {
right: 66px; }
.cboxSlideshow_on #cboxSlideshow {
background-position: -75px -25px;
right: 44px; }
.cboxSlideshow_on #cboxSlideshow:hover {
background-position: -100px -25px; }
.cboxSlideshow_off #cboxSlideshow {
background-position: -100px 0px;
right: 44px; }
.cboxSlideshow_off #cboxSlideshow:hover {
background-position: -75px -25px; }
/*
orijinal
*/
.device-type-desktop #cboxLoadedContent {
background: none; }
.device-type-desktop #cboxContent {
margin-top: 60px;
background: none; }
.device-type-desktop #cboxClose {
color: #ffffff;
text-indent: -9999px;
top: -70px;
width: 70px;
height: 70px;
right: -17px;
background: url(../common-img/close.png); }
.device-type-mobile #cboxContent {
margin-top: 6.0rem;
background: none; }
.device-type-mobile #cboxClose {
color: #ffffff;
text-indent: -9999px;
top: -4.9rem;
width: 5.0rem;
height: 5.0rem;
right: -1.0rem;
background: url(../common-img/close.png);
background-size: 5.0rem; }
#cboxClose {
outline: none; }
/** faq
/**************************************/
.faq_content dt, .faq_content dd {
position: relative; }
.faq_content dt > div:before, .faq_content dd > div:before {
width: 50px;
height: 47px;
font-size: 2.5rem;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #fff;
position: absolute;
left: 20px;
padding-bottom: 3px; }
.faq_content dt {
background-color: #eaeaea;
cursor: pointer;
padding: 21px 20px 21px 90px;
margin-top: 20px;
position: relative;
border-radius: 40px; }
.faq_content dt .is-point {
position: absolute;
top: -100px; }
.faq_content dt > div {
width: calc(100% - 70px); }
.faq_content dt > div:before {
content: 'Q';
background-color: #393939;
top: 15px;
border-radius: 50%; }
.faq_content dt p {
font-size: 1.8rem;
line-height: 1.4;
width: calc(100% - 70px);
padding-top: 5px;
font-weight: bold; }
.faq_content dt i {
top: 28px; }
.faq_content dd {
padding: 30px 20px 25px 90px;
display: none; }
.faq_content dd > div:before {
content: 'A';
background-color: #ff0000;
top: 16px;
border-radius: 50%; }
.faq_title {
font-size: 1.6rem;
font-weight: 500;
margin-bottom: 5px;
line-height: 1.6; }
.faq_attention + .faq_title {
margin-top: 15px; }
.faq_title:before {
content: '■ '; }
.faq_body {
font-size: 1.6rem;
line-height: 1.75;
font-weight: 400; }
.faq_body a {
text-decoration: underline; }
.faq_list li {
font-size: 1.4rem;
line-height: 1.85714;
padding-left: 1em;
text-indent: -1em;
font-weight: 400; }
.faq_list li:before {
content: '・'; }
.faq_attention {
margin-top: 10px; }
.faq_attention li {
font-size: 1.2rem;
line-height: 1.6;
padding-left: 1em;
text-indent: -1em; }
/** accordion
/**************************************/
.js-accordion dt.is-opened i {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.js-accordion dt.is-opened i:before {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); }
.js-accordion dt i {
width: 22px;
height: 22px;
position: absolute;
right: 30px;
display: block;
-webkit-transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1); }
.js-accordion dt i:before, .js-accordion dt i:after {
background-color: #000;
display: block;
content: '';
position: absolute;
-webkit-transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1); }
.js-accordion dt i:before {
width: 4px;
height: 100%;
top: 0;
left: calc(50% - 2px); }
.js-accordion dt i:after {
width: 100%;
height: 4px;
left: 0;
top: calc(50% - 2px); }
body {
-webkit-text-size-adjust: 100%; }
p,
h2,
div {
max-height: 999999px;
-webkit-text-size-adjust: 100%; }
html {
font-size: 62.5%; }
body {
background: url(../img/bg-stripe.png) repeat center top;
letter-spacing: 0.03em; }
em {
font-weight: bold; }
body.brightcove {
min-width: 670px !important;
margin-top: 0;
background: none;
overflow: hidden !important; }
body.brightcove iframe {
overflow: hidden; }
body.embed {
width: 970px;
margin-top: 0;
padding-top: 0;
background: none;
min-width: 970px !important;
overflow-x: hidden !important;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif"; }
body.embed::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
height: 7px; }
body.embed::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }
body.embed .h3-ttl {
font-size: 24px;
line-height: 24px;
color: #000;
font-weight: bold; }
body.embed .gray-box {
padding: 20px;
background-color: #e9e9e9;
overflow: hidden !important; }
body.embed .gray-box em {
font-weight: bold; }
body.embed .gray-box a {
color: #000; }
body.embed .gray-box a:hover {
text-decoration: none; }
body.embed .gray-box .order-list li {
padding-left: 3em;
text-indent: -3em; }
body.embed .gray-box .maru-order-list li {
padding-left: 4em;
text-indent: -1.3em; }
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 102px;
background-color: rgba(255, 255, 255, 0.95);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
z-index: 5; }
#header .header_logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 2px 0;
box-sizing: border-box; }
#header .header_logo span {
display: block;
padding: 10px 15px; }
#header .header_logo img {
width: 100%; }
#header .header_btn {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
#header .header_btn a {
display: block;
width: 146px;
height: 102px;
padding: 60px 0 0;
text-decoration: none;
font-size: 15.39px;
box-sizing: border-box;
text-align: center;
color: #fff; }
#header .header_btn a:hover {
opacity: 0.8; }
#header .header_btn a.off {
pointer-events: none;
color: rgba(255, 255, 255, 0.2); }
#header .header_btn .buy {
background: #ff0000 url(../img/btn1.png) no-repeat top 17px center; }
#header .header_btn .buy.off {
background: #ff0000 url(../img/btn1_off.png) no-repeat top 17px center; }
#header .header_btn .watch {
background: #393939 url(../img/btn2.png) no-repeat top 24px center; }
#header .header_btn .watch.off {
background: #393939 url(../img/btn2_off.png) no-repeat top 24px center; }
#footer {
background: #f5f5f5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 2px 4px 0 #000;
box-shadow: 0 2px 4px 0 #000;
font-size: 14px;
font-family: Meiryo,Roboto,sans-serif;
}
#footer .footer-area {
margin: 0 auto;
padding: 60px 0 56.5px;
max-width: 1280px;
width: 96%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#footer .footer-logo {
margin-right: 19.25926%;
margin-bottom: 2.77778%;
}
#footer .footer-logo a {
display: inline-block;
}
#footer .footer-logo img {
width: 100%;
}
#footer .link {
display: block;
width: 145px;
}
#footer .link:hover {
opacity: 0.6;
}
#footer .footer-link {
width: 280px;
margin-left: 30px;
}
#footer .footer-link:first-child {
margin-left: 0;
}
#footer .footer-link-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#footer .footer-link li {
padding: 20px 0;
border-bottom: solid 1px #dcdcdc;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
list-style-type: none;
}
#footer .footer-link .pc {
border-bottom: none;
}
#footer .footer-link li:nth-child(odd) {
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
}
#footer .footer-link li:nth-child(even) {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
}
#footer .footer-link a {
display: inline;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
color: #343434;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}
#footer .footer-link a:hover {
opacity: 0.6;
}
#footer .footer-link .log {
padding: 12px 0;
width: 132px;
background-color: white;
border-radius: 36px;
display: inline-block;
color: #343434;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#footer .footer-link .log:first-child {
margin-right: 11px;
}
#footer .footer-link .log:hover {
opacity: 0.6;
}
#footer .copyright {
padding: 30px 0 67px;
color: #fff;
background: #000;
text-align: center;
font-size: 12px;
letter-spacing: 1.08px;
line-height: 36px;
}
.device-type-mobile,
.sp {
display: none !important; }
.main-container {
color: #333333; }
.main-container a:link,
.main-container a:visited,
.main-container a:hover,
.main-container a:active {
color: #d80086; }
.main-container a:link,
.main-container a:visited {
text-decoration: underline; }
.main-container a:hover,
.main-container .a:active {
text-decoration: none; }
#wrapper {
background: url(../img/bg.png) repeat-y center top;
font-size: 1.6rem;
line-height: 3.2rem;}
#wrapper img {
vertical-align: bottom;
max-width: 100%; }
#wrapper .opac {
opacity: 1;
filter: alpha(opacity=100);
display: block;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out; }
#wrapper .opac:hover {
-webkit-animation: backToOpac1 0.7s linear 0s;
animation: backToOpac1 0.7s linear 0s; }
@-webkit-keyframes backToOpac1 {
0% {
opacity: 0.4; }
100% {
opacity: 1; } }
@keyframes backToOpac1 {
0% {
opacity: 0.4; }
100% {
opacity: 1; } }
#wrapper .modal {
position: relative;
outline: none; }
#wrapper .flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
#wrapper .main-container {
width: 1080px;
margin: 0 auto;
padding: 170px 0 80px; }
#wrapper .main-container .h2-ttl {
margin-bottom: 50px;
font-size: 55.13px;
line-height: 55.13px;
color: #000;
text-align: center;
font-weight: bold;
font-family: 'Noto Sans JP', sans-serif; }
#wrapper .main-container .h2-ttl span {
margin-top: 22px;
font-size: 22px;
line-height: 22px;
margin-left: 30px; }
#wrapper .main-container .h3-ttl {
font-size: 24px;
line-height: 36px;
color: #000;
font-weight: bold;
margin-bottom: 3rem; }
#wrapper .main-container .h4-ttl {
font-size: 16px;
line-height: 30px;
font-weight: bold; }
#wrapper .main-container .mv-box {
text-align: center; }
#wrapper .main-container .mv-box .lead-txt {
margin: 40px 0;
font-weight: bold;
font-size: 18px;
color:#000;
line-height: 20px; }
#wrapper .main-container .mv-box .notes-list {
margin: 40px 0;
line-height: 28px;
font-size: 14px;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
font-weight: 600;
text-align: left; }
#wrapper .main-container .mv-box .notes-list a {
color: #e1004b; }
#wrapper .main-container .mv-box .event-title {
padding: 10px 0 10px;
width: 100%;
margin: 25px 0 15px;
font-size: 18px;
padding: 20px 30px;
line-height: 20px;
box-sizing: border-box;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.8);
color: #fff; }
#wrapper .main-container .mv-box .event-info {
padding: 10px 0 10px;
width: 100%;
margin-bottom: 15px;
font-size: 20px;
font-weight: bold;
padding: 20px 0;
line-height: 30px; }
#wrapper .main-container .mv-box .event-day {
padding: 10px 0 10px;
width: 100%;
margin: 0 30px 0;
font-size: 18px;
font-weight: bold;
line-height: 30px;
text-align: left; }
#wrapper .main-container .mv-box .event-list {
margin: 10px 0 0 50px;
font-size: 18px;
font-weight: bold;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
text-align: left; }
#wrapper .main-container .mv-box .event-list li {
margin: 0 0 20px;
line-height: 30px;
list-style: disc; }
#wrapper .main-container .mv-box .mv {
width: 900px;
display: block;
margin: 0 auto; }
#wrapper .main-container .contents-box {
padding: 30px 50px;
background-color: rgba(255, 255, 255, 0.95); }
#wrapper .main-container .contents-box.payment {
padding: 40px 50px; }
#wrapper .main-container .contents-box.payment .day {
font-size: 20px;
font-weight: bold;
margin: 3rem 0 1rem; }
#wrapper .main-container .contents-box.payment .consent {
padding-left: 30px;
font-size: 13px;
line-height: 13px;
letter-spacing: 0.5px; }
#wrapper .main-container .contents-box.payment .consent .btn-style {
position: relative;
cursor: pointer;
padding: 0 !important; }
#wrapper .main-container .contents-box.payment .consent .btn-type1 {
width: 285px;
height: 80px;
margin: 35px auto 0;
outline: 0;
object-fit: contain;
background-color: #ff0000;
color: #ffffff;
font-size: 24px;
font-weight: bold;
line-height: 80px;
letter-spacing: 1px;
text-align: center;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
border-radius: 40px; }
#wrapper .main-container .contents-box.payment .consent .btn-type1:hover {
opacity: 0.8; }
#wrapper .main-container .contents-box.payment .consent .btn-type1.off {
opacity: 0.2;
pointer-events: none; }
#wrapper .main-container .contents-box.payment .consent .check-type1 {
position: relative;
cursor: pointer;
width: 18px;
height: 18px;
vertical-align: middle; }
#wrapper .main-container .contents-box.payment .consent .check-type1 + .btn-style:before {
position: absolute;
z-index: 1;
top: 4px;
left: -18px;
width: 10px;
height: 5px;
content: "";
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75), -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
-webkit-transform: rotate(-45deg) scale(0, 0);
transform: rotate(-45deg) scale(0, 0);
border: 2px solid #000;
border-top-style: none;
border-right-style: none;
pointer-events: none; }
#wrapper .main-container .contents-box.payment .consent .check-type1:checked + .btn-style:before {
-webkit-transform: rotate(-45deg) scale(1, 1);
transform: rotate(-45deg) scale(1, 1); }
#wrapper .main-container .contents-box.payment .consent .check-type1 + .btn-style:after {
position: absolute;
top: -2px;
left: -23px;
content: "";
cursor: pointer;
width: 18px;
height: 18px;
border: solid 2px #aabad9;
background-color: #ffffff;
pointer-events: none; }
#wrapper .main-container .contents-box.payment .consent .check-type1:checked + .btn-style:after {
border: solid 2px #aabad9;
background-color: #ffffff;
width: 18px;
height: 18px; }
#wrapper .main-container .contents-box.payment .consent label {
display: block;
margin-bottom: 30px;
text-align: center; }
#wrapper .main-container .contents-box.payment .consent span {
display: inline-block;
font-size: 16px;
padding: 2px 15px 5px;
vertical-align: top; }
#wrapper .main-container .contents-box.payment .consent p {
text-align: center; }
#wrapper .main-container .contents-box.payment .consent p.btn {
margin-bottom: 20px; }
#wrapper .main-container .contents-box .money-box {
padding: 22px 7px 13px 30px;
border: 4px solid #b5b5b5;
font-weight: bold;
margin: 0 5px 0;
text-align: right; }
#wrapper .main-container .contents-box .money-box span {
display: inline-block;
vertical-align: text-bottom; }
#wrapper .main-container .contents-box .money-box .money {
line-height: 19.39px;
font-size: 19.39px; }
#wrapper .main-container .contents-box .money-box .figure {
margin-left: 30px;
line-height: 25.14px;
font-size: 25.14px; }
#wrapper .main-container .contents-box .money-box .tax {
line-height: 17.6px;
font-size: 17.6px; }
#wrapper .main-container .contents-box .txt {
font-size: 20px;
line-height: 36px;
color: #031759; }
#wrapper .main-container .contents-box .radio-btn {
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
flex-direction: column;
margin-bottom: 2rem; }
#wrapper .main-container .contents-box .radio-btn .radio-btn-wrap {
width: 100%; }
#wrapper .main-container .contents-box .radio-btn .radio-btn-wrap p {
width: 100%;
margin-bottom: 15px;
font-size: 18px;
padding: 20px 30px;
line-height: 20px;
background-color: #ffdf78;
box-sizing: border-box;
border-radius: 30px; }
#wrapper .main-container .contents-box .radio-btn .radio-btn-wrap p.w-100 {
width: 100%;
position: relative; }
#wrapper .main-container .contents-box .radio-btn .radio-btn-wrap p input {
display: inline-block;
height: 20px;
margin-right: 30px;
vertical-align: middle; }
#wrapper .main-container .contents-box .radio-btn .radio-btn-wrap .pay_money {
margin-left: 20px;
font-weight: bold;
right: 30px;
position: absolute; }
#wrapper .main-container .contents-box .light_blue-box {
padding: 20px;
background-color: #ffe329; }
#wrapper .main-container .contents-box .light_blue-box .txt {
color: #000000;
font-weight: bold; }
#wrapper .main-container .contents-box .light_blue-box .txt span {
display: block;
font-size: 17px;
margin-left: 15px; }
#wrapper .main-container .contents-box .gray-box {
padding: 20px;
background-color: #e9e9e9; }
#wrapper .main-container .contents-box .gray-box .txt {
font-size: 16px;
line-height: 30px;
color: #000; }
#wrapper .main-container .contents-box .end-box {
padding: 150px 0;
text-align: center; }
#wrapper .main-container .contents-box .terms-box iframe {
width: 100%;
height: 200px; }
#wrapper .list-indent-box li {
text-indent: -16px;
margin-left: 16px; }
body.terms .order-list li {
padding-left: 3em;
text-indent: -3em; }
body.terms .maru-order-list li {
padding-left: 4em;
text-indent: -1.3em; }
body.terms .kiyaku {
font-size: 40px !important; }
body.hanseikai #wrapper .main-container .h2-ttl {
margin-bottom: 2.5rem;
font-size: 3rem;
line-height: 2.35rem;
color: #ff002b;
text-align: center;
font-weight: bold;
text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
font-family: 'Noto Sans JP', sans-serif; }
body.hanseikai #wrapper .main-container .h2-caption {
margin-bottom: 1.5rem;
font-size: 1.6rem;
line-height: 1.75rem;
color: #ff002b;
text-align: center;
font-weight: bold;
text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
font-family: 'Noto Sans JP', sans-serif; }
body.hanseikai .main-container {
width: 1080px;
margin: 0 auto;
padding: 0 !important; }
body.hanseikai .terms-box2 iframe {
width: 100%;
height: 25rem !important;
max-height: 25rem !important; }
body.hanseikai .btn {
text-align: center; }
body.hanseikai .btn-type1 {
padding: 1.5rem 4rem;
/* height: 4rem; */
margin: 1.5rem auto 1.5rem;
outline: 0;
object-fit: contain;
background-color: #ff002b;
color: #ffffff;
font-size: 2.2rem;
font-weight: bold;
line-height: 4rem;
letter-spacing: 1px;
text-align: center;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
border-radius: 8rem; }
body.hanseikai .btn-type1:hover {
opacity: 0.8; }
body.hanseikai .btn-type1.off {
opacity: 0.2;
pointer-events: none; }
body.hanseikai .after-box {
width: 100%;
text-align: center;
border: 5px solid #ff4f6d;
padding: 4rem 0;
margin: 7rem auto 5rem;
font-family: 'Noto Sans JP', sans-serif;
text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8); }
body.hanseikai .after-box .catch {
font-size: 5rem;
font-weight: 900;
margin: 3rem auto;
color: #ff002b; }
body.hanseikai .after-box p {
font-size: 2rem;
font-weight: 900;
line-height: 4rem; }
body.campaign {
background: #ffffff;
margin: 0;
padding: 0; }
body.campaign #header-wrap {
background: url(../campaign/img/bg.jpg) no-repeat top center;
min-height: 752px; }
body.campaign .con {
width: 1080px;
margin: 0 auto;
padding: 80px 0; }
body.campaign #header-image {
width: 50%;
float: right;
font-family: 'Noto Sans JP', sans-serif; }
body.campaign h1.h1-ttl {
font-size: 41px;
font-weight: 900;
line-height: 45px;
color: #2871fa;
text-align: center;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
margin: 4rem 0 3rem; }
body.campaign .h1-catch {
font-size: 22px;
font-weight: 700;
line-height: 35px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
margin: 0 3rem; }
body.campaign .catch1 {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
line-height: 35px;
margin: 1rem 3rem;
font-weight: 700;
font-size: 22px; }
body.campaign .catch1 span {
font-size: 31px;
color: #ff0000;
text-indent: -40px; }
body.campaign .catch2 {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
line-height: 31px;
margin: 1rem 1rem 1rem 3rem;
font-weight: 700;
font-size: 22px; }
body.campaign .catch2 span {
font-size: 27px;
color: #f0000f; }
body.campaign .main-container {
width: 1080px;
margin: 0 auto;
padding: 0 !important; }
body.campaign .campaign-box {
width: 100%; }
body.campaign .campaign-box dt {
background: #ffe329;
padding: 1.5rem 2rem;
font-weight: bold;
font-size: 20px; }
body.campaign .campaign-box dd {
padding: 3rem 2rem 4rem;
font-size: 18px; }
body.campaign .campaign-box dd span {
font-size: 15px;
color: #f0000f;
line-height: 25px;
display: block;
margin: 1rem 0; }
body.campaign .campaign-box dd li {
list-style: disc;
margin: 1rem 2rem; }
body.campaign .catch2-coin {
margin: 0.5rem 1.5rem 0;
position: relative;
min-height: 3rem; }
body.campaign .catch2-coin img {
position: absolute;
right: 20%; }
body.campaign .btn-box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
body.campaign .btn {
width: 40%;
height: 80px;
margin: 35px auto 0;
outline: 0;
object-fit: contain;
background-color: #177ecd;
color: #ffffff;
font-size: 24px;
font-weight: bold;
line-height: 80px;
letter-spacing: 1px;
text-align: center;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
border-radius: 40px; }
body.campaign .btn a {
color: #FFFFFF;
text-decoration: none; }
body.campaign .btn:hover {
opacity: 0.8; }
body.campaign .btn.off {
opacity: 0.2;
pointer-events: none; }
body.campaign .footer-area {
text-align: center;
display: block !important; }
body.campaign .footer-area .footer-logo {
width: auto !important; }
.youtube-box {
position: relative;
height: 0;
padding-bottom: 56.25%; }
.youtube-box iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0; }
.bold {
font-weight: bold;
}