@charset"UTF-8";

.newyear__subblock{ color: #000; margin: 0 auto; padding: 0 0 50px 0; margin-top: 16px; background: url('../img/newyear-present/newyear-bg.jpg'); }

figure{ margin: 0; padding: 0; width: 100%; }
figure img { width: 100%; height: auto; vertical-align: top; margin: 0 auto; display: block; }

.gw-heading { position: relative; margin-bottom: 20px; }
.gw-heading h3 { position: absolute; left: 0; top: 15%; width: 100%; z-index:2; text-align: center; }
.gw-heading h3 figure { width: 70%; margin: 0 auto; }
.shimenawa { position: absolute; left: 0; bottom: 12%; width: 100%; text-align: center; }
.shimenawa figure { width: 30%; margin: 0 auto; }

/* Greeting PART */
.frame-wrapper { padding: 30px; margin-bottom: 30px; overflow: hidden; }
.outer-frame { position: relative; background: white; border: solid 2px #b5935e; border-radius: 8px; padding: 8px; width: auto; box-sizing: border-box; }

.outer-frame span.kazarikei{
  display: block;
  width: 50px;
  height: 50px;
  background: url('../img/newyear-present/corner-bg.jpg') no-repeat center center;
  border-radius: 50%;
  border-top: 2px solid #b5935e;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  position: absolute;
}

.outer-frame span.kazarikei.corner-lt { left: -29px; top: -29px; transform: rotate(135deg) }
.outer-frame span.kazarikei.corner-rt { right: -29px; top: -29px; transform: rotate(225deg) }
.outer-frame span.kazarikei.corner-lb { left: -29px; bottom: -29px; transform: rotate(45deg) }
.outer-frame span.kazarikei.corner-rb { right: -29px; bottom: -29px; transform: rotate(315deg) }
.outer-frame .kazari { position: absolute; max-width: 100px; height: auto; }
.outer-frame .kazari.sasa { max-width: 6.83%; width: 10%; left : 50%; top: -12px; transform: translateX(-50%); }
.outer-frame .kazari.yanagi { max-width: 13.67%; right: -38px; top: 15%; }
.outer-frame .kazari.kamon { max-width: 10.25%; left: -30px; bottom: 20%; opacity: 0.4; }
.outer-frame .kazari.ume { max-width: 5.12%; left: 45%; bottom: 8%; opacity: 0.85; transform: rotate(5deg); }
.outer-frame .kazari.ume2 { max-width: 2.56%; left: 43%; bottom: 18%; opacity: 0.85; transform: rotate(-5deg); }
.outer-frame .kazari.tsuru { max-width: 18.8%; right: 30%; bottom: 8%; opacity: 0.25; }
.outer-frame .kazari.nami { max-width: 17%; right: 0; bottom: 0; opacity: 0.2; }
.outer-frame .kazari.kumo01 { max-width: 21.36%; left: -50px; top: 18%; opacity: 0.4; }
.outer-frame .kazari.kumo02 { max-width: 21.36%; right: -50px; top: 50%; opacity: 0.4; }

.inner-frame { display: grid; grid-template-columns: 25% auto; gap: 3%; justify-content: center; width: 100%; padding: 50px 0; box-sizing: border-box; border: solid 1px #b5935e; position: relative; z-index: 1; }

.greet-txt { writing-mode: vertical-rl; order: 2; letter-spacing: 0.25em; }
.greet-txt em { text-indent: -2.5em; padding-left: 0; transform: translateY(2.5em); font-style: normal; display: block; font-size: 34px; line-height: 1.8em; font-weight: 700; margin: 0 0 0 1.0em; }
.greet-txt em.baikyu { font-size: 27px; margin-right: 1.0em; }
.greet-txt p { font-size: 18px; font-weight: 500; line-height: 1.6; letter-spacing: 0.15em; }

.catalog-info { order: 1; }
.catalog-face { text-align: center; padding: 15px; background: #fff; border: solid 1px #e60012; font-weight: 700; margin-bottom: 20px; }
.catalog-face .cf-heading { padding-bottom: 7px; font-size: 28px; line-height: 1.1; }
.catalog-face .cf-heading em { display: block; color: #e60012; font-style: normal; margin-bottom: 0.3em; font-size: 20px; }
.catalog-face .cf-heading small { display: inline; font-size: 60%; font-weight: 400; }

.ci-annotate .ca-heading { background: #e60012; font-size: 17px; margin-bottom: 0.5em; color: white; text-align: center; padding: 0.5em; font-weight: 700; }
.ci-annotate .ca-heading span { font-size: 26px; }
.ci-annotate .ca-heading span small { font-size: 60%; font-weight: 400; }
.ci-annotate p { font-size: 13px; position: relative; padding-left: 1.35em; line-height: 1.3; }
.ci-annotate p:before { content: "※"; position: absolute; left: 0; top: 0; }



/* Present PART */
.campaignWrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 0 40px; align-items: flex-end; margin-bottom: 100px; }
.cW-left {  }
.cW-left h2 { padding: 0; }
.cW-left h2 img,
.cW-left h3 img { width: 100%; height: auto; }
.cW-left h3 { border-bottom: solid 1px #333; padding-bottom: 5px; margin-bottom: 8px; }
.cW-left .cW-lead { font-size: 20px; font-weight: 700; margin-bottom: 0.75em; }
.present-detail { display: flex; flex-wrap: wrap; align-items: flex-start; font-size: 18px; margin-bottom: 0.5em; }
.present-detail dt,
.present-detail dd { box-sizing: border-box; padding: 0.05em 0.3em; margin: 0; }
.present-detail dt { width: 5.5em; text-align: right; }
.present-detail dt:after { content: "："; font-weight: 400; }
.present-detail dd { width: calc(100% - 5.5em); text-align: left; font-weight: 700; }
.present-detail small { font-weight: 400; display: inline-block; }
.present-anotate { margin-left: 1.25em; font-size: 16px; }
.present-anotate  li { position: relative; padding-bottom: 0.5em; padding-left: 1.25em; }
.present-anotate  li:before { content: "●"; position: absolute; left: 0; top: 0; opacity: 0.5; }

.cW-right { text-align: center; position: relative; }
.cW-right h3 { font-size: 28px; font-weight: 400; margin: 0 auto; display: inline-block; line-height: 1.35em; position: relative; margin-bottom: 0.5em; }
.cW-right h3:before,
.cW-right h3:after { content: ""; width: 3px; height: 150%; border-left: dotted 3px #000; position: absolute; top: 70%; }
.cW-right h3:before { left: -1.5em; transform: translateY(-50%) rotate(-20deg); }
.cW-right h3:after { right: -1.5em; transform: translateY(-50%) rotate(20deg); }

.cW-right h3 em { font-style: normal; font-weight: 900; display: block; }

.present-image { border: solid 1px #000; padding: 40px 35px; margin-bottom: 8%; background: linear-gradient(-45deg, #fffacf 25%, transparent 25%, transparent 50%, #fffacf 50%, #fffacf 75%, transparent 75%, transparent); background-size: 40px 40px; }
.present-image figure { transform: rotate(-10deg); position: relative; }
.present-image figure:nth-child(1) { z-index: 2; }
.present-image figure:nth-child(2) { z-index: 1; margin-top: -40px; }
.present-image figure:nth-child(3) { transform: inherit; position: absolute; right: 5%; bottom: -8%; z-index: 3; width: 70%; }

.btn-skin { text-align: center; padding-bottom: 50px; padding-top: 0; }
.btn-skin a { display: inline-block; color: #fff; letter-spacing: 0.08em; text-decoration: none; margin: 0 auto; font-size: 22px; padding: 1.5em 2.5em; line-height: 1.0em; border-radius: 7px; font-weight: bold; background: #c00; transition: all 0.3s; }
.btn-skin a span { font-size: 16px; font-weight: normal; }
.btn-skin a:hover { background: #ff3e0a; }

@media(max-width:1199px){
  .greet-txt em { font-size: 2.85vw; }
  .greet-txt em.baikyu { font-size: 2.5vw; }
  .greet-txt p { font-size: 1.9vw; }

  .catalog-face { padding: 1.0vw; margin-bottom: 1.25vw; }
  .catalog-face .cf-heading { padding-bottom: 7px; font-size: 2.2vw; }
  .catalog-face .cf-heading em { font-size: 1.85vw; }

  .ci-annotate .ca-heading { font-size: 1.55vw; }
  .ci-annotate .ca-heading span { font-size: 2.5vw; }
  .ci-annotate p { font-size: 1.25vw; }

}

@media(max-width:991px){

  .ci-annotate p { font-size: 11px; }

  .campaignWrap { grid-template-columns: 1.5fr 1fr; gap: 30px; padding: 0 20px; align-items: center; margin-bottom: 60px; }
  .cW-left h2 { padding: 0 3.5vw; }

  .cW-right h3 { font-size: 2.3vw; }
  .cW-right h3:before,
  .cW-right h3:after { content: ""; width: 3px; height: 150%; border-left: dotted 3px #000; position: absolute; top: 70%; }
  .cW-right h3:before { left: -10px; }
  .cW-right h3:after { right: -10px; }

  .cW-right h3 em { font-weight: 900; font-size: 110%; }
  .cW-left .cW-lead { font-size: 16px; }
  .present-detail { font-size: 16px; }
  .present-anotate { font-size: 14px; }

}

@media(max-width:767px){

  .gw-heading h3 figure { width: 88%; }
  .fujisan { aspect-ratio: 2 / 1; position: relative; display: block; overflow: hidden; }
  .fujisan img { height: 100%; width: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
  .shimenawa figure { width: 50%; }

  .frame-wrapper { padding: 3.0vw; margin-bottom: 5.0vw; }

  .inner-frame { grid-template-columns: 1fr; gap: 5.0vw; padding: 7.0vw 3.5vw; }
  .greet-txt { order: 1; writing-mode: inherit; text-align: center; letter-spacing: 0.035em; }
  .greet-txt em { font-size: 4.6vw; text-indent: 0; padding: 0; text-align: center; transform: inherit; margin: 0 0 1.0em 0; }
  .greet-txt em.baikyu { font-size: 4.3vw; margin-right: 0; margin-bottom: 0; }
  .greet-txt p { font-size: 3.0vw; letter-spacing: 0.01em; margin-bottom: 1.0em; }


  .catalog-info { order: 2; padding: 0 10vw; }
  .catalog-face { padding: 2.5vw; margin: 0 auto; }
  .catalog-face .cf-heading { font-size: 5.0vw; }
  .catalog-face .cf-heading em { font-size: 3.95vw; }

  .ci-annotate .ca-heading { font-size: 3.0vw; }
  .ci-annotate .ca-heading span { font-size: 3.95vw; }
  .ci-annotate p { font-size: 2.5vw; }


  .outer-frame .kazari { max-width: inherit !important; }
  .outer-frame .kazari.sasa { width: 15vw; top: -15px; }
  .outer-frame .kazari.yanagi { width: 18vw; right: -5vw; top: inherit; bottom: 138vw; }
  .outer-frame .kazari.kamon { width: 15vw; left: -3vw; bottom: 15vw; }
  .outer-frame .kazari.ume,
  .outer-frame .kazari.ume2,
  .outer-frame .kazari.tsuru { display: none; }
  .outer-frame .kazari.nami { width: 36vw; }
  .outer-frame .kazari.kumo01 { width: 50vw; left: -22vw; top: inherit; bottom: 90vw; }
  .outer-frame .kazari.kumo02 { width: 50vw; right: -10vw; top: inherit; bottom: 46vw; }



  .campaignWrap { grid-template-columns: 1fr; gap: 3.0vw; padding: 0 3.9vw; margin-bottom: 12.0vw; }
  .cW-left { margin-bottom: 3.5vw; }
  .cW-left .cW-lead { font-size: 18px; margin-bottom: 1.0em; }

  .cW-right h3 { font-size: 4.8vw; }
  .cW-right h3:before { left: -1.5em; }
  .cW-right h3:after { right: -1.5em; }

  .hidden-mobile { display: none; }
  .visible-mobile { display: inline; }

  .btn-skin { padding: 0 5.0vw 10vw 5.0vw; }
  .btn-skin a { display: block; font-size: 22px; padding: 0.75em; letter-spacing: 0; }
  .btn-skin a span { display: block; margin-top: 0.25em; }

}

@media(max-width:499px){
  .ci-annotate p { font-size: 13px; }
}
@media(max-width:399px){
  .greet-txt p { font-size: 14px; text-align: left; line-height: 1.5; padding: 0 0.7em; }
  .greet-txt p br { display: none; }
}