@charset "utf-8";
/* CSS Document */

/*------------------------------------------
    共通要素
------------------------------------------*/
#contents {
    padding-top: 40px;
}
#header-inner {
    width: 96%;
    max-width: 1200px;
}
#footer-inner {
    width: 100%;
    max-width: 1200px;
}
.header_area {
    margin: 0;
}
img:hover {
    transition: .5s;
}
a:hover {
    transition: .5s;
    color: #e94f37;
}

@media(max-width:1200px){
#contents {
    width: 96%;
}    
#main-column {
    width: 75%;
}    
#sub-column {
    width: 22%;
    margin-right: 3%;
}   
}

@media(max-width:960px){
#header-inner {
    width: 100%;
}    
}

@media(max-width:768px){
#contents {
    padding-top: 30px;
}    
#main-column {
    width: 100%;
}    
#sub-column {
    background-color: #fff;
    width: 40%;
    right: -40%;
    padding: 100px 2% 0;
    margin-right: 0;
}    
}

@media(max-width:580px){
#sub-column {
    width: 50%;
    right: -50%;
    padding: 90px 2% 0;
}   
}

@media(max-width:480px){
#sub-column {
    width: 70%;
    right: -70%;
    padding: 80px 4% 0;
}   
}

/*------------------------------------------
    ヘッダ
------------------------------------------*/
@media(max-width:768px){
#header-inner #hNav{
    padding: 0;
    margin: 0;
} 
#hNav nav, #hNav .cart-nav ,#hNav ul#header-nav li#header-nav-drawer {
    top: 45px;
}    
}

@media(max-width:580px){
#hNav nav, #hNav .cart-nav ,#hNav ul#header-nav li#header-nav-drawer {
    top: 30px;
}    
}

@media(max-width:414px){
#hNav nav, #hNav .cart-nav ,#hNav ul#header-nav li#header-nav-drawer {
    top: 25px;
}    
}

/*------------------------------------------
    グローバルナビ
------------------------------------------*/
.global-navi {
    border-top: 1px solid #E2E2E2;
    border-bottom: 1px solid #E2E2E2;
    box-sizing: border-box;
}
.global-navi .width_block {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
}
.global-navi ul.G-nav{
	display: flex;
	justify-content: space-between;
}
.global-navi ul.G-nav li{
	text-align: center;
	position: relative;
	width: 100%;
	display: block;
	transition: all 0.2s ease-out;
}
.global-navi ul.G-nav li a {
    width: 100%;
    display: block;
    padding: 20px 0;
    color: #333;
    text-align: center;
    font-size: 15px;
    line-height: 1;
    font-weight: normal;
    letter-spacing: .1em;
}
.global-navi ul.G-nav li a p {
    display: inline-block;
    padding-right: 15px;
    background: url(https://www.fleur-girafe.mom/img/arrow-gmenu.svg) no-repeat;
    background-size: 8px;
    background-position: right center;
}

.global-navi ul.G-nav li ul.G-nav-sub{
	position: absolute;
	top: 100%;
	left: 0;
	visibility: hidden;
	width: 100%;
	z-index: 2;
    display: none;
}
.global-navi ul.G-nav li ul.G-nav-sub li:first-child{
    padding-top: 3px;
}
.global-navi ul.G-nav li ul.G-nav-sub li a {
    text-align: left;
    padding: 13px 25px 13px 10px;
    border-bottom: 1px solid #E2E2E2;
    box-sizing: border-box;
    position: relative;
    line-height: 1.4;
}
.global-navi ul.G-nav li ul.G-nav-sub li:last-child a {
    border: 0;
}
.global-navi ul.G-nav li ul.G-nav-sub li a::after {
    content: "";
    display: block;
    background: none;
    width: 6px;
    height: 6px;
    position: absolute;
    right: 15px;
    top: calc(50% - 2px);
    border-top: solid 1px;
    border-right: solid 1px;
    transform: rotate(45deg) translateY(-50%);
    color: inherit;
    margin: 0;
}
.global-navi ul.G-nav li:hover{
	background: #F8F8F8;
	transition: all 0.2s ease-out;
}
.global-navi ul.G-nav li:hover ul.G-nav-sub {
    visibility: visible;
    height: auto;
    display: block;
}
.global-navi ul.G-nav li:hover ul.G-nav-sub:after {
    content: "";
    border-top: 3px solid #6B7189;
    width: 100%;
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
}
.global-navi ul.G-nav li ul.G-nav-sub li {
    background: #F8F8F8;
    opacity: .95;
    padding: 0 6%;
    width: 88%;
}
.global-navi ul.G-nav li ul.G-nav-sub li:hover{
	background: #e5e5e5;
	transition: all 0.2s ease-out;
}

@media(max-width:768px){
.global-navi ul.G-nav li.d_smp {
    display: none;
}   
}

@media(max-width:580px){
.global-navi ul.G-nav {
    position: relative;
}    
.global-navi ul.G-nav li {
    position: unset;
}    
.global-navi ul.G-nav li a p {
    padding-right: 10px;
}
.global-navi ul.G-nav li:nth-child(1):hover ul.G-nav-sub:after {
    width: 33.3%;
    left: 0;
}
.global-navi ul.G-nav li:nth-child(3):hover ul.G-nav-sub:after {
    width: 33.3%;
    left: 33.3%;
}
.global-navi ul.G-nav li:nth-child(4):hover ul.G-nav-sub:after {
    width: 33.3%;
    left: auto;
    right: 0;
}    
.global-navi ul.G-nav li ul.G-nav-sub li {
    padding: 0 3%;
    width: 94%;
}    
}

/*------------------------------------------
    スライドショー
------------------------------------------*/
html, body {
  position: relative;
  height: 100%;
}
#slider {
    display: none;
    width: 100%;
    overflow: hidden;
    padding-bottom: 30px;
}
#slider #slider-area {
	width : 900px;
	margin : 0 auto;
	overflow : visible;
}
#slider .swiper-container {
  width: 100%;
  height: 100%;
}
#slider .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#slider .swiper-slide a {
    width: 100%;
}
div#slider img {
    display: block;
}
div#slider img:hover {
    transition: .5s;
}

@media(max-width:1024px){
div#slider {
    width: 100%;
}
#slider .swiper-container {
    width: 100%;
    height: auto;
}
#slider .swiper-container img{
    width: 100%;
}
#slider #slider-area{
    width: 100%;
}
}

/*------------------------------------------
    サイドバー・ドロワーメニュー
------------------------------------------*/
.common_pd , #sub-column #subc_calendar {
    margin-bottom: 2em;
}

#sub-column h2, #sub-column div#subc_calendar h2 {
    font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
    border-top: 0;
    background: #6B7189;
    color: #fff;
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 0;
    padding: 25px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
#sub-column h2 a {
    color: #fff;
}
#sub-column div#subc_calendar h2::before {
    content: "カレンダー";
    display: block;
}
#sub-column div#subc_calendar h2::after , #sub-column .category h2 a::after {
    display: none;
}
#sub-column h3 , #sub-column h2, #sub-column div#subc_calendar h2 {
    margin-bottom: 10px;
}
#sub-column h3 img , .bnr_link img , .shop_info img {
    display: block;
    width: 100%;
}

.ccolor1 {
    color: #fff;
}
#sub-column div.cal_wrapper table.cal tr td div.Today {
    background-color: #F6F7EB;
}

.freeArea2 .free-contents .txt_link ul , #sub-column .category nav ul {
    margin: 0;
    list-style: none;
}
.txt_link ul li , #sub-column .group nav ul li, #sub-column .category nav ul li, #sub-column .link nav ul li {
    border-bottom: 1px solid #E2E2E2;
    box-sizing: border-box;
}
.freeArea2 .free-contents ul li {
    list-style-type: none;
}
#sub-column .group nav ul li:first-child, #sub-column .category nav ul li:first-child, #sub-column .link nav ul li:first-child {
    border-top: 0;
}
.txt_link ul li a , #sub-column .group nav ul li a, #sub-column .category nav ul li a, #sub-column .link nav ul li a {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: .05em;
    padding: 13px 22px 13px 10px;
    position: relative;
}
.txt_link ul li a {
    letter-spacing: .1em;
}
.txt_link ul li a:hover , .txt_link ul li a:hover , #sub-column .group nav ul li a:hover, #sub-column .category nav ul li a:hover, #sub-column .link nav ul li a:hover  {
    background: #F8F8F8;
    color: #333;
    opacity: 1;
}
.txt_link ul li a::after , #sub-column .group nav ul li a::after, #sub-column .category nav ul li a::after, #sub-column .link nav ul li a::after {
    content: "";
    display: block;
    background: none;
    width: 6px;
    height: 6px;
    position: absolute;
    right: 15px;
    top: calc(50% - 2px);
    border-top: solid 1px;
    border-right: solid 1px;
    transform: rotate(45deg) translateY(-50%);
    color: inherit;
    margin: 0;
}

.freeArea2 .free-contents .shop_info p, .txt_nolink p {
    font-size: 16px;
    letter-spacing: .05em;
}
.freeArea2 .free-contents .shop_info p {
    margin: 10px 0;
}
.shop_info .map iframe {
    width: 100%;
    height: 180px;
}

.bnr_link a {
    display: block;
    margin-bottom: 10px;
}
.bnr_link a:last-child {
    margin-bottom: 0;
}

@media(max-width:768px){
#hNav ul#header-nav li#header-nav-drawer {
    border: 0;
    border-radius: 0;
}
#sub-column.spsDrawerOpen {
    z-index: 101;
}    
#sub-column .freeArea2 .free-contents {
    padding: 0;
}    
#sub-column div.subc_cal_cont .cap .cap-info {
    background-color: #F5F5F5;
    padding: 10px 3%;
}    
.txt_link ul li a, #sub-column .group nav ul li a, #sub-column .category nav ul li a, #sub-column .link nav ul li a , 
.freeArea2 .free-contents .shop_info p , .freeArea2 .free-contents .shop_info p, .txt_nolink p {
    font-size: 15px;
}    
}

@media(max-width:480px){
#sub-column h2, #sub-column div#subc_calendar h2 {
    font-size: 22px;
    padding: 22px 0;
}
}

/*------------------------------------------
    センター用フリーエリア（種類で選ぶ）
------------------------------------------*/
.select_type {
    margin-bottom: 1em;
}
.type_box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid #C8C8C8;
    box-sizing: border-box;
    margin-bottom: 2em;
}
.type_box:last-child {
    margin-bottom: 0;
}
.type_box.change {
    flex-direction: row-reverse;
}
.type_img {
    width: 34%;
}
.type_img img {
    width: 100%;
    display: block;
}
.type_txt {
    width: 59%;
    padding: 0 4% 0 3%;
    letter-spacing: .05em;
    text-align: left;
}
.type_box.change .type_txt {
    padding: 0 3% 0 4%;
}
.type_txt h4 {
    color: #6B7189;
    font-size: 21px;
    line-height: 1.2;
    font-weight: bold;
    margin-bottom: 1.2em;
}
.type_txt h4 span {
    font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-size: 16px;
}
.freeArea2 .free-contents .type_txt p {
    display: block;
    font-size: 14px;
    line-height: 2;
    margin-bottom: 1.2em;
}
.type_txt a {
    font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
    display: block;
    text-align: right;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 0.5em;
}
.type_txt a:hover {
    color: #e94f37;
}

@media(max-width:1200px){
.type_img {
    width: 45%;
}    
.type_txt {
    width: 48%;
}
}

@media(max-width:960px){    
.type_img {
    width: 50%;
}    
.type_txt {
    width: 43%;
}
.type_txt h4 {
    font-size: 18px;
}  
.type_txt h4 span  , .freeArea2 .free-contents .type_txt p , .type_txt a {
    font-size: 13px;
}     
}

@media(max-width:768px){
.select_type {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.type_box {
    width: 49%;
    padding: 2%;
    margin-bottom: 1em;
    align-items: flex-start;
    align-content: flex-start;
    position: relative;
}
.type_img {
    width: 100%;
    margin-bottom: 5%;
}
.type_txt , .type_box.change .type_txt {
    width: 100%;
    padding: 0;
    text-align: center;
}    
.type_txt h4 {
    display: none;
}  
.freeArea2 .free-contents .type_txt p {
    margin-bottom: 50px;
}  
.type_txt a {
    width: 92%;
    text-align: center;
    margin-bottom: 2em;
    position: absolute;
    bottom: 0;
}    
}

@media(max-width:480px){
.type_box {
    width: 100%;
    height: 100% !important;
    padding: 4%;
}
.freeArea2 .free-contents .type_txt p, .type_txt a {
    font-size: 14px;
}    
}

/*------------------------------------------
    商品詳細ページ
------------------------------------------*/
@media(max-width:1200px){
#itemDetail-cont .itemThumb-wrap {
    width: 45%;
    margin: 0 5% 0 0;
}    
#itemDetail-cont .itemOutline {
    width: 50%;
}    
}

@media(max-width:580px){
#itemDetail-cont .itemThumb-wrap {
    width: 100%;
    margin: 0 0 3%;
}   
#itemDetail-cont .itemOutline {
    width: 100%;
}     
}