@charset "UTF-8";
:root {
  --white-color: #fff;
  --black-color-100: #000000;
  --black-color-99: #373737;
  --gray-color-40: #bebebe;
  --gray-color-20: #dddddd;
  --main-color-500: #ffd335;
  --main-color-10: #fff7c3;
  --green-color-500: #2d8067;
  --green-color-100: #00a386;
  --green-color-10: #36bda4;
  --font-size: 16;
  --font-noto: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
@media all and (min-width: 768px) {
  a,
  button {
    transition: all .3s ease;
  }
  a:hover,
  button:hover {
    opacity: 0.7;
  }
  .l-header-menu-trigger {
    transition: all .3s ease;
  }
  .l-header-menu-trigger:hover {
    opacity: 0.7;
  }
}
button {
  cursor: pointer;
}
body {
  overflow-x: hidden;
}
/* ==========================================================================
  ELEMENT RESET
========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-family: serif;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--black-color-99);
  font-weight: 500;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 0;
}
dd {
  margin-left: 0;
}
ol,
ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a {
  outline: 0;
}
a:focus,
button:focus {
  outline: 0;
}
em {
  font-style: normal;
}
figure {
  margin: 0;
}
table {
  border-collapse: collapse;
}
button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
button:focus {
  outline: none;
}
input,
button,
select,
textarea {
  line-height: inherit;
}
textarea {
  resize: vertical;
}
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  line-height: inherit;
}
hr {
  margin: 0;
}
hr {
  margin: 5rem 0;
  border: 1px #ccc solid;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ==========================================================================
  UTILL
========================================================================== */
/* --------------------------------------------------------------------------
  フォント
-------------------------------------------------------------------------- */
body,
button,
input,
optgroup,
select,
textarea {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

/* --------------------------------------------------------------------------
  ROOT FONT SIZE
-------------------------------------------------------------------------- */
/* 16px */
html {
  font-size: 16px;
}
body {
  font-size: 1rem;
}
@media all and (max-width: 750px) {
  /* 13px */
  html {
    font-size: calc(100vw * var(--font-size) / 750);
  }
}
/* --------------------------------------------------------------------------
  ROOT SCROLL PADDING
-------------------------------------------------------------------------- */
html {
  scroll-padding-top: calc(100 / var(--font-size) * 1rem);
}

/* ==========================================================================
  HEADER COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  見出し
-------------------------------------------------------------------------- */
/* タイトル */
  .c-header-title {
    --header-size: 24;
    text-align: center;
  }
  .c-header-title__in {
    position: relative;
    display: inline-block;
    text-align: center;
    font-size: calc(var(--header-size) / var(--font-size) * 1rem);
  }
  .c-header-title__in::before,
  .c-header-title__in::after {
    content: "";
    display: block;
    width: calc(26 / var(--font-size) * 1rem);
    padding-top: calc(42 / var(--font-size) * 1rem);
    background: url("/dct-02/assets/img/common/deco_title_dots.svg") no-repeat center / contain;
    position: absolute;
    bottom: 0;
  }
  .c-header-title__in::before {
    left: 0;
    margin-left: calc(-48 / var(--font-size) * 1rem);
  }
  .c-header-title__in::after {
    right: 0;
    margin-right: calc(-48 / var(--font-size) * 1rem);
    transform: scale(-1 , 1);
  }
  .c-header-title__sub-txt {
    font-weight: bold;
    font-size: calc(32 / 24 * 1em);
    display: block;
    letter-spacing: calc(75 / 1000 * 1em);
    position: relative;
  }
  .c-header-title__sub-txt + .c-header-title__txt {
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  .c-header-title__txt--lv2 + .c-header-title__sub-txt {
    margin-top: calc(18 / var(--font-size) * 1rem);
  }
  .c-header-title__txt {
    font-weight: bold;
    letter-spacing: calc(75 / 1000 * 1em);
    display: block;
  }
  .c-header-title__txt--lv2 {
    font-size: calc(22 / var(--font-size) * 1rem);
    font-weight: bold;
  }

/* ==========================================================================
  BUTTON COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  ボタン
-------------------------------------------------------------------------- */
  .c-btn {
    --btn-bg-color: var(--main-color-500);
    --btn-border-color: var(--main-color-500);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
    --btn-txt-font-size: 16;
    --btn-min-height: 62;
    --btn-radius: 9999;
    --btn-px: 56;
    display: block;
  }
  .c-btn__in {
    background: var(--btn-bg-color);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
    border: calc(1 / var(--font-size) * 1rem) solid var(--btn-border-color);
    height: 100%;
    transition: all 0.3s;
  }
  .c-btn__body {
    position: relative;
    min-height: calc(var(--btn-min-height) / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(8 / var(--font-size) * 1rem) calc(var(--btn-px) / var(--font-size) * 1rem);
  }
  .c-btn-txt {
    color: var(--btn-txt-color);
    text-align: center;
    width: 100%;
    transition: all 0.3s;
  }
  .c-btn-txt__label {
    font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: calc(5 / 1000 * 1em);
  }
  .c-btn-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: calc(var(--btn-px) / var(--font-size) * 1rem);
    height: calc(var(--btn-min-height) / var(--font-size) * 1rem);
  }

  /* fontsize */
  .c-btn--xl {
    --btn-txt-font-size: 20;
  }
  .c-btn--l {
    --btn-txt-font-size: 18;
  }
  .c-btn--m {
    --btn-txt-font-size: 16;
  }
  .c-btn--s {
    --btn-txt-font-size: 13;
  }
  .c-btn--xs {
    --btn-txt-font-size: 12;
  }

/* ==========================================================================
  NOTE COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  note
-------------------------------------------------------------------------- */
.c-note {
  --note-txt-font-size: 16;
  --note-position: center;
}
.c-note-txt {
  font-size: calc(var(--note-txt-font-size) / var(--font-size) * 1rem);
  display: flex;
  justify-content: var(--note-position);
  line-height: 1.5;
}
.c-note-txt::before {
  content: "※";
}

/* ==========================================================================
  IMG SVG COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  img
-------------------------------------------------------------------------- */
  .c-img {
  }
  .c-img__label {
    width: 100%;
  }
/* ==========================================================================
  LAYOUT
========================================================================== */
/* --------------------------------------------------------------------------
  SECTION
-------------------------------------------------------------------------- */
  .l-sec {
  }
  .l-sec__in {
    max-width: calc(750 / var(--font-size) * 1rem);
    padding: 0 calc(30 / var(--font-size) * 1rem);
    margin: auto;
  }
  .l-sec__body {
    padding: calc(96 / var(--font-size) * 1rem) 0;
  }
  .l-sec__header {
  }
  .l-sec__content {
  }

/* --------------------------------------------------------------------------
  MODAL
-------------------------------------------------------------------------- */
  .c-modal-btn {
    cursor: pointer;
  }
  .is-modal-open {
    overflow: hidden;
  }
  .is-modal-active .c-modal-content-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100;
  }
  .c-modal {
    position: relative;
    z-index: 9999;
  }
  .c-modal__in {
  }
  .c-modal__body {
  }
  .c-modal-trigger {
  }
  .c-modal-content {
    display: none;
  }
  .is-modal-active.c-modal-content {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
  }
  .c-modal-content__in {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 101;
    width: calc(750 / var(--font-size) * 1rem);
  }
  .c-modal-content__body {
  }
  .c-modal-close {
    position: absolute;
    z-index: 102;
    cursor: pointer;
    transition: all .3s ease;
  }
  .c-modal-close:hover {
    transition: all .3s ease;
    opacity: 0.7;
  }
  .c-modal-close {
    right: calc(29 / var(--font-size) * 1rem);
    top: calc(30 / var(--font-size) * 1rem);
    width: calc(36 / var(--font-size) * 1rem);
    height: calc(36 / var(--font-size) * 1rem);
}
.comado-modal-content .c-modal-close{
  top: calc(20 / var(--font-size) * 1rem);
}
.c-modal-close__ico {
  position: relative;
}
.c-modal-close__ico::before,
.c-modal-close__ico::after {
  content: "";
  display: block;
  width: calc(45 / var(--font-size) * 1rem);
  height: calc(5 / var(--font-size) * 1rem);
  border-radius: 9999px;
  background: var(--black-color-99);
  position: absolute;
  top: 0;
  left: 0;
}
.c-modal-close__ico::before {
  transform: rotate(45deg);
}
.c-modal-close__ico::after {
  transform: rotate(-45deg);
}
/* --------------------------------------------------------------------------
  GHEADER
-------------------------------------------------------------------------- */
.header__container {
}
.gheader {
  background: var(--white-color);
  min-height: calc(104 / var(--font-size) * 1rem);
  position: relative;
  z-index: 998;
}
.gheader__in {
  padding: 0 calc(20 / var(--font-size) * 1rem);
}
.gheader__body {
  padding: calc(10 / var(--font-size) * 1rem) 0 calc(11 / var(--font-size) * 1rem);
}
.gheader-logo {
  width: calc(387 / var(--font-size) * 1rem);
  margin: 0 auto 0;
}

/* --------------------------------------------------------------------------
  L-HEADER
-------------------------------------------------------------------------- */
.l-header {
  min-height: calc(100 / var(--font-size) * 1rem);
  background: var(--main-color-10);
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 999;
}
.is-fixed .l-header {
  position: fixed;
}
.l-header__in {
  padding-left: calc(27 / var(--font-size) * 1rem);
  padding-right: calc(30 / var(--font-size) * 1rem);
  position: relative;
  height: 100%;
  z-index: 999;
}
.l-header__body {
  padding: calc(28 / var(--font-size) * 1rem) 0;
  height: 100%;
  max-width: calc(750 / var(--font-size) * 1rem);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.l-header-txt {
}
.l-header-txt__label {
  font-size: calc(22 / var(--font-size) * 1rem);
  font-weight: bold;
  letter-spacing: calc(100 / 1000 * 1em);
}
.l-header-tab {
}
.l-header-menu {
}
.l-header-menu-trigger {
}
.l-header-menu-trigger-ico {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(59 / var(--font-size) * 1rem);
  height: calc(44 / var(--font-size) * 1rem);
}
.l-header-menu-trigger-ico__label {
  position: relative;
  width: 100%;
  height: 100%;
}
.l-header-menu-trigger-ico::before {
  width: calc(59 / var(--font-size) * 1rem);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.l-header-menu-trigger-ico__label::before {
  width: calc(46 / var(--font-size) * 1rem);
  margin-top: calc(-20 / var(--font-size) * 1rem);
}
.l-header-menu-trigger-ico__label::after {
  width: calc(34 / var(--font-size) * 1rem);
  margin-top: calc(20 / var(--font-size) * 1rem);
}
.l-header-menu-trigger-ico__label::before,
.l-header-menu-trigger-ico__label::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.l-header-menu-trigger-ico::before,
.l-header-menu-trigger-ico__label::before,
.l-header-menu-trigger-ico__label::after {
  content: "";
  display: block;
  background: var(--black-color-99);
  height: calc(5 / var(--font-size) * 1rem);
  border-radius: 9999px;
  transition: all .3s ease;
}
.is-hamburger-open .l-header-menu-trigger-ico::before {
  opacity: 0;
}
.is-hamburger-open .l-header-menu-trigger-ico__label::before,
.is-hamburger-open .l-header-menu-trigger-ico__label::after{
  width: calc(46 / var(--font-size) * 1rem);
  margin: 0;
}
.is-hamburger-open .l-header-menu-trigger-ico__label::before {
  transform: translateY(-50%) rotate(135deg);
}
.is-hamburger-open .l-header-menu-trigger-ico__label::after {
  transform: translateY(-50%) rotate(-135deg);
}
.l-header-hamburger {
  position: absolute;
  top: calc(100 / var(--font-size) * 1rem);
  left: 0;
  width: 100vw;
  height: calc(100svh - (204 / var(--font-size) * 1rem));
  background: var(--main-color-10);
}
.l-header-hamburger__in {
  max-width: calc(750 / var(--font-size) * 1rem);
  margin: 0 auto;
  padding: 0 calc(30 / var(--font-size) * 1rem);
  overflow-y: scroll;
  position: relative;
  height: 100%;
}
.l-header-hamburger__body {
}

.spot-area {
}
.spot-area__in {
}
.spot-area__body {
  padding: calc(32 / var(--font-size) * 1rem) 0;
}
.spot-area-header {
  text-align: center;
  margin-bottom: calc(32 / var(--font-size) * 1rem);
}
.spot-area-header__label {
  font-size: calc(32 / var(--font-size) * 1rem);
  font-weight: bold;
  letter-spacing: calc(75 / 1000 * 1em);
}
.spot-area-list__cotnaier {
}
.spot-area-list {
}
.spot-area-list-item {
  position: relative;
}
.spot-area-list-item {
  margin-bottom: calc(40 / var(--font-size) * 1rem);
  padding-bottom: calc(40 / var(--font-size) * 1rem);
}
.spot-area-list-item::before {
  content: "";
  background: url("/dct-02/assets/img/common/spot_deco_list.png") repeat-x center / cover;
  display: block;
  width: 100%;
  height: calc(4 / var(--font-size) * 1rem);
  position: absolute;
  left: 0;
  bottom: 0;
}
.spot-area-list-item:last-child {
  margin-bottom: 0;
}
.spot-area-list-item__in {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.spot-detail {
}
.spot-detail-date {
  height: calc(30 / var(--font-size) * 1rem);
  margin-bottom: calc(16 / var(--font-size) * 1rem);
}
.spot-area-list-item--hiroshima .spot-detail-date {
  height: calc(25 / var(--font-size) * 1rem);
}
.spot-area-list-item--miyagi .spot-detail-date {
  height: calc(25 / var(--font-size) * 1rem);
}
.spot-area-list-item--kanagawa .spot-detail-date {
  height: calc(25 / var(--font-size) * 1rem);
}
.spot-detail-date img {
  height: 100%;
  width: auto;
}
.spot-detail-place {
}
.spot-detail-place__label {
  font-size: calc(28 / var(--font-size) * 1rem);
  font-weight: 500;
  letter-spacing: calc(50 / 1000 * 1em);
}
.spot-area-list-item-arrow {
  width: calc(40 / var(--font-size) * 1rem);
}
body.is-hamburger-open {
  height: 100%;
  overflow: hidden;
  touch-action: none;
  position: relative;
  z-index: 999;
}
.l-header-hamburger {
  transform: translateY(-100%);
    visibility: hidden;
    opacity: 0;
  transition: all 0.3s ease;
}
.is-hamburger-open .l-header-hamburger{
  transform: translateY(0);
    visibility: visible;
    opacity: 1;
    display: block;
    transition: all 0.3s ease;
}
.is-hamburger-open .l-header-menu-bg {
  background: var(--main-color-10);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  touch-action: none;
}
.page-saitama .spot-area-list-item--saitama .spot-area-list-item__in,
.page-yoyogi .spot-area-list-item--yoyogi .spot-area-list-item__in,
.page-fukuoka .spot-area-list-item--fukuoka .spot-area-list-item__in,
.page-osaka .spot-area-list-item--osaka .spot-area-list-item__in,
.page-hiroshima .spot-area-list-item--hiroshima .spot-area-list-item__in,
.page-miyagi .spot-area-list-item--miyagi .spot-area-list-item__in,
.page-aichi .spot-area-list-item--aichi .spot-area-list-item__in,
.page-kanagawa .spot-area-list-item--kanagawa .spot-area-list-item__in,
.page-hokkaido .spot-area-list-item--hokkaido .spot-area-list-item__in,
.page-okinawa .spot-area-list-item--okinawa .spot-area-list-item__in {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
  GFOTTER
-------------------------------------------------------------------------- */
.gfooter {
}
.gfooter__in {
  padding: 0 calc(20 / var(--font-size) * 1rem);
}
.gfooter__body {
  padding: calc(29 / var(--font-size) * 1rem) 0 calc(28 / var(--font-size) * 1rem);
}
.gfooter-logo {
  width: calc(182 / var(--font-size) * 1rem);
  margin: 0 auto 0;
}