@charset "UTF-8";
/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Play");
#colorbox, #cbox2Overlay, #cbox2Wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
}
#cbox2Overlay {
  position: fixed;
  width: 100%;
  height: 100%;
}
#cbox2MiddleLeft, #cbox2BottomLeft {
  clear: left;
}
#cbox2Content {
  position: relative;
  overflow: hidden;
  padding-bottom: 20px;
}
#cbox2LoadedContent {
  overflow: auto;
}
#cbox2LoadedContent iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
#cbox2Title {
  margin: 0;
}
#cbox2LoadingOverlay, #cbox2LoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#cbox2Previous, #cbox2Next, #cbox2Close, #cbox2Slideshow {
  cursor: pointer;
}
/*
    Example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cbox2Overlay {
  background: black url(//deagostini.jp/site/common/overlay.png) 0 0 repeat;
}
#cbox2TopLeft {
  width: 21px;
  height: 21px;
  background: none -100px 0 no-repeat;
}
#cbox2TopRight {
  width: 21px;
  height: 21px;
  background: none -129px 0 no-repeat;
}
#cbox2BottomLeft {
  width: 21px;
  height: 21px;
  background: none -100px -29px no-repeat;
}
#cbox2BottomRight {
  width: 21px;
  height: 21px;
  background: none -129px -29px no-repeat;
}
#cbox2MiddleLeft {
  width: 21px;
  background: none left top repeat-y;
}
#cbox2MiddleRight {
  width: 21px;
  background: none right top repeat-y;
}
#cbox2TopCenter {
  height: 21px;
  background: none 0 0 repeat-x;
}
#cbox2BottomCenter {
  height: 21px;
  background: none 0 -29px repeat-x;
}
/* #cbox2Content{background:;}*/
#cbox2LoadedContent {
  margin-bottom: 28px;
  padding: 30px 60px 0px;
}
#cbox2Title {
  position: absolute;
  top: 636px;
  left: 60px;
  text-align: left;
  width: 860px;
  font-size: 14px;
  color: #FFF;
  font-weight: bold;
  text-shadow: 1px 1px 3px #000;
}
#cbox2Current {
  position: absolute;
  top: 10px;
  left: 60px;
  color: #FFFFFF;
}
#cbox2Slideshow {
  position: absolute;
  bottom: 3px;
  right: 30px;
  color: #FFFFFF;
}
#cbox2Previous {
  left: 10px;
  transform: rotate(-135deg);
}
#cbox2Next {
  right: 10px;
  transform: rotate(45deg);
}
#cbox2LoadingOverlay {
  background: url(//deagostini.jp/site/common/loading_background.png) center center no-repeat;
}
#cbox2LoadingGraphic {
  background: url(//deagostini.jp/site/common/loading.gif) center center no-repeat;
}
#cbox2Close {
  position: absolute;
  bottom: 11px;
  right: 60px;
  background: url(../images/colorbox_close.png);
  background-position: left 4px;
  background-repeat: no-repeat;
  width: 87px;
  height: 32px;
  text-indent: -9999px;
  border: 0px;
  border-radius: 5px;
}
/*
    The following fixes png-transparency for IE6.
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.
    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background images are relative to the CSS document.
*/
#cbox2Previous,
#cbox2Next {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  width: 40px;
  height: 40px;
  margin: auto;
  padding: 0;
  text-indent: -9999px;
  border-style: solid;
  border-width: 8px 8px 0 0;
  border-color: #fff #fff transparent transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10000;
}
#cbox2Previous:hover,
#cbox2Next:hover {
  opacity: 0.7;
}
input::-moz-focus-inner, button::-moz-focus-inner {
  border: 0;
}
/* リセット
---------------------------------------------------- */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
}
fieldset,
img {
  border: 0;
  vertical-align: top;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
small,
th,
var {
  font-style: inherit;
  font-weight: inherit;
}
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;
}
br {
  letter-spacing: normal;
}
/* to preserve line-height and selector appearance */
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
  *font-size: 100%;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
}
html {
  min-width: 1200px;
  font-size: 10px;
}
@media screen and (max-width: 767px) {
  html {
    min-width: inherit;
    font-size: 1.5625vw;
  }
}
body {
  font-family: "Noto Sans Japanese", sans-serif !important;
  font-size: 1.6rem !important;
  letter-spacing: 0;
  line-height: 1.6 !important;
}
@media screen and (max-width: 767px) {
  body {
    min-width: 0;
    font-size: 2.4rem !important;
  }
}
a {
  text-decoration: none;
}
a:focus {
  /*colorboxの青枠*/
  outline: none;
}
#colorbox:focus {
  /*colorboxの青枠*/
  outline: none;
}
h2 {
  text-align: center;
}
h2 img {
  margin: auto;
}
hr {
  border: none;
}
img,
svg {
  vertical-align: top;
}
@media screen and (max-width: 767px) {
  img {
    max-width: 100%;
  }
}
em {
  font-style: normal;
}
.inner {
  max-width: 1000px;
  margin: auto;
  position: relative;
}
@media screen and (max-width: 767px) {
  .inner:not(.spPd0) {
    padding-left: 4.6875vw;
    padding-right: 4.6875vw;
  }
}
.hvr {
  transition: 0.3s;
}
.hvr:hover {
  opacity: 0.7;
}
*[class^="abs"] {
  display: block;
  position: absolute;
}
@media screen and (max-width: 767px) {
  .spScrlX {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}
@media screen and (max-width: 767px) {
  #wrapper {
    overflow: hidden;
  }
}
.footerlink {
  font-size: 12px;
}
.footerlink li {
  font-size: inherit;
}
@media screen and (max-width: 767px) {
  .footerCopyright {
    padding: 15px 0;
  }
  .footerCopyright .footerCopyrightInner {
    padding-bottom: 0;
  }
  .footerCopyright .footerCopyrightInner a img {
    width: 56px;
  }
  .footerCopyright .footerCopyrightInner > img {
    width: 305px;
  }
}
.bg1 {
  background: url("../../images/bg1.jpg") center top repeat;
}
/*--------------------------------------
  ページ内共通
---------------------------------------*/
/*--------- 定期ボタン ---------*/
.btnBox {
  display: block;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.btnBox a:before {
  content: "";
  opacity: 0;
  transition: 0.3s;
}
.btnBox a img {
  display: block;
  width: 100%;
}
.btnBox a:hover:before {
  display: block;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  opacity: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  .btnBox {
    width: 100%;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 767px) {
  .btnBox a img {
    height: auto;
  }
  .btnBox a img.pcShow {
    display: none;
  }
}
.preNote {
  color: #FFF;
  padding-top: 0.8em;
}
/*--------- プレゼント ---------*/
.teikiPre {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .teikiPre {
    padding-left: 2.34375vw;
    padding-right: 2.34375vw;
  }
}
@media screen and (max-width: 767px) {
  .teikiPre img {
    width: 100%;
    height: auto;
  }
}
.teikiPre .in > .ttl {
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  .teikiPre .in > .ttl {
    width: 90.625vw;
    margin: 0 auto 3.125vw;
  }
}
.teikiPre .in > .btnBox {
  margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
  .teikiPre .in > .btnBox {
    margin-bottom: 4.6875vw;
  }
}
.teikiPre .in > .txt {
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  .teikiPre .in > .txt {
    width: 90.625vw;
    margin: 0 auto 2.34375vw;
  }
}
.teikiPre .preBox {
  width: 1000px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .teikiPre .preBox {
    width: auto;
  }
}
.teikiPre .preBox a {
  display: block;
  margin-bottom: 20px;
  cursor: zoom-in;
  transition: opacity 0.3s;
}
.teikiPre .preBox a:hover {
  opacity: 0.5;
}
.teikiPre .preNote {
  margin-top: 25px;
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .teikiPre .preNote {
    margin-top: 2.34375vw;
    font-size: 1.6rem;
  }
}
.teikiPre .preNote strong {
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .teikiPre .preNote strong {
    font-size: 1.2rem;
    letter-spacing: -0.05em;
    line-height: inherit;
  }
}
.preWeb {
  margin-bottom: 10px;
}
.btnBox.off {
  opacity: 0.2;
}
.alertTxt2 {
  color: #c90915;
  font-size: 110%;
  font-weight: bold;
}
.fontB {
  font-weight: bold;
}
.orderPage {
  background-color: #000;
}
@media screen and (max-width: 767px) {
  .orderPage {
    height: auto;
  }
}
.orderPage h3 {
  font-weight: bold;
}
.orderPage .teikiPre {
  color: #fff;
  background-size: cover;
}
.orderPage .teikiPre .in {
  max-width: 980px;
  margin: auto;
  padding: 50px 30px;
}
@media screen and (max-width: 767px) {
  .orderPage .teikiPre .in {
    padding: 3% 2.5%;
  }
}
.orderPage .teikiPre .txt {
  padding-left: 0;
}
.orderPage .teikiPre .preNote {
  margin-top: 0px;
  text-align: center;
  padding-bottom: 2em;
}
@media screen and (max-width: 767px) {
  .orderPage .teikiPre .preNote {
    text-align: left;
  }
}
.orderPage .note {
  text-align: left;
}
.orderPage .note span {
  font-size: 1em;
}
.selectArea.noOrder {
  width: 190px;
  position: absolute;
  left: -200px;
  background: #ccc;
  margin-top: 5px;
}
.selectArea.noOrder:after {
  background: url(../images/order/arrow3.png) no-repeat;
}
.btnBox img:hover {
  opacity: 0.8;
}
.fontRed {
  font-weight: bold;
}
.aboutLink {
  font-size: 80%;
}
h1 {
  background: #c90915;
  border-bottom: 1px solid #fff;
  padding: 15px 5%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  h1 {
    padding: 10px 5%;
  }
}
.preZone {
  padding: 40px 0 50px;
  max-width: 980px;
  margin: 0 auto;
}
.preZone .taC {
  text-align: center;
}
.preZone .preBox {
  padding: 15px 0;
  text-align: center;
}
.preZone .preBox a + a img {
  margin-top: 10px;
}
.preZone img {
  max-width: 100%;
  height: auto;
  margin-top: 20px;
}
.preZone .clearfix p {
  text-align: left;
}
.preZone .preNote {
  margin-top: 0px;
  padding: 0.5em 0 1em 0;
  text-align: left;
  font-size: 0.7rem;
  line-height: 1.6;
}
.preZone .preNote strong {
  display: block;
}
@media screen and (max-width: 767px) {
  .preZone .preBox a + a img {
    margin-top: 1%;
  }
}
.fontRed {
  color: #ff0008;
}
.btnCluboffTxt {
  color: #1995cd !important;
}
.orderBox {
  background: #1c120d;
  padding-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .orderBox {
    background-size: 6.09375vw auto;
  }
}
.orderBox h2 {
  position: relative;
  text-align: center;
  top: -50px;
}
.orderBox h2.ttl2 {
  top: 0px!important;
  padding: 20px 0!important;
}
.kumitateSelect .selectArea label b {
  text-indent: -5px;
  margin-left: 4px;
  display: inline-block;
  width: 250px;
  vertical-align: middle;
}
/* グレーアウト */
.sectionWrap {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  border-radius: 7px;
  top: 0px;
  background: rgba(0, 0, 0, 0.6);
}
.sectionWrap2 {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.6);
  display: none;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}
.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: inline;
  }
}
/* グレーアウト */
section:not(.teikiPre) {
  max-width: 980px;
  background: #fff;
  margin: 0 auto;
  width: 95%;
  border-radius: 8px;
  padding: 20px;
  position: relative;
  margin-bottom: 30px;
  box-sizing: border-box;
}
.sectionWrap {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.6);
}
h3 {
  font-size: 22px;
  color: #000;
  border-bottom: 1px solid #000;
  padding: 0 0 15px 0;
  margin: 0 0 15px 230px;
  position: relative;
}
h3 .icon {
  position: absolute;
  right: 0px;
  top: 0px;
}
@media screen and (max-width: 767px) {
  h3 .icon {
    width: 25vw;
    top: -2vw;
  }
  h3 .icon.case {
    top: -3vw;
  }
}
h3 span {
  display: inline-block;
  vertical-align: middle;
}
h3 span.line2 {
  line-height: 2;
}
h3 span .font {
  font-size: 1rem;
}
h3 span strong {
  font-size: 80%;
}
@media screen and (max-width: 767px) {
  h3 span strong {
    display: block;
  }
}
h3 em {
  font-style: normal;
  font-size: 70%;
  color: #fff;
  background: #c90915;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 50px;
  display: inline-block;
  padding: 8px 10px;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  h3 span .font {
    display: block;
    font-size: 0.7rem;
  }
}
.photo {
  position: absolute;
  left: 19px;
  top: 15px;
}
.txt {
  padding: 0 0 0 230px;
  font-size: 14px;
}
.txt .leadTxt {
  font-size: 20px;
  padding: 0px 0 10px 0;
}
.red {
  color: red;
  font-weight: bold;
}
.step1 h3 {
  margin: 0 0 15px 320px;
}
@media screen and (max-width: 767px) {
  .step1 h3.od2 {
    margin-left: 0;
  }
}
.step1 .photo {
  top: 20px;
  left: 38px;
  width: 260px;
}
.step1 .photo.od2 {
  width: 135px;
  left: 80px;
}
@media screen and (max-width: 767px) {
  .step1 .photo.od2 {
    width: 100%;
    text-align: center;
    margin-bottom: 5vw;
  }
  .step1 .photo.od2 img {
    max-width: 55%;
  }
}
.step1 .photo img {
  width: 100%;
  height: auto;
}
.step1 .priceTxt li.fontPrice {
  display: block;
  margin-top: 10px;
}
.step1 .txt {
  padding: 0 0 0 320px;
}
.step1 .txt.od2 {
  min-height: 180px;
}
@media screen and (max-width: 767px) {
  .step1 .txt.od2 {
    padding-left: 0px;
    min-height: 0px;
    width: 100%;
  }
}
.step1 .selectArea {
  margin-left: 340px;
  margin-top: 40px;
}
.leadTxt2 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.bgPink {
  background: #c90915;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
}
.priceTxt {
  letter-spacing: -0.4em;
  padding: 0 0 10px 0;
}
.priceTxt.p2 {
  padding-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .priceTxt.p2 {
    padding-bottom: 0px;
  }
}
.fontS {
  font-size: 12px !important;
  margin-bottom: 10px;
}
.fontL {
  font-size: 20px !important;
}
.fontPrice {
  font-size: 20px;
  font-weight: bold;
  color: #c90915;
}
.fontPrice .fontS {
  color: #333;
  font-weight: normal;
}
.priceTxt li {
  letter-spacing: normal;
  display: inline-block;
  margin-right: 15px;
  vertical-align: middle;
  line-height: 1.2;
}
.priceTxt li.fontPrice {
  line-height: 1.4;
}
.fontPrice.kumitatePrice,
.fontPrice strong {
  font-size: 130%;
}
.fontPrice small {
  color: #333;
  font-weight: normal;
  font-size: 80%;
  padding-top: 0.5em;
  display: block;
}
.selectArea {
  margin-top: 15px;
  background: #fffe4d;
  padding: 20px 0px 20px 15px;
  border-radius: 5px;
  position: relative;
  margin-left: 230px;
}
.selectArea input[type="checkbox"], .selectArea input[type="radio"] {
  opacity: 0;
  position: absolute;
}
.selectArea label {
  display: inline-block;
  font-size: 18px;
  vertical-align: middle;
  cursor: pointer;
  font-weight: bold;
}
.selectArea input[type="checkbox"]:checked + label:before,
.selectArea input[type="radio"]:checked + label:before {
  background: url(../images/order/check.png) no-repeat left top;
}
.selectArea input[type="checkbox"] + label:before,
.selectArea input[type="radio"] + label:before {
  content: "";
  display: inline-block;
  background: url(../images/order/check.png) no-repeat left bottom;
  width: 36px;
  height: 36px;
  vertical-align: middle;
  margin-right: 10px;
  flex-shrink: 0;
}
.selectArea select {
  padding: 5px;
  width: 100%;
}
.selectArea:after {
  content: "";
  display: inline-block;
  background: url(../images/order/arrow2.png) no-repeat;
  width: 73px;
  height: 54px;
  position: absolute;
  bottom: -51px;
  left: 50%;
}
.selectArea.noFlow:after {
  display: none;
}
.selectArea.teiki label em {
  margin-left: 140px;
  position: relative;
  font-weight: bold;
}
.selectArea.teiki--2 label em {
  margin-left: 10px;
}
.selectArea.binder label span {
  margin-left: 5px;
  position: relative;
}
.selectArea li {
  display: inline-block;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .selectArea label {
    align-items: center;
    display: flex;
    width: 80vw;
  }
}
.btnBox {
  padding: 0 0 30px 0;
  text-align: center;
  position: relative;
}
.btnBox .btnWrap {
  background: rgba(238, 238, 238, 0.8);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}
.preZone .preBox img.spShow,
.spShow {
  display: none;
}
.fontPrice em {
  font-style: normal;
  font-size: 80%;
}
.col2Section h3 {
  margin: 0 0 15px 0;
}
.kumitateSelect {
  letter-spacing: -0.5em;
}
.kumitateSelect .selectArea {
  margin-left: 0px;
}
.kumitateSelect .col2 {
  display: inline-block;
  position: relative;
  width: 49%;
  vertical-align: top;
  letter-spacing: normal;
  box-sizing: border-box;
}
.kumitateSelect .col2 .photo {
  position: absolute;
  left: 0px;
  top: 60px;
}
.kumitateSelect .col2.col2R {
  margin-left: 10px;
}
.kumitateSelect.kumitate2 {
  margin-left: -220px;
  margin-right: -10px;
}
.kumitateSelect .col3 {
  display: inline-block;
  position: relative;
  width: 32%;
  vertical-align: top;
  letter-spacing: normal;
  box-sizing: border-box;
}
.kumitateSelect .col3.col3R {
  margin-left: 10px;
}
.kumitateSelect.kumitate2 .selectArea label b {
  width: 227px;
}
.kumitateSelect .selectArea label {
  font-size: 19px;
}
.col2Section .txt {
  padding-left: 210px;
}
.recordImg {
  float: left;
}
.kumitateSelect .leadTxt {
  border-bottom: 2px solid #000;
  text-align: center;
  padding: 0 0 5px 0;
  font-size: 20px;
  margin-bottom: 3%;
  font-weight: bold;
}
.col2Section .lead2 {
  font-size: 140%;
  line-height: 1.6;
  padding-bottom: 1%;
}
.scrlTxt {
  height: 236px;
  background: #fff;
  width: 980px;
  margin: 15px auto;
  margin-bottom: 30px;
  border: 1px solid #a3a3a3;
  box-sizing: border-box;
  overflow: scroll;
}
.scrlTxt p {
  padding: 25px 25px 0px 25px;
  font-size: 14px;
  line-height: 1.428;
}
.siharaiTxt {
  text-align: center;
  font-size: 180%;
  padding: 10px 0 0px 0;
  font-weight: bold;
}
.douiBox {
  text-align: center;
  padding-bottom: 20px;
}
.douiBox label {
  font-size: 18px;
  cursor: pointer;
}
.douiBox label input {
  width: 42px;
  height: 29px;
  margin-right: 4px;
}
.kiyakuWrap {
  display: none;
}
.selectArea label small {
  font-size: 50%;
  font-weight: normal;
}
.selectArea label em {
  font-style: normal;
}
.kiyakuTtl {
  text-align: center;
  font-size: 140%;
  padding: 10px 0;
  font-weight: bold;
}
/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox,
#cbox2Overlay,
#cbox2Wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
}
#cbox2Overlay {
  position: fixed;
  width: 100%;
  height: 100%;
}
#cbox2MiddleLeft,
#cbox2BottomLeft {
  clear: left;
  position: absolute;
}
#cbox2Content {
  position: relative;
  overflow: hidden;
  padding-bottom: 0px;
  padding-top: 30px;
}
#cbox2LoadedContent {
  overflow: auto;
}
#cbox2LoadedContent iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
#cbox2Title {
  margin: 0;
}
#cbox2LoadingOverlay,
#cbox2LoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#cbox2Previous,
#cbox2Next,
#cbox2Close,
#cbox2Slideshow {
  cursor: pointer;
}
/*
    Example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cbox2Overlay {
  background: black url(//deagostini.jp/site/common/overlay.png) 0 0 repeat;
}
#cbox2TopLeft {
  width: 0px;
  height: 21px;
  background: none -100px 0 no-repeat;
}
#cbox2TopRight {
  width: 21px;
  height: 21px;
  background: none -129px 0 no-repeat;
}
#cbox2BottomLeft {
  width: 21px;
  height: 21px;
  background: none -100px -29px no-repeat;
}
#cbox2BottomRight {
  width: 21px;
  height: 21px;
  background: none -129px -29px no-repeat;
}
#cbox2MiddleLeft {
  width: 21px;
  background: none left top repeat-y;
}
#cbox2MiddleRight {
  width: 21px;
  background: none right top repeat-y;
}
#cbox2TopCenter {
  height: 21px;
  background: none 0 0 repeat-x;
}
#cbox2BottomCenter {
  height: 21px;
  background: none 0 -29px repeat-x;
}
/* #cbox2Content{background:;}*/
#cbox2LoadedContent {
  margin-bottom: 28px;
  padding: 0px;
}
#cbox2Title {
  position: absolute;
  top: 636px;
  left: 60px;
  text-align: left;
  width: 860px;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 3px #000;
}
#cbox2Current {
  position: absolute;
  top: 10px;
  left: 60px;
  color: #ffffff;
}
#cbox2Slideshow {
  position: absolute;
  bottom: 3px;
  right: 30px;
  color: #ffffff;
}
#cbox2Previous {
  left: 10px;
  transform: rotate(-135deg);
}
#cbox2Next {
  right: 10px;
  transform: rotate(45deg);
}
#cbox2LoadingOverlay {
  background: url(//deagostini.jp/site/common/loading_background.png) center center no-repeat;
}
#cbox2LoadingGraphic {
  background: url(//deagostini.jp/site/common/loading.gif) center center no-repeat;
}
#cbox2Close {
  transition: 0 !important;
  top: 0px;
  right: -5px;
  background: url(../../images/colorbox_close.png);
  background-position: left 4px;
  background-repeat: no-repeat;
  padding: 15px;
  width: 87px;
  height: 32px;
  text-indent: -9999px;
  border: 0px;
  border-radius: 0px;
}
/*
    The following fixes png-transparency for IE6.
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.
    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background images are relative to the CSS document.
*/
#cbox2Previous,
#cbox2Next {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  width: 40px;
  height: 40px;
  margin: auto;
  padding: 0;
  text-indent: -9999px;
  border-style: solid;
  border-width: 8px 8px 0 0;
  border-color: #fff #fff transparent transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10000;
}
#cbox2Previous:hover,
#cbox2Next:hover {
  opacity: 0.7;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
}
@media screen and (max-width: 767px) {
  .cbox2Photo {
    width: 100vw;
    height: auto;
  }
  #cbox2Close {
    position: fixed;
    top: 0;
    right: 0;
  }
  #colorbox,
  #cbox2Overlay,
  #cbox2Wrapper {
    overflow: visible;
  }
  .selectArea.step2 {
    margin-top: 1px;
  }
  .selectArea.noOrder {
    position: static;
    width: auto;
    border-radius: 0px;
  }
  .selectArea.noOrder:after {
    display: none;
    background-image: none;
  }
  .selectArea.noOrder label {
    width: 300px;
  }
  .preZone img {
    margin-top: 1%;
  }
  .step1 {
    height: auto;
  }
  .step1 h3 {
    margin: 0 0 15px 0px;
  }
  .step1 .photo {
    top: 10px;
    text-align: center;
    width: auto;
    left: 0px;
    display: block;
  }
  .step1 .photo img {
    width: 60%;
    height: auto;
  }
  .step1 .txt {
    padding: 0 0 0 0px;
    width: auto;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .step1 .txt {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .step1 .selectArea {
    margin-left: -8px;
    margin-top: 3%;
  }
  .step1 .priceTxt {
    text-align: center;
  }
  .kumitateSelect.kumitate2 {
    margin-left: 0px;
    margin-right: 0px;
  }
  .kumitateSelect .col3 {
    display: block;
    width: auto;
  }
  .kumitateSelect .col3.col3R {
    margin-left: 0px;
  }
  .kumitateSelect .col3:first-child label b {
    text-indent: 0px;
  }
  .kumitateSelect.kumitate2 .selectArea label b {
    width: 87%;
    flex-shrink: 0;
  }
  .preZone {
    width: auto;
  }
  .preZone .preBox {
    width: auto;
  }
  .preZone .preBox .preBg {
    width: auto;
  }
  .preZone .preBox a {
    display: block;
    padding-bottom: 5px;
  }
  .preZone .preBox a img {
    width: 100%;
  }
  .preZone .preBox img.pcShow {
    display: none;
  }
  .preZone .preBox img.spShow {
    display: inline;
  }
  .spShow {
    display: inline;
  }
  .kumitateSelect .selectArea label b {
    width: 80%;
    text-indent: -13px;
    margin-left: 13px;
    vertical-align: middle;
  }
  .preZone .preBox .preBg > * {
    position: static;
  }
  .pageOrder img {
    width: 100%;
    height: auto;
  }
  .preZone {
    padding: 3% 0%;
  }
  .preZone .preBox {
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 0px;
  }
  .preZone .preBox > .preBg {
    height: auto;
    box-sizing: border-box;
    background-size: cover;
    border: 3px solid #ffffff;
    padding: 2%;
  }
  .preZone .preBox > .preBg > * {
    position: static;
  }
  .preZone .preBox > .preBg > .imgNo3 {
    display: block;
    margin-top: -4%;
  }
  .preZone .preBox > .preBg > .imgNo1 {
    top: 0px;
    left: 0;
    position: relative;
  }
  .preZone .preBox > .preBg > .imgNo4 {
    margin-top: 5px;
    display: block;
  }
  .preZone .clearfix > a {
    display: none;
  }
  .orderBox h2 {
    width: 75%;
    margin: 0 auto;
    top: -20px;
  }
  section {
    padding: 8px 8px 0px 8px;
  }
  .selectArea {
    padding: 8px 0 8px 8px;
    margin: 10px -8px 0 -8px;
    border-radius: 0px;
  }
  h3 {
    margin: 0 0 3% 0;
    padding: 0 0 2% 0;
    font-size: 14px;
  }
  .photo {
    position: static;
    text-align: left;
    display: inline-block;
    width: 33%;
    vertical-align: top;
  }
  .photo img {
    width: 95%;
    height: auto;
  }
  .txt {
    display: inline-block;
    width: 65%;
    padding: 1% 0 0 0px;
    font-size: 14px;
    text-align: left;
    vertical-align: top;
  }
  .txt.is_no2 {
    display: block;
    width: auto;
  }
  .fontL {
    font-size: 12px !important;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .sitei {
    font-size: 11px;
  }
}
@media screen and (max-width: 767px) {
  .priceTxt li {
    margin-right: 5px;
    font-size: 12px;
  }
  .bgPink {
    padding: 6px;
  }
  .priceTxt {
    padding: 0px 0 9px 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .priceTxt.spFlex {
    display: flex;
  }
  .priceTxt.spFlex .bgPink {
    flex-shrink: 0;
    margin-right: 5px;
  }
}
@media screen and (max-width: 767px) {
  .priceTxt li.fontPrice {
    font-size: 14px;
    margin: 0px 0 0 0;
    padding-bottom: 0px;
    line-height: 1.2;
  }
  .fontS {
    font-size: 9px !important;
    line-height: 1.4;
  }
  .selectArea label {
    font-size: 13px;
  }
  .selectArea label small {
    display: block;
  }
  .selectArea.teiki label em {
    display: inline-block;
    margin-left: 105px;
    vertical-align: middle;
  }
  .selectArea label span {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
  }
  .selectArea label span.subTxt {
    width: 83%;
  }
  .selectArea.binder label span {
    display: inline-block;
    margin-left: 0px;
    vertical-align: middle;
  }
  .numSelect p {
    font-size: 9px;
  }
  .selectArea input[type="checkbox"]:checked + label:before {
    background-size: 30px 60px;
  }
  .selectArea input[type="checkbox"] + label:before {
    background-size: 30px 60px;
    margin-right: 5px;
    width: 30px;
    flex-shrink: 0;
    height: 30px;
  }
  .selectArea select {
    padding: 7px;
  }
  .btnBox {
    padding: 0 2%;
  }
  .txt .leadTxt {
    font-size: 13px;
    line-height: 1.4;
  }
  .txt .leadTxt.spMB0 {
    margin-bottom: 0;
  }
  .txt .leadTxt br {
    display: none;
  }
  .fontS br {
    display: none;
  }
  h3.step2Ttl {
    font-size: 12px;
  }
  h3 em {
    margin-right: 5px;
    padding: 1px 5px 0px 5px;
    line-height: 15px;
    height: 15px;
  }
  .fontPrice small {
    display: block;
    padding-top: 3%;
  }
  .numSelect {
    padding-left: 0px;
  }
  .teiki .numSelect,
  .binder .numSelect {
    top: 12px;
    left: 42px;
  }
  .selectArea select {
    padding: 5px 0px 5px 2px;
    font-size: 11px;
    line-height: 31px;
    height: 31px;
    box-sizing: border-box;
    margin-top: -4px;
  }
  .selectArea::after {
    width: 53px;
    height: 34px;
    bottom: -33px;
    left: 41%;
    background-size: contain;
  }
  .preZone > p {
    margin-bottom: 10px;
  }
  .preZone .preBox > .clearfix {
    padding-top: 10px;
  }
  .preZone .preBox > .clearfix p {
    font-size: 11px;
    line-height: 1.4;
  }
  .priceTxt li.fontPrice em {
    font-size: 80%;
  }
  .pcShow {
    display: none;
  }
  .mlNone {
    margin-left: -52%;
    padding-top: 3vw;
  }
  .kumitateSelect .col2 {
    display: block;
    width: auto;
    margin-bottom: 0px;
  }
  .kumitateSelect .leadTxt {
    font-size: 14px;
  }
  .col2Section .lead2 {
    font-size: 100%;
  }
  .kumitateSelect .col2 .photo {
    position: static;
  }
  .kumitateSelect .col2.col2R {
    margin-left: 0px;
    margin-top: 1px;
  }
  .kumitateSelect .selectArea label {
    font-size: 14px;
  }
  .col2Section .txt {
    padding-left: 0px;
    display: inline-block;
  }
  .kumitateSelect .selectArea {
    margin: 1px -8px 0 -8px;
  }
  .kumitateSelect .selectArea.noArrow:after {
    display: none;
  }
  .fontPrice {
    font-size: 14px;
  }
  .siharaiTxt {
    font-size: 120%;
  }
  .scrlTxt {
    height: 180px;
    background: #fff;
    width: 95%;
  }
  .scrlTxt p {
    padding: 10px 10px 0px 10px;
  }
}
@media screen and (max-width: 321px) {
  .selectArea label {
    font-size: 11px;
  }
}
section:not(.teikiPre).campaign-block {
  background: #d3101e;
  padding: 0px;
  overflow: hidden;
  border: 1px solid #cf0000;
}
section:not(.teikiPre).campaign-block dl {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
section:not(.teikiPre).campaign-block dl dt {
  width: 25%;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  font-size: 1.6rem;
  font-weight: bold;
}
section:not(.teikiPre).campaign-block dl dd {
  display: flex;
  box-sizing: border-box;
  width: 75%;
  background: #fff;
  align-items: center;
  padding: 13px;
}
section:not(.teikiPre).campaign-block dl dd p {
  font-size: 1.4rem;
  margin-left: 1em;
}
section:not(.teikiPre).campaign-block dl dd input {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  max-width: 300px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  section:not(.teikiPre).campaign-block dl {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  section:not(.teikiPre).campaign-block dl dt {
    padding: 10px;
    font-size: 2.4rem;
    width: auto;
  }
}
@media screen and (max-width: 767px) {
  section:not(.teikiPre).campaign-block dl dd {
    display: block;
    width: auto;
  }
}
@media screen and (max-width: 767px) {
  section:not(.teikiPre).campaign-block dl dd input {
    margin-bottom: 0.3em;
    font-size: 2rem;
  }
}
.copyright {
  display: flex;
  align-items: flex-end;
  margin-top: 40px;
  line-height: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.copyright img {
  width: 118px;
}
.copyright p {
  margin-left: 0.5em;
  font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
  .copyright {
    display: block;
    margin-top: 6.25vw;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .copyright img {
    width: 18.4375vw;
  }
}
@media screen and (max-width: 767px) {
  .copyright p {
    margin: 1.5625vw 0 0;
  }
}
.caseCol2 {
  display: flex;
  justify-content: space-between;
}
.caseCol2 .selectArea {
  width: 48%;
  margin-left: 0px;
}
@media screen and (max-width: 767px) {
  .caseCol2 {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .caseCol2 .selectArea {
    width: auto;
  }
  .caseCol2 .selectArea.binder:after {
    display: none;
  }
  .caseCol2 .selectArea:last-of-type {
    margin-top: 1px;
  }
}
.leadTxt.MT10 {
  margin-top: 10px;
  border-top: 1px dotted #ccc;
  padding-top: 15px;
}
.leadTxt.MT10 strong {
  font-weight: bold;
  color: #0077c7;
}
.leadTxt.MT10 br {
  display: inline !important;
}
h3 strong.mag {
  position: absolute;
  color: #cf0000;
  border: 1px solid #cf0000;
  padding: 0.3em 0.5em 0.2em;
  line-height: 1.2;
  right: 25px;
  top: 15px;
  font-size: 1.6rem;
  text-align: left;
}
@media screen and (max-width: 767px) {
  h3 strong.mag {
    border: 0px;
    padding: 0.5em 0px 0px 0px;
    font-size: 1.8rem;
    display: block;
    position: static;
  }
  h3 strong.mag br {
    display: none;
  }
}
.leadTxt2 {
  text-align: left;
  color: #0E51B7;
  font-weight: bold;
  font-size: 17px;
}
@media screen and (max-width: 767px) {
  .leadTxt2 {
    font-size: 14px;
  }
}
.selectArea2 {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .selectArea2 {
    display: flex;
  }
}
.selectArea2 li {
  display: flex;
  background-color: #fffe4d;
  padding: 15px;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  .selectArea2 li {
    flex-wrap: wrap;
  }
  .selectArea2 li + li {
    border-top: 5px solid #FFF;
  }
}
.selectArea2 li.off:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fffe4d;
  opacity: .6;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10;
}
.selectArea2 li em {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .selectArea2 li em {
    font-size: 2.4rem;
  }
}
.selectArea2 li.gray {
  background-color: #ccc;
}
.selectArea2 li.gray:after {
  background: url(../images/order/arrow3.png) no-repeat;
}
@media screen and (min-width: 768px) {
  .selectArea2 li.w20 {
    width: 20%;
  }
  .selectArea2 li.w30 {
    width: 30%;
  }
  .selectArea2 li.w40 {
    width: 40%;
  }
  .selectArea2 li.w50 {
    width: 50%;
  }
  .selectArea2 li.w60 {
    width: 60%;
  }
  .selectArea2 li.w70 {
    width: 70%;
  }
  .selectArea2 li.w80 {
    width: 80%;
  }
}
@media screen and (min-width: 768px) {
  .selectArea2 li + li {
    margin-left: 10px;
  }
}
.selectArea2 li .numSelect {
  margin-left: 0.5em;
}
@incude mq {
  .selectArea2 li .numSelect small {
    font-size: 10px;
  }
}
@media screen and (max-width: 767px) {
  .selectArea2 li .numSelect {
    margin: 5px 0 0 0;
  }
}
.selectArea2 li .numSelect select {
  padding: 0.3em;
}
.selectArea2 li::after {
  content: "";
  display: inline-block;
  background: url(../images/order/arrow2.png) no-repeat;
  width: 73px;
  height: 54px;
  position: absolute;
  bottom: -51px;
  margin-left: -35px;
  left: 50%;
}
.selectArea2 input[type="checkbox"], .selectArea2 input[type="radio"] {
  opacity: 0;
  position: absolute;
}
.selectArea2 label {
  display: flex;
  font-size: 18px;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  font-weight: bold;
}
.selectArea2 input[type="checkbox"]:checked + em:before,
.selectArea2 input[type="radio"]:checked + em:before {
  background: url(../images/order/check.png) no-repeat left top;
}
.selectArea2 input[type="checkbox"] + em:before,
.selectArea2 input[type="radio"] + em:before {
  content: "";
  display: inline-block;
  background: url(../images/order/check.png) no-repeat left bottom;
  width: 36px;
  height: 36px;
  vertical-align: middle;
  margin-right: 10px;
  flex-shrink: 0;
}
.priceBox {
  display: flex;
  padding: 15px;
  border-radius: 10px;
  background-color: #feffbd;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
  .priceBox {
    display: block;
    margin-bottom: 0px;
  }
}
.priceBox .img {
  margin-right: 25px;
}
@media screen and (max-width: 767px) {
  .priceBox .img {
    margin-right: 0px;
  }
}
.priceBox p {
  font-size: 16px;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .priceBox p {
    font-size: 13px;
    margin-top: 5px;
  }
}
.priceBox p .red {
  color: red;
}
.caseTtl {
  margin-top: -8px;
  padding: 25px 0 25px 0;
}
@media screen and (max-width: 767px) {
  .caseTtl {
    padding: 20px 0;
  }
  h3 .icon.case {
    top: 0px;
    width: 30vw;
  }
}
.notesBox {
  margin: 0 auto;
  background-color: #fffaae;
  border-radius: 10px;
  padding: 15px;
  box-sizing: border-box;
  width: 95%;
  margin-bottom: 20px;
  font-size: 1.4rem;
  max-width: 980px;
}
@media screen and (max-width: 767px) {
  .notesBox {
    padding: 4vw;
    margin-top: 3vw;
    font-size: 12px;
  }
}
.notesBox li {
  text-indent: -2em;
  margin-left: 2em;
}
.notesBox li + li {
  margin-top: 5px;
}
.notes {
  color: #000;
  padding: 0 0 1em 0;
}
@media screen and (max-width: 767px) {
  .notes {
    padding-top: .8em;
    margin-left: -30vw;
  }
}
.notes li {
  text-indent: -.8em;
  margin-left: .8em;
  font-size: 1.4rem;
  text-align: left;
}
.box-pr {
  background-color: #fbffd7;
  padding: 25px;
  max-width: 700px;
  margin: 20px auto;
  border-radius: 20px;
}
@media screen and (max-width: 767px) {
  .box-pr {
    margin: 0 0 2vw 0;
    padding: 3vw;
  }
}
.box-pr .toshoBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .box-pr .toshoBox {
    align-items: stretch;
  }
}
.box-pr .toshoBox dt {
  display: flex;
  width: 100px;
  font-size: 2rem;
  height: 50px;
  color: #FFF;
  background-color: #ce131c;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 15px;
}
@media screen and (max-width: 767px) {
  .box-pr .toshoBox dt {
    width: 22vw;
    height: auto;
    flex-shrink: 0;
    font-size: 2.6rem;
  }
}
.box-pr .toshoBox dd {
  color: #000;
  font-size: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .box-pr .toshoBox dd {
    font-size: 2.2rem;
  }
}
.box-pr .toshoBox dd em {
  color: #ce131c;
}
.box-pr .toshoBox dd em span {
  font-size: 120%;
}
.box-pr p {
  font-size: 1.2rem;
  color: #000;
  font-weight: bold;
  margin-top: 10px;
}
@media screen and (max-width: 767px) {
  .box-pr p {
    margin-top: 1vw;
    font-size: 1rem;
  }
}
/*# sourceMappingURL=srcmap/order.css.map */