@charset "utf-8";

#container { background:url('/design/together/img/main/cont_bg.png') no-repeat right 60%; }
h2 {font-size:28rem; margin-bottom:20rem; }
h2 span {color:var(--pink); }

.controls .paging {float:left; width:auto; color:#999; margin:-8rem 10rem 0 0; }
.controls .paging span {color:#333; padding:0 5rem}
.controls .paging span.swiper-pagination-current {color:var(--pink); font-size:22rem; font-weight:600; }
.controls a { position:relative; display:block; float:left; width:25rem; height:25rem; text-indent:-999999px; }
.controls a.swiper-button-disabled {opacity:0.3;}
.controls a.play {display:none;}
.controls a.next {transform:rotate(180deg);}
.controls a::before { content:''; position:absolute; left:50%; top:50%; transform:var(--center); background:var(--icon); }
.controls a.arrow::before { width:8px; height:15px; background-position:-34px -46px; }
.controls a.stop::before { width:9px; height:15px; background-position:-43px -46px; }
.controls a.play::before { width:7px; height:15px; background-position:-53px -46px; }
.controls a.more::before { width:17px; height:16px; background-position:-61px -46px; }

.cont1 { position:relative; background:var(--pinkbg); height:600rem; padding-top:100rem; }
.cont1 .wrap { position:relative; z-index:3; }
.cont1 .wrap::after {content:''; display:table; clear:both; }
.cont1 > img,
.cont1 .wrap > img { position:absolute; left:0; bottom:0; z-index:0;  }
.cont1 img.people { left:-30rem; bottom:50rem; z-index:2; }
.cont1 img.bg { left:50%; transform:var(--wcenter); min-width:1920px; width:100%; height:300rem; z-index:1; }
.cont1 img.flower2 { left:50%; bottom:60rem; }
.cont1 img.flower { left:auto; right:0; bottom:300rem; }
@media all and (max-width:1023px){
    .cont1 {height:auto; padding-bottom:100rem; }
    .cont1 img.people {display:none;}
}
@media all and (max-width:768px){
    .cont1 img.flower2 {display:none;}
}

.visual { float:left; width:calc(100% - 436rem); font-family:var(--tangs); font-size:28rem; }
.visual > div { position:relative; display:inline-block; padding:10rem 30rem 10rem 10rem; margin-top:40rem; line-height:1.5; text-align:center; letter-spacing:-1.3px;  }
.visual > div::before,
.visual > div::after { content:'"'; position:absolute; left:0; top:0; font-size:50rem; color:var(--pink); opacity:0.3; }
.visual > div::after {left:auto; top:auto; right:0; bottom:0; }
.visual span {display:block;}
.visual strong { font-size:40rem; color:var(--pink); padding-left:90rem; }
@media all and (max-width:1023px){
    .visual { width:100%; text-align:center; }
}
@media all and (max-width:768px){
    .visual { font-size:25rem; }
    .visual strong {padding-left:30rem; }
}
@media all and (max-width:480px){
    .visual { display:none; }
}

.popup { position:relative; float:right; padding:25rem 0 45rem;  width:436rem; z-index:10; }
.popup .controls { position:absolute; right:0; bottom:0;  }
.popup .slide_warp { float:right; width:100%; overflow:hidden; border-radius:40rem 40rem 20rem 40rem; box-shadow:0 0 15rem rgba(0,0,0,.1); }
@media all and (max-width:1023px){
    .popup {width:100%;}
    .popup .slide_warp {border-radius: 0; box-shadow:none; }
    .popup .slide_warp a { overflow:hidden; border-radius:40rem 40rem 20rem 40rem; }
    .popup .slide_warp img {width:100%;}
}

#all_Close {display:none;}
.all_view { display:block !important; position:fixed; left:0; top:0; width:100%; height:100%; padding:50px; transform:none !important; transition-duration:unset !important; overflow-y:scroll; text-align:center; z-index:50; box-sizing:border-box; }
.all_view::before {content:''; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,.5); backdrop-filter:blur(10px); }
.all_view a:not(#all_Close) { display:inline-block; margin:20rem !important; transform:none !important; backface-visibility:unset !important; height:auto; border-radius:0 !important; width:auto !important; }
.all_view #all_Close { display:block; position:absolute; right:50rem; top:50rem; width:50rem !important; height:50rem; margin-right:0 !important; background:#333; border-radius:50%; text-indent:-999990px; }
.all_view #all_Close::before,
.all_view #all_Close::after {content:''; position:absolute; left:50%; top:30%; width:2px; height:20rem; background:#fff; transform:rotate(45deg);}
.all_view #all_Close::after {transform:rotate(-45deg);}
@media all and (max-width:1500px){
    .all_view #all_Close { top:30rem; right:30rem; }
}

.cont2 { position:relative; overflow:hidden; margin-top:-50rem; z-index:10; }
.notice { position:relative; float:left; width:calc(75% - 60rem); }
.notice a:not(.more) {display:block; float:left; width:calc((100% - 60rem)/3); margin-left:30rem; padding:30rem; background:#f5f9fd; border-radius:20rem; }
.notice a:not(.more):first-of-type {margin-left:0; }
.notice a:not(.more) dt { font-size:19rem; font-weight:600; line-height:29rem; max-height:58rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; }
.notice a:not(.more) dd:not(.date) { line-height:26rem; max-height:52rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; margin:20rem 0; }
.notice a:not(.more) dd.date { position:relative; font-size:15rem; color:var(--gray); padding-left:25rem;  }
.notice a:not(.more) dd.date::before { content:''; position:absolute; left:0; top:50%; width:15px; height:15px; background:var(--icon); background-position:-79px -46px; transform:var(--hcenter); }
.notice .more { position:absolute; left:130rem; top:10rem; padding:0 28rem 0 20rem; }
.notice .more::after {content:''; position:absolute; top:5rem; right:0;  width:17px; height:16px; background:var(--icon); background-position:-61px -46px; }
.notice .more::before {content:''; position:absolute; left:0; top:0; width:1px; height:100%; background:#d5d5d5; }
@media all and (max-width:1023px){
    .notice { width:100%; }
}
@media all and (max-width:768px){
    .notice a:not(.more) {width:100%; margin-left:0; margin-top:20rem;}
    .notice a:not(.more):first-of-type {margin-top:0; }
}

.type { float:right; width:25%; margin-top:68rem; }
.type a { display:flex; align-items:center; float:left; width:calc((100% - 10rem)/2); height:112rem; margin:0 0 10rem 10rem; background:#fbe4ae; border-radius:20rem; }
.type a:nth-of-type(2n-1) {margin:0 0 10rem; }
.type a:nth-of-type(2) {background:#ffecdf;}
.type a:nth-of-type(3) {background:#c9e7ff;}
.type a:nth-of-type(4) {background:#f4f8b1;}
.type a span { position:relative; width:100%; text-align:center; padding-top:60px }
.type a span::before {content:''; position:absolute; left:50%; top:0; width:60px; height:60px; background:var(--icon); background-position:0 -65px; transform:var(--wcenter); }
.type a.icon2 span::before { background-position:-60px -65px; }
.type a.icon3 span::before { background-position:-120px -65px; }
.type a.icon4 span::before { background-position:-180px -65px; }
@media (max-width:1023px) and (min-width:769px){
    .type {width:100%; margin-top:40rem; }
    .type a { width:calc((100% - 30rem)/4); }
    .type a:nth-of-type(3) {margin:0 0 10rem 10rem; }
}
@media all and (max-width:768px){
    .type {width:100%; margin-top:40rem; }
}

.cont3 { position:relative; margin-top:40rem; padding-bottom:15rem;}
.cont3::after {content:''; display:table; clear:both; }
.cont3 .h2 { float:left; width:260rem; }
.cont3 .h2 dd span {display:block;}
.cont3 .controls {position:absolute; right:0; bottom:0; }
.cont3 .slide { align-items:center; height:255rem; }
.cont3 .slide_wrap {float:right; width:calc(100% - 260rem); overflow:hidden; }
.cont3 .slide_wrap a { position:relative; display:flex; align-items:center; height:215rem; border:1px solid var(--pink); border-radius:20rem 40rem; box-shadow:0 0 10rem rgba(0,0,0,0.2); overflow:hidden; transition:0.3s;}
.cont3 .slide_wrap a::before,
.cont3 .slide_wrap a::after { content:''; position:absolute; right:0; bottom:0; width:40rem; height:40rem; background:var(--pink); }
.cont3 .slide_wrap a::before { border-radius:20rem 0 0 0; }
.cont3 .slide_wrap a::after { right:9rem; bottom:13rem; width:20px; height:11px; background:var(--icon); background-position:-95px -46px; }
.cont3 .slide_wrap dl {width:100%; text-align:center;}
.cont3 .slide_wrap dt { position:relative; font-size:18rem; color:var(--pink); font-weight:600; padding-bottom:110rem; }
.cont3 .slide_wrap dt::before,
.cont3 .slide_wrap dt::after { content:''; position:absolute; left:50%; bottom:0; width:100rem; height:100rem; background:#f8f8f8; transform:var(--wcenter); border-radius:50%; z-index:1; }
.cont3 .slide_wrap dt::before { bottom:20rem; width:60px; height:60px; background:var(--icon); background-position:0 -125px; border-radius:0;  z-index:2; }
.cont3 .slide_wrap .icon2 dt::before { background-position:-60px -125px; }
.cont3 .slide_wrap .icon3 dt::before { background-position:-120px -125px; }
.cont3 .slide_wrap .icon4 dt::before { background-position:-180px -125px; }
.cont3 .slide_wrap dt span { position:relative; display:inline-block; }
.cont3 .slide_wrap dt span::before {content:''; position:absolute; left:0; bottom:0; width:100%; height:10rem; background:#fff6e7; z-index:-1; }
.cont3 .slide_wrap dd {display:none;}
.cont3 .slide_wrap a.swiper-slide-active { height:255rem; background:var(--pink); }
.cont3 .slide_wrap a.swiper-slide-active dt { color:#fff; }
.cont3 .slide_wrap a.swiper-slide-active dt span::before {display:none;}
.cont3 .slide_wrap a.swiper-slide-active dd { display:block; color:#fff; font-size:15rem; padding:10rem 20rem 0; } 
.cont3 .slide_wrap a.swiper-slide-active::before,
.cont3 .slide_wrap a.swiper-slide-active::after {display:none;}
.cont3 .scroll_bar { float:left; width:calc(100% - 450rem); margin:30rem 0 0 260rem; background:#f6f6f6; border-radius:3rem;  }
.cont3 .scroll_bar .swiper-scrollbar-drag { height:5rem; background:var(--pink); border-radius:5rem; }
@media all and (max-width:1023px){
    .cont3 .h2 {width:100%; }
    .cont3 .h2 dt {float:left; }
    .cont3 .h2 dd {float:left; padding:12rem 0 0 20rem; }
    .cont3 .h2 dd span { display:inline-block; }
    .cont3 .slide_wrap { width:100%; }
    .cont3 .scroll_bar { width:calc(100% - 200rem); margin:30rem 0 0;  }
}
@media all and (max-width:480px){
    .cont3 .h2 dd {display:none;}
}