@charset "utf-8";

/* ===================================================== */
/* SUB-COMMON : S */

/* SUB-VISUAL */
.sub-visual {position: relative; z-index: 10; height: 450px; background: #444 no-repeat center/cover;}
.sub-visual-bg { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.sub-visual-bg span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #444 no-repeat center/cover; transform: scale(1.1); animation: sub-visual 5s linear both;} 
@keyframes sub-visual {  0% { transform: scale(1.1); } 
100% { transform: scale(1); } }

.sub-visual-txt { position: absolute; top: 55%; left: 50%; width: 100%; padding: 0 20px; text-align: center; color: #fff; transform: translate(-50%, -50%);}
.sub-visual-tit {margin-bottom: 13px; font-weight: 700; font-size: 45px;}
.sub-visual-slogan { overflow: hidden; position: relative; font-weight: 500; font-size: 15px; line-height: 1.3; text-align: center;}
.sub-visual-slogan li { opacity: 0; transform: translateY(-1.5em);animation: visual-slogan 12s ease-in-out infinite;}
@keyframes visual-slogan {
  0% { opacity: 0;transform: translateY(-105%);}
  8% { opacity: 1;transform: translateY(0);}
  25% { opacity: 1;transform: translateY(0);}
  33% { opacity: 0;transform: translateY(105%);}
}
.sub-visual-slogan li + li {position: absolute; top: 0; left: 0; width: 100%;}
.sub-visual-slogan li:nth-child(2) {animation-delay: 4s;}
.sub-visual-slogan li:nth-child(3) {animation-delay: 8s;}

/* LNB */
.lnb { position: absolute; bottom: 0; left: 0; width: 100%; animation: fadeUp 0.7s ease-in-out both; height: 70px;} 
.lnb:before { position: absolute; top: 0; left: 0; width: calc(100% - (100% - 1400px) / 2); height: 100%;background: #fff linear-gradient(to right, #eee 0%, #eee 100%) no-repeat left bottom/calc(100% - 25px) 1px; box-shadow: -12px -6px 0 #c5006e; content: ''; border-top-right-radius: 15px;}
.lnb .inner { display: flex;height: 100%;}

.lnb-home { flex-shrink: 0;width: 80px; height: 100%; border-right: 1px solid #eee; border-left: 1px solid #eee; background: url(../images/common/lnb_home.svg) no-repeat center; transition: all 0.3s;}
.lnb-home:hover {background-image: url(../images/common/lnb_home_hover.svg);}
.lnb-depth {position: relative;}
.lnb-depth.lnb1 {display: none;}
.lnb-btn { display: none; position: relative; width: 100%; height: 100%; padding: 0 25px; font-weight: 700; font-size: 17px; letter-spacing: normal; color: #222; transition: color 0.3s;} 
.lnb-btn::before { position: absolute; top: 50%; right: 25px; width: 15px; height: 15px; background-image: url(../images/common/more_ico.svg); content: ''; transform: translateY(-50%); transition: all 0.3s; } 
.lnb-depth.lnb1 .lnb-btn { border-right: 1px solid #eee;}
.lnb-btn:hover {color: #c5006e;}
.lnb-depth.on .lnb-btn {color: #c5006e;}
.lnb-depth.on .lnb-btn::before { background-image: url(../images/common/more_ico_pink.svg); transform: translateY(-50%) rotate(45deg) scale(1.2);} 
.lnb-btn span { display: block;width: 100%; text-align: left;}

.lnb-list { display: flex; width: 100%; height: 100%; margin-right: 25px;}  
.lnb-item {height: 100%;}
.lnb-item a { display: flex; align-items: center; position: relative; height: 100%; padding: 0 2.5em; font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: normal; text-align: center; white-space: nowrap; }
.lnb-item + .lnb-item a::before { position: absolute; top: 50%; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: #222;content: ''; transform: translate(-50%, -50%);}
.lnb-item.on a::before { position: absolute; top: 0; left: 0; z-index: 10; width: calc(100% + 4px); height: calc(100% - 1px); border-right: 4px solid #fff; border-left: 4px solid #fff; border-radius: 0; background-color: transparent;content: ''; transform: translateX(-2px);}
.lnb-item.on:last-child a::before {width: calc(100% + 2px);}
.lnb-item.on a::after {position: absolute; top: 0; left: 0; z-index: 15; width: 100%; height: calc(100% + 8px);  border-radius: 0 0 5px 5px; background-color: #c5006e; content: ''; animation: lnb-on-bg 0.7s cubic-bezier(0, 0, 0.2, 1) 0.5s both;} 
@keyframes lnb-on-bg {
  0% {height: 0;}
  100% {height: calc(100% + 8px);}
}
.lnb-item a span {position: relative; z-index: 20; color: #666; transition: all 0.3s;}
.lnb-item.on a span::before { position: absolute; top: -0.9em; left: calc(100% - 0.5em); width: 32px; height: 23px; background: url(../images/common/lnb_on.svg) no-repeat center/contain; content: '';}
.lnb-item a:hover span { color: #c5006e; } 
.lnb-item.on a span {color: #fff; animation: fadeIn 0.5s linear 1s both;} 

/* VISUAL-SIDE */
.visual-side { top: auto; bottom: 45px;}
.visual-sns::before {  height: 90px; margin-bottom: 30px;}

/* CONTENT */
.content-tit { position: relative;background: linear-gradient(to right, #eee 0%, #eee 100%) no-repeat left bottom/calc(100% - (100% - 1400px) / 2 - 25px) 1px; animation: fadeLeft 0.6s ease-out 1.1s both;}
.content-tit::before { position: absolute; bottom: 0; left: 50%; width: 30px; height: 30px; background: url(../images/common/heart.svg) no-repeat center/calc(100% - 2px);content: ''; transform: translate(-50%, 50%) scale(0); animation: contentTIt 1s cubic-bezier(0.03, 0.81, 0.22, 1.41) 1.3s both;}
@keyframes contentTIt {
  0% {transform: translate(-50%, 50%) scale(0);}
  100% {transform: translate(-50%, 50%) scale(1);}
}
.content-tit h3 {padding: 1.1em 0; font-weight: 800; font-size: 40px; text-align: center; color: #222;}

/* TAB */
.tab-wrap { padding: 3em 0; font-size: 18px; } 
.tab-list { display: flex; flex-wrap: wrap; justify-content: center;} 
.tab-item {margin-top: -1px;}
.tab-item + .tab-item {margin-left: -1px;}
.tab-item a { display: flex; justify-content: center; align-items: center; min-width: 11em; padding: 0em 1em; border: 1px solid #ddd; font-weight: 700; line-height: 2.8em; letter-spacing: normal; text-align: center; color: #666; white-space: nowrap;} 
.tab-item a span {display: flex; justify-content: center; align-items: center; }
.tab-item:hover,
.tab-item.on {z-index: 5;}
.tab-item:hover a,
.tab-item.on a { border-color: #c5006e; color: #c5006e;} 
.tab-item.on a span::before { width: 24px; height: 24px; margin-right: 0.8em; background: url(../images/common/marker_check.svg) no-repeat center/contain; content: '';}

/* TAB_depth4 */
.depth4-wrap { padding-top: 1em; font-weight: 500;font-size: 18px; text-align: center; color: #555; line-height: 1.2;}
.depth4-list {display: inline-flex; justify-content: center; background: linear-gradient(to top, #eee 0%, #eee 100%) no-repeat center bottom/calc(100% - 3em) 3px;}
.depth4-btn { position: relative;padding: 0 1.5em; height: 100%;}
.depth4-item + .depth4-item .depth4-btn::before {position: absolute; top: 50%; left: 0; content: ":"; transform: translate(-50%, -60%);}
.depth4-btn span {display: flex; padding: 1.35em 0; border-bottom: 3px solid transparent; transition: all 0.3s; height: 100%; align-items: center; justify-content: center;}
.depth4-btn:hover span {border-color: #c5006e;}
.on .depth4-btn span {border-color: #c5006e; color: #c5006e; text-shadow: 0.0125em 0 0 #c5006e;}
.depth4-con-item {display: none;}
.depth4-con-item.on {display: block;}

@media (max-width: 1600px) {
  .visual-side {  bottom: 106px;}
  .visual-sns::before {  height: 55px; margin-bottom: 20px;}
}
@media (max-width: 1440px) {
  .lnb:before { width: calc(100% - 20px);}
  .content-tit {  background-size: calc(100% - 45px) 1px;}
}
@media (max-width: 1280px) {
  .sub-visual { height: 410px;}
  .sub-visual-txt {transform: translate(-50%, -55%);}
  .sub-visual-tit {margin-bottom: 12px; font-size: 37px;}

  .lnb { height: 65px;} 
  .lnb:before { background-size: calc(100% - 20px) 1px; box-shadow: -11px -5px 0 #c5006e;  border-top-right-radius: 14px;}
  .lnb-home {width: 73px;}
  .lnb-item a {  padding: 0 calc(12px + 2vw); font-size: 16px; }
  .lnb-item.on a::after { height: calc(100% + 7px); border-radius: 0 0 4px 4px;} 
  .lnb-item.on a span::before { width: 29px; }

  .visual-side { bottom: 99px;}
  .visual-sns::before { height: 50px; margin-bottom: 16px;}
  .visual-sns li + li {margin-top: 9px;}

  .content-tit { background-size: calc(100% - 40px) 1px;}
  .content-tit::before { width: 28px; height: 28px; }
  .content-tit h3 { font-size: 33px; }

  .tab-wrap { font-size: 17px; } 
  .tab-item.on a span::before { width: 23px; height: 23px;}

  .depth4-wrap {font-size: 17px;}
}
@media (max-width: 1024px) {
  .lnb .inner {padding-right: 20px;}
  .lnb-depth {width: 50%;}
  .lnb-depth.lnb1 {display: block; margin-right: -1px;}
  .lnb-depth.lnb1 {width: calc(50% + 1px);}
  .lnb-btn { display: block;} 
  .lnb-list { overflow: hidden; flex-direction: column; position: absolute; top: calc(100% - 1px); left: 0; width: 100%; height: auto; max-height: 0; border-radius: 0 0 14px 14px; background-color: #fff; box-shadow: inset 0 0 0 1px #eee; transition: all 0.7s;} 

  .lnb-item + .lnb-item {border-top: 1px solid #eee;}
  .lnb-item a { padding: 1.2em 25px; font-weight: 600; font-size: 15px;}
  .lnb-item a span {color: #444;}
  .lnb-item.on a::before { display: none;}
  .lnb-item + .lnb-item a::before { display: none;}
  .lnb-item.on a::after {height: 100%; border-radius: 0; animation: none;} 
  .lnb-item.on a span::before { top: -0.8em; left: calc(100% - 0.2em); width: 23px; transform: rotate(25deg);}
  
  .depth4-wrap {font-size: 16px;}
  .depth4-list {background-size: calc(100% - 2.4em) 2px;}
  .depth4-btn {padding: 0 1.2em;}
  .depth4-btn span {padding: 1.25em 0; border-width: 2px;}
}
@media (max-width: 768px) {
  .sub-visual { height: 370px;}
  .sub-visual-txt {transform: translate(-50%, -60%);}
  .sub-visual-tit {margin-bottom: 11px; font-size: 29px;}
  .sub-visual-slogan {font-weight: 400; font-size: 14px;}

  .lnb { height: 60px;} 
  .lnb:before { border-top-right-radius: 13px;}
  .lnb-home {width: 66px;}
  .lnb-btn { padding: 0 21px;font-size: 16px;}
  .lnb-btn::before {right: 21px;}
  .lnb-list { border-radius: 0 0 13px 13px;} 
  .lnb-item a {padding: 1.2em 21px;} 
  
  .visual-side { bottom: 110px;}
  .visual-sns::before { display: none;}
  
  .content-tit::before { width: 26px; height: 26px; }
  .content-tit h3 { font-size: 26px; }

  .tab-wrap { font-size: 16px; } 
  .tab-item.on a span::before { width: 22px; height: 22px;}

  .depth4-list {background-size: calc(100% - 1.6em) 2px;}
  .depth4-btn {padding: 0 0.8em;}
}
@media (max-width: 640px) {
  .visual-side {display: none;}

  .depth4-wrap {font-size: 15px;}
  .depth4-list {white-space: nowrap;}
  .depth4-list {background: none; flex-wrap: wrap;}
  .depth4-btn { padding: 0 0.5em; width: 100%;}
  .depth4-item {width: 32%;}
  .depth4-item + .depth4-item .depth4-btn::before {display: none;}
  .depth4-item:nth-child(3) ~ .depth4-item {margin-top: 0.8em;}
  .depth4-btn span { border-bottom: 2px solid #eee; padding: 0.5em 0;}
}
@media (max-width: 576px) {
  .sub-visual { height: 330px;}
  .sub-visual-txt {transform: translate(-50%, -62%);}
  .sub-visual-tit {font-size: 26px;}
  .lnb {height: 55px;}
  .lnb .inner {padding-right: 0;}
  .lnb:before { width: 100%; background-size: 100% 1px;  box-shadow: 0 -5px 0 #c5006e; border-top-right-radius: 0;}
  .lnb-home {width: 59px;}
  .lnb-btn { padding: 0 17px; font-weight: 600;font-size: 15px;}
  .lnb-depth.lnb2 .lnb-btn { border-right: 1px solid #eee;}
  .lnb-btn::before {right: 17px;}
  .lnb-item a {padding: 1.1em 17px; font-weight: 500; font-size: 14px;} 
  .lnb-item.on a span::before { width: 21px;}
  .content-tit { background-size: 100% 1px;}
  .content-tit::before { width: 24px; height: 24px; }
  .content-tit h3 { font-size: 24px; }
}
@media (max-width: 480px) {
  .lnb-home {display: none;}
  .lnb-depth.lnb1 .lnb-btn { border-left: 1px solid #eee;}
  .lnb-list { border-radius: 0 0 10px 10px;} 

  .tab-wrap { font-size: 15px; } 
  .tab-item + .tab-item {margin-left: 0;}
  .tab-item {width: 100%;}
  .tab-item.on a span { display: inline-block;position: relative;}
  .tab-item.on a span::before { position: absolute; top: 50%; right: calc(100% + 12px); width: 21px; height: 21px; margin-right: 0; transform: translateY(-50%);}

  .depth4-list {justify-content: space-around;}
  .depth4-item {width: 48%;}
  .depth4-item:nth-child(2) ~ .depth4-item {margin-top: 0.8em;}
}
@media (max-width: 412px) {
  .sub-visual { height: 320px;}
  .lnb {height: 50px;}
  .lnb-btn { padding: 0 15px;font-size: 14px;}
  .lnb-btn::before {right: 15px;}
  .lnb-item a {padding: 1em 15px;} 
}
@media (max-width: 360px) {
  .lnb .inner {margin: 0;}
  .lnb-depth.lnb2 .lnb-btn { border-right: hidden;}

  .depth4-item {width: 100%;}
  .depth4-btn {padding: 0;}
  .depth4-item:nth-child(1) ~ .depth4-item {margin-top: 0;}
}

/* SUB-COMMON : E */
/* ===================================================== */