@charset "UTF-8";
/*** THEME ***/
@media only screen and (max-width: 736px) {
  #main-contents {
    padding-top: 0;
  }
}
#main-contents #head .main_base {
  position: relative;
}
#main-contents #head .main_base .info_area {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 18%;
  overflow: hidden;
}
#main-contents #head .main_base .info_area .box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
#main-contents #head .main_base .info_area .box .logo {
  margin-bottom: 3.57143rem;
}
#main-contents #head .main_base .info_area .box .logo img {
  display: block;
  width: 10.009rem;
}
#main-contents #head .main_base .info_area .box .info {
  font-size: 0.71429rem;
  line-height: 2.4em;
  letter-spacing: 0.1em;
  padding-bottom: 6.42857rem;
  font-family: "Open Sans", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, sans-serif;
  font-style: italic;
}
#main-contents #head .main_base .info_area .box .info a {
  text-decoration: none;
}
#main-contents #head .main_base .slider.pc {
  margin-left: 8%;
  position: relative;
  z-index: -1;
  height: 43rem;
  width: 85%;
  transform: skewX(-8.9deg);
  overflow: hidden;
  -webkit-animation: opening_head_box 1.5s ease-in-out 0.3s 1 normal both;
  -moz-animation: opening_head_box 1.5s ease-in-out 0.3s 1 normal both;
  -ms-animation: opening_head_box 1.5s ease-in-out 0.3s 1 normal both;
  -o-animation: opening_head_box 1.5s ease-in-out 0.3s 1 normal both;
  animation: opening_head_box 1.5s ease-in-out 0.3s 1 normal both;
}
#main-contents #head .main_base .slider.pc ul {
  list-style: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 100%;
  transform: translate(-50%, -50%) skewX(8.9deg);
}
#main-contents #head .main_base .slider.pc ul .slick-list,
#main-contents #head .main_base .slider.pc ul .slick-track,
#main-contents #head .main_base .slider.pc ul .slick-slide,
#main-contents #head .main_base .slider.pc ul li {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#main-contents #head .main_base .slider.pc ul .slick-list img,
#main-contents #head .main_base .slider.pc ul .slick-track img,
#main-contents #head .main_base .slider.pc ul .slick-slide img,
#main-contents #head .main_base .slider.pc ul li img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: none;
  height: 100%;
}
@media only screen and (max-width: 736px) {
  #main-contents #head .main_base .slider.pc ul .slick-list .pc,
  #main-contents #head .main_base .slider.pc ul .slick-track .pc,
  #main-contents #head .main_base .slider.pc ul .slick-slide .pc,
  #main-contents #head .main_base .slider.pc ul li .pc {
    display: none;
  }
}
@media only screen and (min-width: 737px) {
  #main-contents #head .main_base .slider.pc ul .slick-list .sp,
  #main-contents #head .main_base .slider.pc ul .slick-track .sp,
  #main-contents #head .main_base .slider.pc ul .slick-slide .sp,
  #main-contents #head .main_base .slider.pc ul li .sp {
    display: none;
  }
}
#main-contents #head .main_base .slider.pc ul .slick-list:first-child,
#main-contents #head .main_base .slider.pc ul .slick-track:first-child,
#main-contents #head .main_base .slider.pc ul .slick-slide:first-child,
#main-contents #head .main_base .slider.pc ul li:first-child {
  z-index: 1;
}
#main-contents #head .main_base .slider.pc ul .slick-list:not(:first-child):not(.slick-slide),
#main-contents #head .main_base .slider.pc ul .slick-track:not(:first-child):not(.slick-slide),
#main-contents #head .main_base .slider.pc ul .slick-slide:not(:first-child):not(.slick-slide),
#main-contents #head .main_base .slider.pc ul li:not(:first-child):not(.slick-slide) {
  display: none;
}
#main-contents #head .main_base .sns {
  position: absolute;
  bottom: 0;
  right: 4%;
  width: 7.109%;
  overflow: hidden;
}
#main-contents #head .main_base .sns::before {
  content: "";
  display: block;
  padding-top: 188.88889%;
}
#main-contents #head .main_base .sns .box {
  position: absolute;
  right: 0;
  bottom: 1.78571rem;
  width: 3.57143rem;
  z-index: 5;
}
#main-contents #head .main_base .sns .box .frame {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
#main-contents #head .main_base .sns .box .frame img {
  display: block;
  width: 1.65457rem;
}
#main-contents #head .main_base .sns .box ul {
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  position: relative;
  width: 3.57143rem;
  height: 9.044rem;
}
#main-contents #head .main_base .sns .box ul li {
  position: absolute;
  height: 50%;
  width: 50%;
}
#main-contents #head .main_base .sns .box ul li:nth-child(1) {
  top: 0%;
  left: 0%;
}
#main-contents #head .main_base .sns .box ul li:nth-child(2) {
  top: 25%;
  right: 0%;
}
#main-contents #head .main_base .sns .box ul li:nth-child(3) {
  top: 50%;
  left: 0%;
}
#main-contents #head .main_base .sns .box ul li a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#main-contents #head .main_base .sns .box ul li a:hover {
  background-color: transparent;
  color: inherit;
}
#main-contents #head .main_base .sns .box ul li.facebook img, #main-contents #head .main_base .sns .box ul li.insta img, #main-contents #head .main_base .sns .box ul li.twitter img {
  width: auto;
  max-width: none;
  height: 1rem;
}
#main-contents #head .main_base .scroll {
  position: absolute;
  width: 0.71429rem;
  left: 2.14286rem;
  bottom: 2.14286rem;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.1s;
  -webkit-transition-delay: 0s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-property: all;
  -moz-transition-duration: 0.1s;
  -moz-transition-delay: 0s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-property: all;
  -o-transition-duration: 0.1s;
  -o-transition-delay: 0s;
  -o-transition-timing-function: ease-in-out;
  transition-property: all;
  transition-duration: 0.1s;
  transition-delay: 0s;
  transition-timing-function: ease-in-out;
  cursor: pointer;
}
#main-contents #head .main_base .scroll span {
  display: inline-block;
  text-align: left;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 0.71429rem;
  letter-spacing: 0.2em;
  line-height: 1em;
  font-family: "Open Sans", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, sans-serif;
}
#main-contents #head .main_base .scroll img {
  display: block;
  width: 0.35714rem;
}
#main-contents #head .main_base .scroll .wh {
  position: absolute;
  bottom: 0;
  left: 0;
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}
#main-contents #head .main_base .scroll:hover {
  filter: alpha(opacity=60);
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
  background-color: transparent;
  color: inherit;
  margin-bottom: -0.35714rem;
}
@keyframes opening_head_box {
  0% {
    left: 100vw;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}
@media only screen and (max-width: 736px) {
  #main-contents #head {
    padding-top: 6.78571rem;
  }
  #main-contents #head .wrapper > .container {
    margin: 0;
  }
  #main-contents #head header {
    position: absolute;
  }
  #main-contents #head .main_base {
    top: 0;
  }
  #main-contents #head .main_base .info_area {
    color: #FFF;
    width: 100%;
    z-index: 10;
  }
  #main-contents #head .main_base .info_area .box {
    font-size: 0.75rem;
    top: auto;
    bottom: 1.07143rem;
    left: auto;
    right: 1.07143rem;
    transform: none;
  }
  #main-contents #head .main_base .info_area .box .logo {
    display: none;
  }
  #main-contents #head .main_base .info_area .box .info {
    padding-bottom: 0;
    padding-left: 3rem;
  }
  #main-contents #head .main_base .sns {
    display: none;
  }
  #main-contents #head .main_base .scroll {
    color: #FFF;
    bottom: 0.71429rem;
    left: 0;
  }
  #main-contents #head .main_base .scroll img:not(.wh) {
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
  }
  #main-contents #head .main_base .scroll .wh {
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
}
#main-contents #introduction {
  padding-top: 7.14286rem;
  overflow: hidden;
}
#main-contents #introduction .base {
  position: relative;
}
#main-contents #introduction .base .caption {
  display: inline-block;
  margin-left: 50%;
  box-sizing: border-box;
  padding-top: 1.71429rem;
  padding-bottom: 1.42857rem;
  padding-left: 7.14286rem;
}
#main-contents #introduction .base .caption h3 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
#main-contents #introduction .base .caption .txt {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
#main-contents #introduction .base .visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
}
#main-contents #introduction .base .visual .photo {
  background-image: url(https://craftbridge.jp/common/assets/top/img/visual01.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
#main-contents #introduction .base .visual .overlay {
  width: 25.28571rem;
  height: 19.92857rem;
  right: 0%;
  bottom: 0;
  padding-right: 1em;
  padding-bottom: 1em;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
#main-contents #introduction .caption.animated h3 {
  animation-name: fadeIn;
}
#main-contents #introduction .caption.animated .txt {
  animation-name: fadeIn;
}
#main-contents #introduction .visual.animated .photo {
  animation-name: introduction_photo;
}
#main-contents #introduction .visual.animated .overlay {
  animation-name: introduction_overlay;
}
@keyframes introduction_photo {
  0% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}
@keyframes introduction_overlay {
  0% {
    right: -100%;
  }
  100% {
    right: 0;
  }
}
@media only screen and (max-width: 736px) {
  #main-contents #introduction {
    padding-top: 5rem;
  }
  #main-contents #introduction .base .caption {
    margin-left: 0;
    padding-left: 0;
    padding-bottom: 5.71429rem;
    text-align: center;
  }
  #main-contents #introduction .base .caption h3 {
    margin-top: 0;
  }
  #main-contents #introduction .base .caption h3 .logoicon {
    font-size: 1rem;
    margin-bottom: 0.85714rem;
  }
  #main-contents #introduction .base .caption h3 .logoicon img {
    display: block;
    margin: auto;
    width: 8.07143rem;
  }
  #main-contents #introduction .base .caption .txt {
    text-align: left;
  }
  #main-contents #introduction .base .visual {
    position: relative;
    width: 100%;
  }
  #main-contents #introduction .base .visual::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
  #main-contents #introduction .base .visual .photo {
    top: 0;
  }
  #main-contents #introduction .base .visual .overlay {
    font-size: 0.5em;
  }
}
#main-contents #location {
  color: #FFF;
  background-color: #000;
  padding-top: 3.57143rem;
  padding-bottom: 2.14286rem;
}
#main-contents #location .base {
  position: relative;
}
#main-contents #location .base .info {
  margin-left: 57.10102%;
  padding-left: 3.92857rem;
}
#main-contents #location .base .info h3:after {
  content: "";
  display: block;
  font-size: 1rem;
  width: 5.14286rem;
  height: 0;
  border-bottom: 1px solid #FFF;
  margin-top: 3.07143rem;
}
#main-contents #location .base .info dl {
  margin-bottom: 2.14286rem;
}
#main-contents #location .base .info dl dt em {
  font-size: 1.28571rem;
  font-weight: bold;
  font-style: italic;
  margin-right: 1em;
  display: inline-block;
  vertical-align: top;
}
#main-contents #location .base .info dl dt em small {
  display: block;
  font-size: 0.78571rem;
}
#main-contents #location .base .info dl dd {
  font-style: normal;
}
#main-contents #location .base .info a {
  text-decoration: none;
}
#main-contents #location .base .info a:hover {
  background-color: #FFF;
  color: #000;
}
#main-contents #location .base .map_base {
  position: absolute;
  top: 0;
  left: 0;
  width: 57.10102%;
  height: 100%;
  background-color: #f2f2f2;
}
#main-contents #location .base .map_base::before {
  content: "Loading ...";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
}
#main-contents #location .base .map_base #gmap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
@media only screen and (max-width: 736px) {
  #main-contents #location .base {
    text-align: center;
  }
  #main-contents #location .base .info {
    margin-left: 0;
    padding: 0;
    display: inline-block;
    white-space: nowrap;
    text-align: left;
    margin-left: 2.14286rem;
    margin-right: 2.14286rem;
    margin-bottom: 2.14286rem;
  }
  #main-contents #location .base .map_base {
    position: relative;
    width: 100%;
  }
  #main-contents #location .base .map_base::before {
    content: "";
    display: block;
    padding-top: 82.66667%;
  }
  #main-contents #location .guid {
    display: none;
  }
  #main-contents #location .streetview .container {
    margin: 0;
  }
}
#main-contents #news {
  text-align: center;
  margin-top: 8.57143rem;
  background-color: #f0efee;
  padding: 3em 0;
}
#main-contents #news .postlist {
  text-align: center;
  letter-spacing: -0.3em;
  margin-top: 3.42857rem;
}
#main-contents #news .postlist article {
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0.05em;
  width: 25rem;
  margin: 0 1.35714rem;
  text-align: left;
}
#main-contents #news .postlist article a {
  display: block;
  text-decoration: none;
}
#main-contents #news .postlist article a .photo {
  position: relative;
  overflow: hidden;
}
#main-contents #news .postlist article a .photo::before {
  content: "";
  display: block;
  padding-top: 66.57143%;
}
#main-contents #news .postlist article a .photo img {
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#main-contents #news .postlist article a .info {
  position: relative;
  padding-left: 1.57143rem;
  margin-top: 0.71429rem;
  margin-bottom: 0.71429rem;
}
#main-contents #news .postlist article a .info .arrow {
  position: absolute;
  left: 0.8%;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 0.45357rem;
  height: 2.53929rem;
}
#main-contents #news .postlist article a .info .title {
  font-weight: bold;
  line-height: 1.35em;
  padding-top: 0.14286rem;
  margin-bottom: 0.42857rem;
}
#main-contents #news .postlist article a .info .data {
  position: relative;
  font-size: 0.71429rem;
  line-height: 1.35em;
  font-style: italic;
}
#main-contents #news .postlist article a .info .data::before {
  position: absolute;
}
#main-contents #news .postlist article a .info .data .date {
  margin-right: 1em;
}
#main-contents #news .postlist article a:hover {
  background-color: transparent;
  color: inherit;
}
#main-contents #news .more {
  margin-top: 4.64286rem;
}
@media only screen and (max-width: 736px) {
  #main-contents #news {
    margin-top: 5.71429rem;
  }
  #main-contents #news h3 {
    margin-top: 0;
  }
  #main-contents #news .postlist article {
    display: block;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: 0 1.07143rem;
  }
  #main-contents #news .postlist article:not(:last-child) {
    margin-bottom: 4.64286rem;
  }
  #main-contents #news .more {
    margin-top: 4.28571rem;
  }
}
#main-contents #sweets {
  margin-top: 0rem;
  text-align: center;
  overflow: hidden;
}
#main-contents #sweets .visual.top {
  position: relative;
  overflow: visible;
  margin-top: 7.85714rem;
  margin-bottom: 12.85714rem;
  height: 39.28571rem;
}
#main-contents #sweets .visual.top .photo {
  position: absolute;
  right: 0;
  width: 121.64297%;
}
#main-contents #sweets .visual.top .photo::before {
  content: "";
  display: block;
  padding-top: 35.71429%;
}
#main-contents #sweets .visual.top .photo span {
  width: 35.71429rem;
}
#main-contents #sweets .visual.top .photo span:nth-child(1) {
  -webkit-animation-duration: 2.2s;
  animation-duration: 2.2s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
#main-contents #sweets .visual.top .photo span:nth-child(2) {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
#main-contents #sweets .visual.top .photo span:nth-child(3) {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
#main-contents #sweets .visual.top.animated .photo span:nth-child(1) {
  animation-name: sweets_photo_1;
}
#main-contents #sweets .visual.top.animated .photo span:nth-child(2) {
  animation-name: sweets_photo_2;
}
#main-contents #sweets .visual.top.animated .photo span:nth-child(3) {
  animation-name: sweets_photo_3;
}
#main-contents #sweets .visual.top.animated .overlay {
  animation-name: sweets_overlay;
}
@keyframes sweets_photo_1 {
  0% {
    left: -150%;
  }
  100% {
    left: -22%;
  }
}
@keyframes sweets_photo_2 {
  0% {
    left: -125%;
  }
  100% {
    left: 10.2%;
  }
}
@keyframes sweets_photo_3 {
  0% {
    left: -100%;
  }
  100% {
    left: 42.5%;
  }
}
@keyframes sweets_overlay {
  0% {
    opacity: 0;
    transform: rotate(20deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
#main-contents #sweets .sweets_item_container .sweets_item {
  position: relative;
  height: 39.28571rem;
  margin-top: 7.14286rem;
  margin-bottom: 7.14286rem;
}
#main-contents #sweets .sweets_item_container .sweets_item .info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  white-space: nowrap;
  box-sizing: border-box;
  padding-top: 2.85714rem;
  background-color: #fff;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
#main-contents #sweets .sweets_item_container .sweets_item .info .caption {
  margin: 0 -10em;
  box-sizing: border-box;
  padding: 1.85714rem 5.71429rem;
  padding-bottom: 0;
  margin-top: -1.85714rem;
}
#main-contents #sweets .sweets_item_container .sweets_item .info .caption p.bottom {
  display: inline-block;
  padding-bottom: 45px;
  padding-left: 60px;
  padding-right: 60px;
  background-color: #fff;
}
#main-contents #sweets .sweets_item_container .sweets_item .info .caption .more a {
  margin-top: 0px;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 40px;
  font-size: 1rem;
}
#main-contents #sweets .sweets_item_container .sweets_item .info::before {
  content: "";
  display: block;
  background-color: #FFF;
  position: absolute;
  top: 6.42857rem;
  bottom: 6.07143rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: -1;
  padding: 0 8.85714rem;
}
#main-contents #sweets .sweets_item_container .sweets_item .visual {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  transform: translateX(-50%);
  overflow: visible;
}
#main-contents #sweets .sweets_item_container .sweets_item .visual .photo {
  height: 100%;
}
#main-contents #sweets .sweets_item_container .sweets_item .visual .photo span {
  width: 52.85714rem;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
#main-contents #sweets .sweets_item_container .sweets_item:nth-child(2n+1) .info {
  left: 35%;
}
#main-contents #sweets .sweets_item_container .sweets_item:nth-child(2n+1) .visual {
  left: 77%;
}
#main-contents #sweets .sweets_item_container .sweets_item:nth-child(2n+2) .info {
  left: 65%;
}
#main-contents #sweets .sweets_item_container .sweets_item:nth-child(2n+2) .visual {
  left: 23%;
}
#main-contents #sweets .sweets_item_container .sweets_item.i01 .visual .overlay {
  top: -2.5rem;
  right: 49%;
  width: 10.07143rem;
}
#main-contents #sweets .sweets_item_container .sweets_item.i01 .info {
  margin-left: 1%;
}
#main-contents #sweets .sweets_item_container .sweets_item.i02 .visual .overlay {
  top: -1.5em;
  left: 30%;
  width: 15rem;
}
#main-contents #sweets .sweets_item_container .sweets_item.i02 .info {
  margin-left: 0%;
}
#main-contents #sweets .sweets_item_container .sweets_item.i03 .visual .overlay {
  top: -2.85714rem;
  right: 30%;
  width: 15.35714rem;
}
#main-contents #sweets .sweets_item_container .sweets_item.i03 .info {
  margin-left: -1%;
}
#main-contents #sweets .sweets_item_container .sweets_item.animated:nth-child(2n+1) .info {
  animation-name: sweets_item_info1;
}
#main-contents #sweets .sweets_item_container .sweets_item.animated:nth-child(2n+1) .visual span {
  animation-name: sweets_item_visual1;
}
#main-contents #sweets .sweets_item_container .sweets_item.animated:nth-child(2n+2) .info {
  animation-name: sweets_item_info2;
}
#main-contents #sweets .sweets_item_container .sweets_item.animated:nth-child(2n+2) .visual span {
  animation-name: sweets_item_visual2;
}
@keyframes sweets_item_info1 {
  0% {
    opacity: 0;
    left: 25%;
  }
  100% {
    opacity: 1;
    left: 36%;
  }
}
@keyframes sweets_item_info2 {
  0% {
    opacity: 0;
    left: 75%;
  }
  100% {
    opacity: 1;
    left: 65%;
  }
}
@keyframes sweets_item_visual1 {
  0% {
    opacity: 0;
    left: 50%;
  }
  100% {
    opacity: 1;
    left: -35%;
  }
}
@keyframes sweets_item_visual2 {
  0% {
    opacity: 0;
    left: -85%;
  }
  100% {
    opacity: 1;
    left: -35%;
  }
}
@media only screen and (max-width: 736px) {
  #main-contents #sweets .txt {
    text-align: left;
  }
  #main-contents #sweets .visual.top {
    height: 64vmin;
    margin-bottom: 2.14286rem;
  }
  #main-contents #sweets .visual.top .photo {
    right: 16vmin;
    width: 170vmin;
  }
  #main-contents #sweets .visual.top .photo span {
    width: 14.7rem;
  }
  #main-contents #sweets .visual.top .overlay {
    font-size: 0.75em;
  }
  #main-contents #sweets .sweets_item_container .sweets_item {
    height: auto;
  }
  #main-contents #sweets .sweets_item_container .sweets_item .info {
    position: static;
    transform: none;
    left: 0 !important;
    white-space: normal;
    background-color: transparent;
  }
  #main-contents #sweets .sweets_item_container .sweets_item .info::before {
    display: none;
  }
  #main-contents #sweets .sweets_item_container .sweets_item .info .caption {
    margin: 0;
    padding: 0;
    text-align: left;
  }
  #main-contents #sweets .sweets_item_container .sweets_item .info .caption p.bottom {
    display: inline;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
  #main-contents #sweets .sweets_item_container .sweets_item .visual {
    position: relative;
    height: 62vmin;
    display: block;
  }
  #main-contents #sweets .sweets_item_container .sweets_item .visual .photo {
    width: 270%;
  }
  #main-contents #sweets .sweets_item_container .sweets_item .visual .photo span {
    width: 22.14286rem;
  }
  #main-contents #sweets .sweets_item_container .sweets_item .visual .overlay {
    font-size: 0.5em;
  }
  #main-contents #sweets .sweets_item_container .sweets_item:nth-child(2n+1) .visual {
    left: 47%;
  }
  #main-contents #sweets .sweets_item_container .sweets_item:nth-child(2n+2) .visual {
    left: 47%;
  }
  #main-contents #sweets .sweets_item_container .sweets_item.i01 .visual .overlay {
    top: -2rem;
    right: 28%;
  }
  #main-contents #sweets .sweets_item_container .sweets_item.i02 .visual .overlay {
    top: -2.2rem;
    right: 35%;
  }
  #main-contents #sweets .sweets_item_container .sweets_item.i03 .visual .overlay {
    top: -2.5em;
    right: 8%;
    width: 10rem;
  }
}
#main-contents #snsfeeds {
  text-align: center;
  margin-top: 13.57143rem;
  margin-bottom: 10.71429rem;
}
#main-contents #snsfeeds .instafeed {
  margin-bottom: 7.14286rem;
}
#main-contents #snsfeeds .instafeed .insta-feed-base {
  margin: -0.5%;
  position: relative;
  overflow: hidden;
}
#main-contents #snsfeeds .instafeed .insta-feed-base::before {
  content: "";
  display: block;
  padding-top: 40.47709%;
}
#main-contents #snsfeeds .instafeed .insta-feed-base::after {
  content: "Loading...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
}
#main-contents #snsfeeds .instafeed .insta-feed-base iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  max-width: 100%;
}
#main-contents #snsfeeds .layout .area_l {
  float: left;
  width: 31.08348%;
}
#main-contents #snsfeeds .layout .area_r {
  float: right;
  width: 60.39076%;
}
#main-contents #snsfeeds .twitterfeed {
  margin-bottom: 3.57143rem;
}
#main-contents #snsfeeds .twitterfeed .base {
  height: 17.85714rem;
}
#main-contents #snsfeeds .twitterfeed .base iframe {
  border-left: 1px solid rgba(15, 70, 100, 0.12) !important;
}
#main-contents #snsfeeds .fbfeed .base {
  height: 17.85714rem;
}
#main-contents #snsfeeds .gcalender {
  max-width: 100%;
}
#main-contents #snsfeeds .gcalender .base {
  height: 37.5rem;
}
#main-contents #snsfeeds .twitterfeed .base,
#main-contents #snsfeeds .fbfeed .base,
#main-contents #snsfeeds .gcalender .base {
  position: relative;
}
#main-contents #snsfeeds .twitterfeed .base::after,
#main-contents #snsfeeds .fbfeed .base::after,
#main-contents #snsfeeds .gcalender .base::after {
  content: "Loading ...";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  z-index: -1;
}
#main-contents #snsfeeds .twitterfeed .base::before,
#main-contents #snsfeeds .fbfeed .base::before,
#main-contents #snsfeeds .gcalender .base::before {
  content: "";
  display: block;
  padding-top: 68%;
}
#main-contents #snsfeeds .twitterfeed .base iframe,
#main-contents #snsfeeds .fbfeed .base iframe,
#main-contents #snsfeeds .gcalender .base iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
}
@media only screen and (max-width: 736px) {
  #main-contents #snsfeeds {
    margin-top: 5rem;
  }
  #main-contents #snsfeeds .instafeed {
    margin-bottom: 7.14286rem;
  }
  #main-contents #snsfeeds .instafeed .insta-feed-base {
    margin: 0 -5%;
  }
  #main-contents #snsfeeds .instafeed .insta-feed-base::before {
    padding-top: 100%;
  }
  #main-contents #snsfeeds .layout .area_r,
  #main-contents #snsfeeds .layout .area_l {
    width: 100%;
    float: none;
  }
  #main-contents #snsfeeds .layout .area_l {
    display: none;
  }
}
#main-contents #gallery {
  margin-bottom: 4.28571rem;
  overflow: hidden;
  max-width: 100%;
}
#main-contents #gallery .base {
  position: relative;
  padding: 3.64286rem 0;
  margin-bottom: 3.92857rem;
}
#main-contents #gallery .base ul.current {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 35.71429rem;
  height: 20rem;
  overflow: hidden;
  z-index: 5;
  background-color: #FFF;
}
#main-contents #gallery .base ul.current li {
  display: block;
  width: auto;
  max-width: none;
  height: 20rem;
}
#main-contents #gallery .base ul.bglist li {
  line-height: 0;
  padding: 0 0.35714rem;
  position: relative;
}
#main-contents #gallery .base ul.bglist li img {
  display: block;
  height: 12.71429rem;
  width: auto;
  max-width: none;
}
#main-contents #gallery .base ul.current li.movie a::after,
#main-contents #gallery .base ul.bglist li.movie a::after {
  content: "▲";
  display: block;
  letter-spacing: -0.03em;
  line-height: 1em;
  width: 1em;
  height: 1em;
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.6);
  color: #FFF;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: 15;
}
#main-contents #gallery .base ul.current li.movie img,
#main-contents #gallery .base ul.bglist li.movie img {
  cursor: pointer;
}
#main-contents #gallery .more {
  margin-bottom: 3px;
}
@media only screen and (max-width: 736px) {
  #main-contents #gallery .base ul.current {
    width: 85%;
    height: 10.917rem;
    overflow: visible;
  }
  #main-contents #gallery .base ul.current li {
    height: auto;
  }
  #main-contents #gallery .base ul.bglist li img {
    height: 7.14286rem;
  }
}
#main-contents #movie {
  background-image: url("https://craftbridge.jp/common/assets/top/img/movie_bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  max-height: 523px;
  overflow: hidden;
  position: relative;
}
#main-contents #movie::before {
  content: "";
  display: block;
  padding-top: 38.28697%;
}
#main-contents #movie .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.78571rem;
  height: 3.78571rem;
}
#main-contents #movie a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
#main-contents #movie a:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
#main-contents #movie a .overlay {
  display: block;
  width: 19.14286rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 33%;
}
@media only screen and (max-width: 736px) {
  #main-contents #movie::before {
    padding-top: 56%;
  }
  #main-contents #movie a .overlay {
    width: 9.57143rem;
    top: 35%;
  }
  #main-contents #movie a .icon {
    top: 60%;
  }
}