@charset "utf-8";
@import 'all.css';
@import 'styles.css';


/* 銀座スクエア TOP --------------------------------------------------------------*/
/*ビジュアルスライダー */
#slider {
width: 100%;
display: block;
}
/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:96%;
    margin:0 auto 20px;
    padding-top: 170px;
}

.slider img {
    width:75vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}

.slider .slick-slide {
	transform: scale(0.85);/*左右の画像のサイズを80%に*/
	transition: all .8s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 52%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    /*border-top: 2px solid #666;/*矢印の色*/
    /*border-right: 2px solid #666;/*矢印の色*/
    height: 60px;
    width: 36px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: 7.0%;
    /*transform: rotate(-135deg);*/
    background-image: url("/ginza-square/common/img/icon/yaji_left.png");
    z-index:98;
}

.slick-next {/*次へ矢印の位置と形状*/
    right: 7.0%;
    background-image: url("/ginza-square/common/img/icon/yaji_left.png");
    transform: rotate(180deg);
    z-index:98;
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:15px;/*ドットボタンのサイズ*/
    height:15px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}


@media (max-width: 580px) {
    .slider-smp {/*横幅94%で左右に余白を持たせて中央寄せ*/
   padding-top: 70px;
   width:100%;
    margin:0 auto;
}

.slider-smp img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
    backface-visibility: hidden;/*追加*/
}
    /*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 52%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
   /* border-top: 2px solid #7E7F80;/*矢印の色*/
   /* border-right: 2px solid #7E7F80;/*矢印の色*/
    /*height: 15px;
    /*width: 15px;
    z-index: 99;*/
     background-image: none;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: 1.5%;
    transform: rotate(-135deg);
    display: none;
}

.slick-next {/*次へ矢印の位置と形状*/
    right: 1.5%;
    transform: rotate(45deg);
    display: none;
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 40px 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:22px;/*ドットボタンのサイズ*/
    height:22px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:0%;
    background: #E5E5E5;/*ドットボタンの色*/
    border: none;
}

.slick-dots .slick-active button{
    background:#7E7F80;/*ドットボタンの現在地表示の色*/
}
}

/* ちらつき防止 */

#HEADER,
#MAIN .floor *,
#SUB,
#footer {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* お知らせ */
#p_top #news .section{
    margin: 60px 0;
}

#news h2{
font-size: 2.0rem;
    font-weight: 400;
    padding-left: 20px;
}


#news .frame {
	position: relative;
	z-index: 10;
	height: 180px;
	padding: 20px;
	margin-bottom: 0;
    border: solid 1px #ccc;
}

#view{
	height: 110px;
	/*margin-top: -25px;*/
	background: #fff;
	overflow-y: auto;
	padding: 10px 10px 10px 20px;
}

@media (max-width: 580px) {
#news h2{
font-size: 1.4rem;
font-weight: 400;
padding-left: 0px;
}
#news .frame {
	position: relative;
	z-index: 10;
	height: 140px;
	padding: 15px;
	margin-bottom: 0;
    border: solid 1px #ccc;
    margin: 0 2rem;
}

#view{
	height: 100px;
	background: #fff;
	overflow-y: auto;
	padding: 0px 10px 10px 0px;
    font-size: 0.8rem;
}
}




#floor,
#form,
#movie,
#guide,
#outline,
#flow{
    text-align: center;
    margin: 0 auto;
}




/* MAIN */

#MAIN h1{
	display:none;
}

#MAIN .section .sub-section{
	margin-bottom:30px;
}

#media,
#insta,
#banner{
    text-align: center;
}


/*フロアトピックス*/
#topics {
    display: block;
    height: auto;
    margin-top: 80px;
}

#topics .text-line{
    text-decoration-line:line-through;
    text-decoration-color: red;
}


#topics a{
    text-decoration: none;
}


#topics .topics-inner{
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    max-width: 1260px;
    margin: -350px auto 0;
    padding: 0rem 10rem;
    margin-inline: auto;
     z-index: 2;
}


#topics  .sq_bg{
    background-color: #F6F6F6;
    z-index: 1;
    height: 400px;
    display: block;
    margin-top: 50px;
}


#topics .topics-inner .wrapper{
display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
}

#topics .topics_item {
margin-bottom: 10rem;
}

#topics .topics_item > h4{
    font-size: 2.0rem;
    margin-bottom: 1.0rem;
}

#topics .topics-inner .topics-contents{
    padding: 1.8rem;
}
#topics .topics-inner .topics-name{
    text-align: left;
    font-weight: 400;
}

#topics .topics-inner .topics-limitd{
    font-size: 1.4rem;
    line-height: 1;
    display: inline-block;
    color: #e63817;
    border: solid 1px #e63817;
    padding: 0.6rem 2rem;
    border-radius: 20px;
}

#topics .topics-inner .topics-title{
    line-height: 1.6;
    display: -webkit-box;
    overflow: visible;
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient: vertical;
    /* height: 4.6em; */
    margin-top: 1.2rem;
    font-size: 1.8rem;
    font-weight: 400;
}

#topics .topics-inner p{
    line-height: 1.6em;
    font-size: 1.6rem;
    margin-top: 10px;
}

#topics .topics_pic {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

#topics .topics-inner img {
    height: calc(100% + 0px);
    width: 100%;
}


/*フロアトピックスSMP*/
@media (max-width: 580px) {
#topics {
    display: block;
    height: auto;
    margin-top: 80px;
}


#topics .topics-inner{
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    max-width: 581px;
    margin: 0px auto 0;
    padding: 0rem 2rem;
    margin-inline: auto;
     z-index: 2;
}


#topics  .sq_bg{
    display: none;
}


#topics .topics-inner .wrapper{
display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0px;
}

#topics .topics_item {
margin-bottom: 2rem;
}

#topics .topics_item > h4{
    font-size: 1.6rem;
    margin-bottom: 1.0rem;
}

#topics .topics-inner .topics_smp{
        border: solid 1px #ccc;
        border-radius: 15px;
    }
    
#topics .topics-inner  .topics_smp .topics-content{
    padding: 1.8rem;
    margin-bottom: 1rem;
}
#topics .topics-inner .topics-name{
    text-align: left;
}

#topics .topics-inner .topics-limitd{
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
    color: #e63817;
    border: solid 1px #e63817;
    padding: 0.6rem 2rem;
    border-radius: 20px;
}

#topics .topics-inner .topics-title{
    line-height: 1.6;
    display: -webkit-box;
    overflow: visible;
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient: vertical;
    /* height: 4.6em; */
    margin-top: 1.2rem;
    font-size: 1.6rem;
    font-weight: 400;
}

#topics .topics-inner p{
    line-height: 1.6em;
    font-size: 1.4rem;
    margin-top: 1rem;
}


#topics .topics_pic {
    position: relative;
    overflow: hidden;
    margin-bottom: 0rem;
    border-radius: 15px 15px 0 0;
}

#topics .topics-inner img {
    height: calc(100% + 0px);
    width: 100%;
}
 #banner{
        margin: 2rem 2rem 7rem 2rem;
    }
}


#movie a,
#floor a{
    text-decoration: none;
}


.wFix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	overflow: hidden;
}


#newfloor{
    text-align: center;
    margin: auto 0;
}





/*動画*/
#movie {
    margin: 80px 0 60px;
    text-align: center;
}

#movie .sq_bg{
	padding: 5rem 0;
	display: block;
    background-color: #F6F6F6;
    margin-top: 5rem;
}

/***フロア案内**/

#floor .inner{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 80px;
}
.shop_lang .floor_ttl,
.shop .floor_ttl {
    border-bottom: solid #579BC2 2px;
    padding-bottom: 15px;
     margin: 35px 0;
}
.studio .floor_ttl {
    border-bottom: solid #F09A80 2px;
    padding-bottom: 15px;
     margin: 35px 0;
}
.food .floor_ttl {
    border-bottom: solid #61BD9A 2px;
    padding-bottom: 15px;
         margin: 35px 0;
}
.others .floor_ttl {
    border-bottom: solid #7E7F80 2px;
    padding-bottom: 15px;
     margin: 35px 0;
}

.floor_tag {
    font-size: 1.2rem;
    line-height: 2.2em;
    text-align: center;
    color: #FFF;
    display: inline-block;
	width: 90px;
	height: 24px;
	background: #579BC2;
	/*background: linear-gradient(135deg, transparent 8px, #579BC2 0) top left,
	linear-gradient(0deg, transparent 0px, #579BC2 0) top right,
	linear-gradient(0deg, transparent 0px, #579BC2 0) bottom right,
	linear-gradient(0deg, transparent 0px, #579BC2 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;*/
    box-sizing: border-box;
}

.studio .floor_tag {
    font-size: 1.2rem;
    line-height: 2.2em;
    text-align: center;
    color: #FFF;
    display: inline-block;
	width: 200px;
	height: 24px;
	background: #F09A80;
	/*background: linear-gradient(135deg, transparent 8px, #F09A80 0) top left,
	linear-gradient(0deg, transparent 0px, #F09A80 0) top right,
	linear-gradient(0deg, transparent 0px, #F09A80 0) bottom right,
	linear-gradient(0deg, transparent 0px, #F09A80 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;*/
    box-sizing: border-box;
}
	.studio .floor_tag_reserve{
    font-size: 1.2rem;
    line-height: 2.2em;    
    text-align: center;
    color: #FFF;
    display: inline-block;
	width: 100px;
	/*height: 24px;*/
	background: #F09A80;
	/*background: linear-gradient(135deg, transparent 8px, #F09A80 0) top left,
	linear-gradient(0deg, transparent 0px, #F09A80 0) top right,
	linear-gradient(0deg, transparent 0px, #F09A80 0) bottom right,
	linear-gradient(0deg, transparent 0px, #F09A80 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;*/
}

	.studio .floor_tag_reserve_en{
    font-size: 1.2rem; 
   line-height: 1.2em;    
    text-align: center;
    color: #FFF;
    display: inline-block;
	width: 200px;
	background: #F09A80;
     padding: 5px 0; 
}

.others .floor_tag {
    font-size: 1.2rem;
    line-height: 2.2em;
    text-align: center;
    color: #FFF;
    display: inline-block;
	width: 200px;
	height: 24px;
	background: #7E7F80;
	/*background: linear-gradient(135deg, transparent 8px, #7E7F80 0) top left,
	linear-gradient(0deg, transparent 0px, #7E7F80 0) top right,
	linear-gradient(0deg, transparent 0px, #7E7F80 0) bottom right,
	linear-gradient(0deg, transparent 0px, #7E7F80 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;*/
        box-sizing: border-box;
}

#floor .inner{
 padding: 0 30px;   
}
#floor .inner .floor_box .floor_container{
    display: flex;
    justify-content: flex-end;
    margin-top:15px;
    padding-bottom: 30px;
}
#floor .shop_lang .inner .floor_box.line,
#floor .shop .inner .floor_box.line{
border-bottom: solid #579BC2 2px;
}
#floor .studio .inner .floor_box.line{
border-bottom: solid #F09A80 2px;
}
#floor .food .inner .floor_box.line{
border-bottom: solid #61BD9A 2px;
}
#floor .others .inner .floor_box.line{
border-bottom: solid #7E7F80 2px;
}

#floor .others .inner .floor_box.line.non{
border-bottom: solid #7E7F80 0px;
}


#floor .inner .floor_box .floor_no{
    width: 60px;
    margin-right: 20px;
}
#floor .inner .floor_box .floor_logo{
    width: 50px;
    margin: 5px 10px 0 0;
}
#floor .inner .floor_box .floor_logo_cafe{
    width: 68px;
    margin: 5px 10px 0 0;
}
#floor .inner .floor_box .floor_name{
    display: inline-flex;
}

#floor .inner .floor_box .floor_name p.name{
    font-size: 2.0rem;
    font-weight: 500;
    margin: 0px;
    margin-top: 10px;
}

#floor .inner .floor_box .floor_discription{
    width: 210px;
    display: inline-block;
}

#floor .inner .floor_box .floor_discription p{
    font-size: 1.6rem;
    margin-top: 5px;
    line-height: 1.6em;
}

#floor .inner .floor_box .pic{
    display: inline-block;
    width: 250px;
    vertical-align: top;
}

#floor .inner .floor_box .tax{
    width: 100px;
}

#floor .inner .floor_box .rest{
    width: 60px;
   margin-right: 20px;
}

@media (max-width: 580px) {
#floor h4.floor_ttl img.smp{
        max-width: 40%;
    }
.others .floor_ttl,
.food .floor_ttl,
.studio .floor_ttl {
     margin: 0px 0 35px;
}
 
#floor .inner{
    display: flex;
    flex-flow: column;
    padding: 0 0px;
}
    
#floor .inner .floor_box{
    width: 90%;
    margin: 0 auto;
    }
#floor .inner .floor_box .floor_name{
    display: flex;
      align-items: center;
}
    
#floor .inner .floor_box .floor_no{
    width: 10%;
    margin-right: 10px;
}
#floor .inner .floor_box .floor_logo{
    width: 8%;
    margin: 5px 10px 0 0;
}
#floor .inner .floor_box .floor_logo_cafe{
    width: 12%;
    margin: 5px 10px 0 0;
}


#floor .inner .floor_box .floor_name p.name{
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0px;
}

#floor .inner .floor_box .floor_discription{
    width: 50%;
    display: inline-block;
}

#floor .inner .floor_box .floor_discription p{
    font-size: 1.2rem;
    margin-top: 5px;
    line-height: 1.6em;
}

#floor .inner .floor_box .pic{
    display: inline-block;
    width: 40%;
    vertical-align: top;
}

#floor .inner .floor_box .tax{
    width: 100px;
}

#floor .inner .floor_box .rest{
    width: 10%;
   margin-right: 10px;
}
 .floor_tag {
    font-size: 1.0rem;
	width: 60px;
	height: 24px;
}
.others .floor_tag,
.studio .floor_tag {
    font-size: 1.0rem;
	width: 120px;
	height: 35px;
    line-height: 1.4em;
     padding-top: 5px;
    }
/*.studio .floor_tag_reserve{
    font-size: 1.0rem;
	width: 100px;
	height: 24px;
}*/
    
.studio .floor_tag_reserve_en{
   font-size: 1.0rem;
   line-height: 1.2em;    
    text-align: center;
    color: #FFF;
    display: inline-block;
	width: 120px;
	background: #F09A80;
     padding: 5px 0; 
}
#floor .shop_lang .inner .floor_box.line_smp,    
#floor .shop .inner .floor_box.line_smp{
border-bottom: solid #579BC2 2px;
}
#floor .studio .inner .floor_box.line_smp{
border-bottom: solid #F09A80 2px;
}
#floor .food .inner .floor_box.line_smp{
border-bottom: solid #61BD9A 2px;
}
#floor .others .inner .floor_box.line_smp{
border-bottom: solid #7E7F80 2px;
}
#floor .others .inner .floor_box.line.non{
border-bottom: solid #7E7F80 2px;
}
}
@media (max-width: 580px) {
#access {
	margin: 0 0 50px;
	padding: 0 2rem;
}

#access #sqMap {
	width: 100%;
	height: 180px;
	margin: 20px auto;
}

#access dt span {
	display: block;
	width: 90px;
	height: 18px;
	text-indent: 200px;
	overflow: hidden;
	background: url('/ginza-square/common/img/icon/tags.gif') no-repeat 0 0;
}
#access dt.address span{background-position: 0 -241px;}
#access dt.open span{background-position: 0 -271px;}
#access dt.tel span{background-position: 0 -301px;}
#access dt.trans span{background-position: 0 -331px;}

#access dd {
	position:relative;
	/*margin:5px 0 20px 0;*/
}

#access dt {
	display: none;
}
#access dd {
	margin-top: 5px;
        font-size: 1.2rem;
        text-align: left;
}

#access .phone a {
	display: block;
	text-align: center;
	background: #efefef url('/ginza-square/common/img/button_gray.gif') no-repeat 0 50%;
	background-position: 100% 50%;
	margin-top: 20px;
}

#access .phone a span {
	display: inline-block;
	line-height: 40px;
	font-size: 140%;
	padding-left: 32px;
	padding-right: 16px;
	background: url('/ginza-square/common/img/icon/phone_l.png') no-repeat 0 50%;
	background-size: 24px auto;
}
    #access .map img{
    vertical-align: top;
    border: solid 1px  #7E7F80;
   width: 90%;
    margin-top: 10px;
    padding: 2rem;
}
}
/*  --------------------------------------------------------------*/
/*干支相性診断*/
#special {
width: 1170px;
margin: 60px auto;
}
#special .spcon{
background-color: #3bb9cc;
text-align: center;
position: relative;
padding: 60px 0px;
}

#special .spcon .ilst_top_lt_01{
    position: absolute;
    top:40px;
    left:20px;
}
#special .spcon .ilst_top_rt_01{
    position: absolute;
     top:40px;
    right:20px;
}

#special p{
    color: #fff;
    font-size: 1.6rem;
}

#special .ttl_01{
    position: relative;
}


#special .ttl_02{
margin-top: 40px;
display: inline-block;
}

#special .ttl_03{
margin-top: 15px;
display: inline-block;
}

#special .contents-cpy{
    color: #fff;
    padding: 30px 0;
}

#special .highlights{
    background-color: #f7ce00;
    width: 850px;
    margin: 40px auto 0px;
    position: relative;
}
#special .intro h4,
#special .highlights h4{
    font-size: 2.2rem;
}

#special .highlights .pop{
    position: absolute;
    top:-40px;
    right:170px;
}

#special .highlights .ilst_top_lf_02{
    position: absolute;
    top:-160px;
    left:-110px;
}
#special .highlights .ilst_top_rt_02{
    position: absolute;
    top:-160px;
    right:-90px;
}

#special .contner-highlights{
    display: flex;
    justify-content: space-between;
    padding: 25px 160px;
    gap:20px;
}

#special .contner-highlights-inner{
    display: flex;
    flex-direction: column;
    gap: 10px;
        width: 74%;
}

#special .contner-highlights-inner .contner-place{
     display: flex;
    justify-content: space-between;
    gap: 20px;
}
#special .contner-highlights-inner .contner-place .place{
     width: 14%;
    background-color: #fff;
    padding: 0px 0px;
    height:50px;
    position: relative;
}
#special .contner-highlights-inner .contner-place .place p{
    color: #3bb9cc;
    font-size: 3.0rem;
    margin: 0px;
    padding: 0px;
    vertical-align: top;
}
#special .contner-highlights-inner .contner-place .place-discri{
    text-align: left;
    color: #fff;
     width:100%;
}

#special .contner-highlights-inner .contner-place .place-discri p{
    margin-top: 5px;
    font-size: 1.4rem;
    line-height: 1.4em;
}
#special .contner-highlights-inner .contner-place .place-discri h5{
    font-size: 2.5rem;
    margin-bottom: 0px;
}


#special .introduction{
    margin: 40px 0;
}

#special .intro{
    background-color: #f7ce00;
    width: 850px;
    margin: 40px auto 0px;
}

#special .introduction p{
    margin-top: 20px;
}

#special .contner-art {
padding: 0px 140px 0px 160px;
margin-top: 20px;
display: flex;
justify-content: space-between;
}



#special .contner-partners{
    background-color: #d2ecfa;
    padding: 20px 0px;
    margin: 60px 35px;
    position: relative;
}

#special .contner-partners .ilst_btm_lt_01{
    position: absolute;
    top:-160px;
    left:-20px ;
}

#special .contner-partners .ilst_btm_rt_01{
    position: absolute;
    top:-120px;
    right:0px ;
}

#special .contner-partners-inner{
    display: inline-block;
     margin-top:10px;
}
#special .contner-partners-inner p{
    font-size: 1.4rem;
    color:  #000000;
    text-align: left;
    margin-top: 5px;
    line-height: 1.4em;
}

#special .contner-partners-box{
    /*display: flex;
    justify-content: space-between;
    gap:20px;*/
    border: 1px #3bb9cc solid;
    background-color: #fff;
    padding: 20px;
    width: 460px;
    display: inline-block;
    margin: 15px;
    position: relative;
}

#special .contner-partners-box .b_go{
    position: absolute;
    bottom: -20px;
    right: -20px;
    display: inline-block;
}

#special .contner-partners-box .partners-discription{
    display: inline-block;
    text-align: left;
    width: 64%;
    margin-right: 1%;
}
#special .contner-partners-box .partners-pic{
 width: 34%;
display: inline-block;
vertical-align: top;
}


#special .button a{
color:#000;
}

#special .button {
/*display: flex;
justify-content: center;*/
align-items: center;
width: 500px;
margin:0 auto;
padding: .2em 2em;
border-radius: 25px;
background-color: #f7ce00;
color: #000;
font-size: 2.0em;
border: solid 3px #fff;
box-shadow: 4px 4px #248b96;    
}





#special .button-2 a{
color:#fff;
}

.button-2 {
/*display: flex;*/
justify-content: center;
align-items: center;
width: 500px;
margin:0 auto;
padding: .2em 2em;
border: none;
border-radius: 25px;
background-color: #BE3526;
color: #fff;
font-size: 1.8em;
position: relative;
}

.button-2::after {
position: absolute;
top:40%;
right: 5%;
transform: rotate(45deg);
width: 8px;
height: 8px;
margin-left: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
content: '';
}

.button-2:hover {
background-color: #dd655b;
}


@media (max-width: 580px) {
#special {
width: 100%;
margin: 20px auto;
height: auto;
}
#special p{
    font-size: 1.4rem;
}    

#special .spcon .ilst_top_lt_01{
    position: absolute;
    top:10px;
    left:10px;
    width: 34%;
}
#special .spcon .ilst_top_rt_01{
    position: absolute;
     top:10px;
    right:10px;
    width: 34%;
}
    
#special .ttl_01{
    display: inline-block;
    width: 45%;
}
   
#special .ttl_02{
    width: 80%;
}
#special .ttl_03{
    width: 80%;
}
    
#special .contents-cpy{
    padding: 20px 0 0 0;
    text-align: left;
    width: 80%;
    display: inline-block;
}
    
#special .highlights{
    width: 100%;
    margin: 100px auto 0px;
}

#special .highlights h4{
    font-size: 1.8rem;
}

#special .highlights .pop{
    position: absolute;
    top:-20px;
    right:10px;
    width: 30%;
}

#special .highlights .ilst_top_lf_02{
    position: absolute;
    top:-100px;
    left:0px;
    width: 20%;
}
#special .highlights .ilst_top_rt_02{
    position: absolute;
    top:-100px;
    right:20px;
    width: 15%;
}    
    
#special .contner-highlights{
    display: flex;
     flex-direction: column-reverse;
    padding: 25px 0px;
    gap:20px;
    width: 80%;
    margin: 0 auto;
}

#special .contner-highlights-inner{
    display: flex;
    gap: 10px;
        width: 100%;
         flex-direction: column;
}

#special .contner-highlights-inner .contner-place{
display: flex;
justify-content: space-between;
gap: 20px;
flex-direction: column;
    margin-bottom: 20px;
}
#special .contner-highlights-inner .contner-place .place{
     width: 100%;
    background-color: #fff;
    padding: 0px 0px;
    height:35px;
    position: relative;
}
#special .contner-highlights-inner .contner-place .place p{
    color: #3bb9cc;
    font-size: 2.4rem;
    margin: 0px;
    padding: 0px;
    line-height: 1.6em;
}
#special .contner-highlights-inner .contner-place .place-discri{
    text-align: left;
    color: #fff;
     width:100%;
}

#special .contner-highlights-inner .contner-place .place-discri p{
    margin-top: 0px;
    font-size: 1.4rem;
    line-height: 1.4em;
}
#special .contner-highlights-inner .contner-place .place-discri h5{
    font-size: 1.8rem;
    margin-top: -10px;
    margin-bottom: 0px;
    text-align: center;
}

#special .intro{
    width: 100%;
    margin: 0px auto 0px;
}

#special .intro h4{
    font-size: 1.8rem;
}    
 
#special .contner-art {
width: 80%;
margin: 0 auto;
padding: 0px;
margin-top: 30px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
flex-direction: row;   
gap:10px;
}


#special .contner-art button{
        width: 48%;
    }
 
    
#special .contner-partners{
    padding: 20px 0px 60px;
    margin: 20px 0 0;
    position: relative;
}

#special .contner-partners h4 img{
        width: 35%;
    }    
    
#special .contner-partners .ilst_btm_lt_01{
    position: absolute;
    top: auto;
    bottom:-70px;
    left:0px ;
    width: 30%;
    z-index: 99;
}

#special .contner-partners .ilst_btm_rt_01{
    position: absolute;
    top:-60px;
    right:0px ;
    width: 30%;
}

#special .contner-partners-inner{
    display: inline-block;
     margin-top:10px;
}
    
#special .contner-partners-inner p{
    font-size: 1.4rem;
    color:  #000000;
    text-align: left;
    margin-top: 5px;
    line-height: 1.4em;
}

#special .contner-partners-box{
    border: 1px #3bb9cc solid;
    background-color: #fff;
    padding: 20px;
    width: 80%;
    display: inline-block;
    margin: 15px;
    position: relative;
}

#special .contner-partners-box .b_go{
    position: absolute;
    bottom: -20px;
    right: -20px;
    display: inline-block;
}

#special .contner-partners-box .partners-discription{
    display: block;
    text-align: left;
    width: 100%;
    margin-right: 0%;
    margin-bottom: 2%;
}
    
#special .contner-partners-box .partners-pic{
width: 60%;
display: inline-block;
vertical-align: top;
text-align: center;
}    

#special .button {
width: 70%;
}
#special .btn-section{
margin-top: 30px;
}
#special .button a{
font-size: 1.6rem;
}
}

/*****モーダル*****/
/* ボタン */
.open-btn {
border: none;
cursor: pointer;
background-color:#3bb9cc;
}

.open-btn:hover {
/*background-color: #dfbb36;*/
}

.close-btn {
position: absolute;
top: 12px;
right: 10px;
font-size: 1.6rem;
background: transparent;
border: none;
cursor: pointer;
transition: transform 0.3s ease;
z-index: 100;
}

/* モーダル背景 */
.modal {
display: none;
/*display:block;*/
position: fixed;
top: 0;
left: 0;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgba(79, 79, 79, 0.8);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

/* モーダル表示状態*/
.modal.active {
display: flex;
opacity: 1;
pointer-events: auto;
} 

/* モーダルの中身*/
.modal-content {
background: #3bb9cc;
/*background-image: url("/ginza-square/campaign/2601newyear/img_eto/sw_bg.png");
background-repeat: no-repeat;*/
padding: 0rem;
border-radius: 0px;
/*width: 80vw;*/
width: 660px;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
position: relative;
opacity: 0;
transform: scale(0.8);
transition: all 0.3s ease;
}


.art_inner{
text-align: center;
background: #3bb9cc;
padding: 30px;
margin: 0 auto;
}

.modal-content .eto_inner{
text-align: center;
padding: 50px 60px 15px;
}

.art_box {
    border: double #fff 6px; 
    text-align: center;
    padding: 40px;
}

#special .modal-content .art_box_inner{
    text-align: center;
    padding: 0 15%;
}

#special .modal-content .art_box_inner .ttl_art_name h4{
font-size: 2.8rem;
border-bottom: 2px solid #fff;
margin: 0px auto 30px;
color: #FFF;
text-align: center;
}


#special .modal-content .ttl_art_discription p{
font-size: 1.6rem;
margin: 20px 0 0px;
}



@media (max-width: 580px) {
.close-btn {
position: absolute;
top: -20px;
right: -20px;
font-size: 1.6rem;
background: transparent;
border: none;
cursor: pointer;
transition: transform 0.3s ease;
z-index: 100;
}
    
#special .art_inner{
padding: 10px;
}    

#special .modal-content .art_box_inner {
padding: 0 0%;    
}    
#special .art_box{
border: none;
text-align: center;
padding: 10px;
}  

 #special .modal-content .ttl_art_discription p {
    font-size: 1.4rem;
     text-align: left;
}   
    
/* モーダルの中身*/
.modal-content {
border-radius: 0px;
width: 80vw;
max-width: 700px;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
position: relative;
opacity: 0;
transform: scale(0.8);
transition: all 0.3s ease;
}


.smp_size-xsmall{
width: 30%;
}
.smp_size-small{
width: 70%;
}
}

/* アニメーション*/
.modal.active .modal-content {
animation: fadeInScale 0.4s ease forwards;
}

@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/*干支相性診断おわり*/
/*  --------------------------------------------------------------*/