@charset "UTF-8";
/* -------------------------- */
/* header */
/* -------------------------- */
.header {
  position: absolute;
  background: none; }
  .header::after {
    display: none; }
  .header .logo {
    display: none; }
  .header .global_navi {
    display: none; }
  @media screen and (min-width: 1024px) {
    .header .action {
      flex-direction: row;
      align-items: center;
      flex: none; }
      .header .action .btn a {
        padding: 0 34px;
        height: 68px; }
      .header .action .btn.white {
        margin-right: 10px;
        margin-bottom: 0; } }

/* -------------------------- */
/* content */
/* -------------------------- */
/* main_visual */
.main_visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: calc(50vh + 64px);
  background: url(/images/top/bg_top_main.jpg) center center no-repeat;
  background-size: cover; }
  .main_visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/top/bg_top_main_deco.png) center center no-repeat;
    background-size: cover; }
  .main_visual .main_visual_title img {
    width: 100%;
    height: 100%; }
  @media screen and (min-width: 768px) {
    .main_visual {
      justify-content: flex-start;
      height: 760px; }
      .main_visual .main_visual_title img {
        width: 545px; } }

/* top_navi */
.top_navi {
  display: none;
  padding-top: 10px;
  margin-top: 0; }
  .top_navi_list {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 25px; }
  .top_navi_item a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #463d35;
    text-align: center; }
    .top_navi_item a svg {
      width: 80px;
      height: 80px;
      margin-bottom: 20px;
      fill: #463d35;
      stroke: #463d35; }
    .top_navi_item a em {
      font-family: "FOT-筑紫A丸ゴシック Std B";
      font-style: normal;
      font-size: 2rem;
      line-height: 1.2; }
    .top_navi_item a small {
      font-family: "TimesNRMTPro-Italic";
      font-size: 1.4rem; }
  @media screen and (min-width: 1024px) {
    .top_navi {
      display: block; } }

/* event */
.event {
  padding: 40px 0 50px; }
  .event .box.upper {
    display: flex;
    flex-direction: column;
    margin-bottom: 60px; }
  .event .box.lower .title_section_child {
    margin-bottom: 25px; }
  .event_pickup {
    margin-bottom: 40px;
    width: 100%; }
    .event_pickup figure {
      margin-bottom: 15px; }
  @media screen and (min-width: 768px) {
    .event {
      padding: 100px 0; } }
  @media screen and (min-width: 1024px) {
    .event .box.upper {
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 40px; }
    .event .box.lower .title_section_child {
      margin-bottom: 25px; }
    .event_pickup {
      margin-right: 60px;
      width: 100%; }
      .event_pickup figure {
        margin-bottom: 35px; } }
  @media screen and (min-width: 1280px) {
    .event_pickup {
      margin-right: 120px; } }

/* news */
.news {
  padding: 50px 0;
  background: #fff; }
  @media screen and (min-width: 768px) {
    .news {
      padding: 100px 0; } }

/* special */
.special {
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;
  overflow: hidden; }
  .special_item {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px; }
    .special_item:last-child {
      margin-bottom: 0; }
    .special_item > .container {
      display: flex;
      flex-wrap: wrap;
      height: 100%; }
    .special_item .bg {
      position: relative;
      padding-top: 60%;
      margin-bottom: 40px; }
      .special_item .bg figure {
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        transform: translateY(-50%);
        margin: auto;
        text-align: center; }
        .special_item .bg figure img {
          width: 150px; }
    .special_item.special_nanasyoku .bg {
      background: url(/images/top/bg_top_project.jpg) center center no-repeat;
      background-size: cover; }
    .special_item.special_maman .bg {
      background: url(/images/top/bg_top_maman.jpg) center center no-repeat;
      background-size: cover; }
    .special_item .title_section {
      margin-bottom: 20px;
      width: 100%; }
    .special_item .txt {
      width: 100%; }
    .special_item .action {
      flex: 1 0 auto;
      margin-top: auto; }
      .special_item .action .btn {
        border-top: 0; }
  @media screen and (min-width: 768px) {
    .special {
      flex-direction: row;
      padding-bottom: 100px; }
      .special_item {
        margin-bottom: 0;
        width: 50%; }
        .special_item .title_section em::before, .special_item .title_section em::after {
          content: url(/images/icon/deco_title_01_sp.png); } }
  @media screen and (min-width: 1024px) {
    .special_item .bg figure img {
      width: 240px; } }
  @media screen and (min-width: 1280px) {
    .special_item > .container {
      padding: 0;
      height: auto; }
    .special_item .bg {
      padding-top: 0;
      margin-bottom: 60px;
      height: 368px; }
      .special_item .bg figure img {
        width: 300px; }
    .special_item .title_section {
      margin-bottom: 50px; }
      .special_item .title_section em::before, .special_item .title_section em::after {
        content: url(/images/icon/deco_title_01.png);
        display: block; }
    .special_item .txt {
      padding: 0 50px; } }

/* shopping */
.shopping {
  position: relative;
  padding: 50px 0 0;
  background: #fff; }
  .shopping .title_section em::before, .shopping .title_section em::after {
    display: none; }
  .shopping .txt {
    position: relative;
    z-index: 5;
    max-width: 800px;
    text-shadow: 0 0 2px #fff; }
  .shopping .action .btn a {
    margin: 0; }
  .shopping .deco {
    margin-top: 50px;
    width: 100%; }
  @media screen and (min-width: 768px) {
    .shopping {
      padding: 100px 0; }
      .shopping .title_section {
        text-align: left; }
      .shopping .deco {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 400px; } }
  @media screen and (min-width: 1024px) {
    .shopping .deco {
      width: 500px; } }
  @media screen and (min-width: 1280px) {
    .shopping .deco {
      width: 600px; } }