@charset "utf-8";
/*========================================
#top_mv
========================================*/
#top_mv { height: 95vh; max-height: 750px; min-height: 640px; padding: 140px 0 0px; margin-bottom: 80px; background: #fff; position: relative; box-shadow: 0 8px 16px rgba(0,0,0,.08);}
#top_mv .inner { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
#top_mv .inner .titleArea{ padding: 160px 0 120px; position: relative; z-index: 100;}
#top_mv .inner .titleArea h2{ color: #333; font-size: 26px; letter-spacing: 0.3em; font-weight: 600; line-height: 1.4em;}
#top_mv .inner .titleArea h2 br{ display: none;}
#top_mv .inner .titleArea p{ display: flex; justify-content: flex-start; align-items: center; padding: 10px 0;}
#top_mv .inner .titleArea p .t1{ display: block; line-height: 1em; font-size: 13px; font-weight: 500; color: #555; letter-spacing: 0; padding-right: 10px;}

#top_mv .inner .titleArea p .t2{ display: block; line-height: 1em; font-size: 10px; padding: 5px 4px; border-radius: 4px; background: var(--main-color2); color: #fff; margin-bottom: 1px;}
/**/
#top_mv .inner .p-info{ min-height: 140px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; margin-bottom: 30px; position: relative; z-index: 100;}
#top_mv .inner .p-info .itemBox { padding: 9px 15px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: relative; background: rgba(255,255,255,.8); border-radius: 0 5px 0 0;}
#top_mv .inner .p-info .itemBox .item{ display: block; margin: 2px 0; border-radius: 8px;}
#top_mv .inner .p-info .itemBox .item:nth-child(1){ padding-top: 20px;}
#top_mv .inner .p-info .itemBox .item:nth-child(1)::before{ content: "Present campaign"; color: var(--main-color1); font-size: 12px; padding-bottom: 10px; position: absolute; left: 20px; top: 10px; font-weight: bold; letter-spacing: 1px;}
/**/
#top_mv .inner .p-info .itemBox .item:nth-child(1) .line,  
#top_mv .inner .p-info .itemBox .item:nth-child(1) .line div{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;}
#top_mv .inner .p-info .itemBox .item:nth-child(1) .line::before, 
#top_mv .inner .p-info .itemBox .item:nth-child(1) .line::after, 
#top_mv .inner .p-info .itemBox .item:nth-child(1) .line div::before, 
#top_mv .inner .p-info .itemBox .item:nth-child(1) .line div::after{ content: ""; position: absolute; display: block; transition: 0.4s; background: #ccc;}
#top_mv .inner .p-info .itemBox .item:nth-child(1) .line::before{ width: 2px; height: 0; left: 0; top: 0;}
#top_mv .inner .p-info .itemBox .item:nth-child(1) .line::after{ width: 0px; height: 2px; left: 0; top: 0;}
#top_mv .inner .p-info .itemBox .item:nth-child(1) .line div::before{ width: 2px; height: 0; right: 0; bottom: 0;}
#top_mv .inner .p-info .itemBox .item:nth-child(1) .line div::after{ width: 0px; height: 2px; right: 0; bottom: 0;}
.body-delay1 #top_mv .inner .p-info .itemBox .item:nth-child(1) .line::before, 
.body-delay1 #top_mv .inner .p-info .itemBox .item:nth-child(1) .line div::before{ height: 20px;}
.body-delay1 #top_mv .inner .p-info .itemBox .item:nth-child(1) .line::after, 
.body-delay1 #top_mv .inner .p-info .itemBox .item:nth-child(1) .line div::after { width: 30px;}
/**/
#top_mv .inner .p-info .itemBox .item a{ display: block; padding: 7px 10px 7px 34px; border-radius: 2px; position: relative;}
#top_mv .inner .p-info .itemBox .item a:hover{ background: var(--main-color2);}
#top_mv .inner .p-info .itemBox .item a > div{ width: 18px; height: 18px; display: block; position: absolute; left: 6px; top: 50%; margin-top: -8px; border-radius: 100%; border: solid 6px #222; transition: 0.3s;}
#top_mv .inner .p-info .itemBox .item a:hover > div{ border: solid 6px #fff;}
#top_mv .inner .p-info .itemBox .item.cp_kaiin a > div{ border: solid 10px #222; }
#top_mv .inner .p-info .itemBox .item.cp_kaiin a:hover > div{ border: solid 10px var(--main-color2);}
#top_mv .inner .p-info .itemBox .item.cp_kaiin a > div::before{ content: ""; width: 10px; height: 10px; display: block; position: absolute; left: -5px; top: -5.5px; background: url("../img/common/lock_w.png"); background-size: cover;}
#top_mv .inner .p-info .itemBox .item a h3{ font-size: 13px; font-weight: 500; transition: 0.3s;}
#top_mv .inner .p-info .itemBox .item a p{ color: #777; font-size: 11px; transition: 0.3s; letter-spacing: 0;}
#top_mv .inner .p-info .itemBox .item a:hover h3, 
#top_mv .inner .p-info .itemBox .item a:hover p { color: #fff !important;}
@media screen and (max-width:1080px) {
#top_mv { padding: 90px 0 50px;}
#top_mv .inner { max-width: 100%;}
#top_mv .inner .titleArea{ width: 100%; padding-left: 50px; background: url("../img/top/imagebox.png") 0 0 no-repeat; background-size: 100% 100%;}
#top_mv .inner .titleArea h2 br{ display: block;}
}
@media screen and (max-width:850px) {
#top_mv { height: auto; min-height: 100vh; max-height: 200vh; margin-bottom:0px; display: flex; flex-direction: column; justify-content: flex-start;}
#top_mv .inner { height: auto; justify-content: center; align-items: center;}
#top_mv .inner .titleArea{ width: 100%; height: 40vh; min-height: 250px; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; padding: 0; z-index: 100; padding-top: 10vh; background: #fff;}
#top_mv .inner .titleArea h2{ font-size: 5.0vw;}
#top_mv .inner .p-info{ width: 100%; margin: 80vh 0 0;}

#top_mv .inner .p-info .itemBox { width: 90%; margin: 0 5%; background: rgba(255,255,255,.95);}

}
@media screen and (max-width:600px) {
#top_mv .inner .titleArea h2{ font-size: 6.4vw;}
#top_mv .inner .titleArea p{ font-size: 4.8vw;}
#top_mv .inner .titleArea p span{ font-size: 3.8vw;}
#top_mv .inner .titleArea p { flex-direction: column; align-items: flex-start;}
#top_mv .inner .titleArea p .t1{ font-size: 3.8vw; margin-top: 10px;}
#top_mv .inner .titleArea p .t2{ font-size: 2.8vw; margin-top: 15px;}

}

/*--------
#top_mv ギャラリー #mv-gallery
----------*/
#top_mv #mv-gallery { position: absolute; right: 0; top: 0; z-index: 1; padding-bottom: 20px;}
#top_mv #mv-gallery .gradation{ max-width: 900px; display: block; position: relative; z-index: 99; pointer-events: none;}
#top_mv #mv-gallery .imageList{ width: 100%; height: 100%; position: absolute; right: 0; top: 0; z-index: 10;}
#top_mv #mv-gallery .imageList .imgBox{ position: absolute; top: 0; opacity: 0;}
#top_mv #mv-gallery .imageList .imgBox p{}
#top_mv #mv-gallery .imageList .imgBox p img{ width: 100%; height: auto;}
#top_mv #mv-gallery .imageList .imgBox p .i{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 50; background: #000;}
#top_mv #mv-gallery .imageList .imgBox p .i.topmv1{ background: url("../img/top/mv1.jpg") 0 70% no-repeat; background-size: cover;}
#top_mv #mv-gallery .imageList .imgBox p .i.topmv2{ background: url("../img/top/mv2.jpg") 0 50% no-repeat; background-size: cover;}
#top_mv #mv-gallery .imageList .imgBox p .i.topmv3{ background: url("../img/top/mv3.jpg") 0 50% no-repeat; background-size: cover;}
#top_mv #mv-gallery .imageList .imgBox p .i.topmv4{ background: url("../img/top/mv4.jpg") 0 50% no-repeat; background-size: cover;}
#top_mv #mv-gallery .imageList .imgBox p .i.topmv5{ background: url("../img/top/mv5.jpg") 0 50% no-repeat; background-size: cover;}
#top_mv #mv-gallery .imageList .imgBox p .i.topmv6{ background: url("../img/top/mv6.jpg") 0 50% no-repeat; background-size: cover;}
#top_mv #mv-gallery .imageList .imgBox p .i.topmv7{ background: url("../img/top/mv7.jpg") 0 100% no-repeat; background-size: cover;}
#top_mv #mv-gallery .imageList .imgBox p .txt{ position: absolute; right: 5px; bottom: 5px; z-index: 100; font-size: 9px; letter-spac3ng: 0px; clip-path: #888;}
/*slick-theme.cssリセット*/
#top_mv #mv-gallery .slick-dots { bottom: 6px !important; }
#top_mv #mv-gallery .slick-dots { display: flex !important; justify-content: flex-end;}
#top_mv #mv-gallery .slick-dots li, 
#top_mv #mv-gallery .slick-dots li button { height: 5px !important; width: 16px !important;}
#top_mv #mv-gallery .slick-dots li { margin: 0 3px !important; background: var(--main-color1) !important; opacity: 0.2 !important;}
#top_mv #mv-gallery .slick-dots li:hover{ opacity: 0.5 !important;}
#top_mv #mv-gallery .slick-dots li.slick-active{ opacity: 1 !important;}
#top_mv #mv-gallery .slick-dots li button {padding: 0 !important;}
#top_mv #mv-gallery .slick-dots li button:before { display: none !important;}
@media screen and (max-width:850px) {
#top_mv { padding: 0 ;}
#top_mv #mv-gallery .slick-dots{ display: flex; justify-content: center; z-index: 1000;}
#top_mv #mv-gallery{ width: 100%; height:55vh; top: 45vh; padding-bottom: 0; background: #ccc;}
#top_mv #mv-gallery .imageList .imgBox{ height: 100%;}
.slick-slider .slick-track,
.slick-slider .slick-list, 
#top_mv #mv-gallery .imageList .imgBox p img{ height: 100%;}
#top_mv #mv-gallery > .gradation{ display: none;}
#top_mv #mv-gallery .imageList .imgBox p .txt{ position: absolute; right:auto; left: 2%; bottom: 15px; font-size: 8px; letter-spacing: 0; width: 96%; line-height: 1.2em;}
}


/*========================================
#info1
========================================*/
#info1 { padding: 0 3%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#info1 .inner{ display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;}
#info1 .left{ flex: 1; width: 100%; display: flex; flex-direction: row; margin-right: 20px;}
#info1 .left h2{ display: flex; flex-direction: column; margin-right: 20px;}
#info1 .left h2 b{ font-size: 22px; letter-spacing: 0;}
#info1 .left h2 span{ font-size: 8px; white-space: nowrap; letter-spacing: 0; margin-top: 10px;}
#info1 .left .txt{ display: flex; flex-direction: column; position: relative;}
#info1 .left .txt p.t{ display: flex; flex-direction: column;}
#info1 .left .txt p.t span{ display: block; line-height: 1.8em;}
/**/
#info1 .left .txt .group-list { display: flex; justify-content: flex-start;}
#info1 .left .txt .group-list .g-l-box{ width: auto; display: block; margin-bottom: 5px;}
#info1 .left .txt .group-list .g-l-box p.group-btn{ padding:6px 10px; border-radius: 2px; background:var(--main-color1); color: #fff; font-weight: bold; font-size: 12px; letter-spacing:0px; margin-top: 10px;}
/**/
#info1 .left .txt .group-list .g-l-box ul{ width: 100%; padding:10px; background: #fff; border: solid 2px #F0D591; box-shadow: 0 -8px 14px rgba(0,0,0,.1); position: absolute; left:0%; z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: 0.2s; opacity: 0; pointer-events: none; bottom: -5%;}
#info1 .left .txt .group-list .g-l-box ul li{ display: block; width: 100%; margin: 2px 0;}
#info1 .left .txt .group-list .g-l-box ul li a{ width: 100%; height: 32px; padding: 0 10px; display: flex; justify-content: space-between; align-items: center;  background: #0E7721; border: none; border-bottom: solid 2px #0A3D19; transition: 0.1s; border-radius:3px; }
#info1 .left .txt .group-list .g-l-box ul li a h3{ width: 60%; font-weight: bold; font-size: 10px; color: #fff;}
#info1 .left .txt .group-list .g-l-box ul li a p{ width: 40%; font-size: 9px; line-height: 1.2em; color: #fff;}
#info1 .left .txt .group-list .g-l-box ul li a p span{ display: none;}
@media screen and (min-width:850px) {
#info1 .left .txt .group-list .g-l-box ul{ max-width: 350px;}
#info1 .left .txt .group-list .g-l-box:hover ul{ opacity: 1; pointer-events: all; bottom: 0%;}
#info1 .left .txt .group-list .g-l-box ul li a:hover{ border-bottom: 0; border-top: solid 2px #fff; background: #C0393C;}

}

/**/
#info1 .left .txt .obi{ width: 98%; height: 60px; display: block; margin:0 1%; overflow: hidden; animation: obi-logo 2200.0s infinite forwards; background-image: url("../img/common/logo.jpg"); background-size: auto 60px; background-position: 0 0%; background-repeat: repeat-x; position: relative; z-index: 1;}
@keyframes obi-logo{
0% { background-position: 0 0%;}
100% { background-position: -60000px 0%;}
}
/**/
#info1 .right{ display: flex; align-items:stretch;}
#info1 .right .box{ width: 260px; margin-left: 30px; display: flex; flex-direction: column; justify-content:flex-start; align-items: center;}
#info1 .right .box.cp_kaiin{}
#info1 .right .box.cp_sns{ }
#info1 .right .box.on{ display: flex;}
#info1 .right .box.off{ display: none;}
#info1 .right .box .ttl{ font-size: 14px; font-weight: bold; letter-spacing: 0;}
#info1 .right .box.cp_kaiin .ttl::after{ font-size: 14px; content: "FUKUYA Customer club"; color:var(--main-color2);}
#info1 .right .box.cp_sns .ttl::after{ font-size: 14px; content: "FUKUYA Official SNS"; color:var(--main-color1);}
#info1 .right .box .item{ width: 100%; height: 100%; display: flex; flex-direction: column;}
#info1 .right .box .item a{ width: 100%; height: 100%; display: block; padding-bottom: 20px; background: #fefff9;}
#info1 .right .box.cp_kaiin .item a{ border: solid 1px var(--main-color2);}
#info1 .right .box.cp_sns .item a{ border: solid 1px var(--main-color1);}
#info1 .right .box .item .name_ttl{ display: flex; justify-content: center;}
#info1 .right .box .item .name_ttl span{ font-size: 12px; border-radius: 0 0 20px 20px; color: #fff; padding: 2px 20px 4px;}
#info1 .right .box.cp_kaiin .item .name_ttl span{ background: var(--main-color2);}
#info1 .right .box.cp_sns .item .name_ttl span{ background: var(--main-color1);}
#info1 .right .box.cp_kaiin .item .name_ttl span::before{ content: "ご成約者さま限定"; font-weight: bold; font-size: 12px; color: #fff;}
#info1 .right .box.cp_sns .item .name_ttl span::before{ content: "SNSキャンペーン"; font-weight: bold; font-size: 12px; color: #fff;}

#info1 .right .box .item h3{ width: 100%; height: 100px; padding:0 10px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#info1 .right .box .item h3 span.txt1{ font-size: 12px; letter-spacing: 0;}
#info1 .right .box .item h3 span.txt2{ font-size: 16px; letter-spacing: 1px;}
#info1 .right .box .item .date{ font-size: 11px; padding: 5px 10px 10px; letter-spacing: 0;}
#info1 .right .box .item .txt{ font-size: 12px; padding: 5px 10px;}
/**/
#info1 .right .box .item .lock{ display: flex; justify-content: center; margin-top: 5px;}
#info1 .right .box.cp_sns .item .lock{ display: none !important;}
#info1 .right .box .item .lock span{display: flex; justify-content: center; padding: 4px 15px; border-radius: 20px; border: solid 1px var(--main-color1); font-size: 11px; letter-spacing: 0; color: var(--font-color1); font-weight: bold;}
#info1 .right .box .item .lock span img{ width: 12px; height: auto; margin-right: 10px;}
/**/
@media screen and (min-width:850px) {
#info1 .right .box .item a:hover{ background: #fff;}
#info1 .right .box.cp_kaiin .item a:hover{ box-shadow: 0 0 0 3px var(--main-color2) inset !important;}
#info1 .right .box.cp_sns .item a:hover{ box-shadow: 0 0 0 3px var(--main-color1) inset !important;}
#info1 .right .box.cp_kaiin .item a:hover h5 *,
#info1 .right .box.cp_kaiin .item a:hover > p { color: var(--font-color2) !important;}
#info1 .right .box.cp_sns .item a:hover h5 *,
#info1 .right .box.cp_sns .item a:hover > p { color: var(--font-color1) !important;}
}
/**/
#info1 .right .box .item .icon{}
#info1 .right .box .item .icon span{}
#info1 .right .box .item .icon.x span.icon_x{}
#info1 .right .box .item .icon.line span.icon_line{}
#info1 .right .box .item .icon.insta span.icon_insta{}
#info1 .right .box .item .icon.youtube span.icon_youtube{}
@media screen and (max-width:1050px) {
#info1 .right .box{ width: 48%; margin-left: 2%; }
#info1 .right{ max-width: 50%;}
}
@media screen and (max-width:850px) {
#info1 { padding: 40px 5%;}
#info1 .inner{ flex-direction: column;}
#info1 .right{ width: 100%; max-width: 100%; margin-top: 60px; justify-content: space-between;}
#info1 .right .box{ width: 48%; margin-left: 0; }
/**/
#info1 .left .txt .group-list .g-l-box{ width: 100%;}
#info1 .left .txt .group-list .g-l-box p.group-btn{ display: none;}
/**/
#info1 .left .txt .group-list .g-l-box ul, 
#info1 .left .txt .group-list .g-l-box:hover ul{ position: relative; left:auto; opacity: 1; pointer-events: all; bottom:auto; box-shadow: none; border: none; padding:20px  0;}
#info1 .left .txt .group-list .g-l-box ul{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
#info1 .left .txt .group-list .g-l-box ul li{ width: 48%; margin: 5px 0;}
	
#info1 .left .txt .group-list .g-l-box ul li a,
#info1 .left .txt .group-list .g-l-box ul li a:hover{ padding: 0 5px; background: none; border-bottom: solid 1px #0E7721; color: #0E7721; border: solid 1px #0E7721;  }
#info1 .left .txt .group-list .g-l-box ul li a h3{ width: 60%; font-weight: bold; font-size: 10px; color: #0E7721;}
#info1 .left .txt .group-list .g-l-box ul li a p{ width: 40%; font-size: 9px; line-height: 1.2em; color: #0E7721;}
}
@media screen and (max-width:750px) {
#info1 .left { flex-direction: column; align-items: center; margin: 0;}
#info1 .left h2{ margin:40px 0 70px;}
#info1 .left h2 b{ font-size: 32px; text-align: center;}
#info1 .left h2 span{ font-size: 11px;}
#info1 .left .txt p.t span{ line-height: 1.6em;}
#info1 .left .txt .txt2{ width: 100%; display: flex; flex-direction: column-reverse; margin: 10px 0 0;}
#info1 .left .txt .group-list .g-l-box ul li a h3{ letter-spacing: 0;}
#info1 .left .txt .group-list .g-l-box ul li a p{ font-size: 8px; letter-spacing: 0;}
}
@media screen and (max-width:500px) {
#info1 .right{ flex-direction: column; margin-top: 0;}
#info1 .right .box{ width: 100%; margin:0 0 40px; }
#info1 .right .box .item h3{ height: auto; padding:15px 10px;}
#info1 .right .box .item .date{ padding: 5px 10px; font-size: 3.4vw;}
#info1 .right .box .item .txt{ padding: 0 10px 15px;}
#info1 .right .box .item h3 span.txt2{ font-size: 22px;}
#info1 .left .txt .group-list .g-l-box ul li a, 
#info1 .left .txt .group-list .g-l-box ul li a:hover{ flex-direction: column; padding: 0 8px; height:50px; justify-content: center;}
#info1 .left .txt .group-list .g-l-box ul li a h3{ width: 100%; font-size: 12px;}
#info1 .left .txt .group-list .g-l-box ul li a p{ width: 100%; color: #555;}
#info1 .left .txt .group-list .g-l-box ul li a p br{ display: none;}
#info1 .left .txt .group-list .g-l-box ul li a p span{ display: inline; line-height: 1.1em;}
#info1 .left .txt .group-list .g-l-box ul li a p span::after{ content: " / "; font-size: 8px;}
}
/*========================================
#info2
========================================*/
#info2 { padding: 60px 0; margin: 80px 0; background: #f3f2ed;}
#info2 .titleArea{ display: flex; justify-content: center; align-items: center; padding: 0 5%;}
#info2 .titleArea h2{ display: flex; flex-direction: column; padding:0 20px 0 34px; position: relative;}
#info2 .titleArea h2 .jp{ font-size: 22px; display: block; color: var(--main-color1);}
#info2 .titleArea h2 .jp img{ width: 26px; height: auto; position: absolute; left: 0; top: 50%; margin-top: -13px;}
#info2 .titleArea h2 .en{ font-size: 10px; display: block; color: var(--main-color1); letter-spacing: 0;}
#info2 .titleArea p {}
#info2 .linkArea { margin: 40px 0; display: flex; justify-content: center;}
#info2 .linkArea a { width: 90%; max-width: 500px; height: 50px; border: solid 2px var(--main-color1); display: flex; align-items: center; justify-content: center; background: #fff;}
#info2 .linkArea a .txt1{ font-size: 18px; font-weight: 500;}
#info2 .linkArea a .txt1 img{ width: 20px; height: auto; margin: 0 10px 3px; position: relative; mix-blend-mode:multiply;}
#info2 .linkArea a .txt2{ font-size: 12px; padding-left: 10px;}
#info2 .linkArea a *{ letter-spacing: 0; color: var(--main-color1);}
#info2 .linkArea a:hover{ background: var(--main-color1);}
#info2 .linkArea a:hover *{ color: #fff;}
#info2 .p-contents{ width: 100%; max-width: 100vw; overflow: hidden; display: flex; justify-content: center;}
#info2 .p-contents .partnerList .box{ padding: 10px;}
#info2 .p-contents .partnerList .box a{ width: 180px; height: 180px; position: relative; box-shadow: 0 0 0 1px #ccc; display: flex; justify-content: center; align-items: center;}
#info2 .p-contents .partnerList .box a:hover{ box-shadow: 0 0 0 6px var(--main-color2); background:#000;}
#info2 .p-contents .partnerList .box a img{ position: relative; z-index: 1;}
#info2 .p-contents .partnerList .box a:hover img{ opacity: 0.8;}
#info2 .p-contents .partnerList .box a .t{ position: absolute; width: 90%; height:40px; display: flex; justify-content: center;align-items: center; opacity: 0; left: 5%; bottom: -5px; transition: 0.4s; z-index: 10;}
#info2 .p-contents .partnerList .box a .t span{ display: block; padding: 4px 10px; height: auto; background: rgba(255,255,255,.9); font-size: 10px; color: #111; border-radius: 30px;}
#info2 .p-contents .partnerList .box a:hover .t{ opacity: 1; bottom: 5px;}
@media screen and (min-width:850px) {
#info2 .p-contents{ width: 100%; max-width: 100vw; overflow: hidden;}
#info2 .p-contents .partnerList{ max-width: 1300px;}
}
@media screen and (max-width:850px) {
#info2 { margin: 0 ;}
#info2 .p-contents .partnerList{ width: 100%;}

}
@media screen and (max-width:750px) {
#info2 .titleArea{ flex-direction: column;}
#info2 .titleArea h2{ margin-bottom: 15px;}
}
@media screen and (max-width:700px) {
#info2 { padding: 50px 0;}
#info2 .titleArea p br{ display: none;}
#info2 .linkArea a { flex-direction: column; justify-content: center;}
#info2 .linkArea a .txt1{ font-size: 16px;}
#info2 .linkArea a .txt1 img{ width: 16px;}
#info2 .linkArea a .txt2{padding-left: 0;}
#info2 .p-contents{ overflow: hidden;}
#info2 .p-contents .partnerList .box{ width: auto !important;}
}

/*========================================
#news
========================================*/
#news { padding: 40px 3% 100px;}
#news .inner{ display: flex; flex-direction: row; justify-content: space-between;}
#news .inner .newsArea{ width: 65%; display: block;}
#news .inner .newsArea h2{ width: 95%; margin-right: 5%; display:flex; flex-direction: row; align-items: center; justify-content: space-between; padding-bottom: 10px;}
#news .inner .newsArea h2 b{ display: block; font-size: 14px;}
#news .inner .newsArea h2 a{ width: auto; display: block; padding: 2px 8px; border: solid 1px #999; color: #999; font-weight: 400; font-size: 11px;}
#news .inner .newsArea h2 a:hover{ border: solid 1px var(--main-color2); color: var(--main-color2);}

#news .inner .newsArea ul{ width: 95%; height: 300px; display: flex; flex-direction: column; margin:0px 5% 20px 0; padding: 5px; overflow-y:auto; overflow-x: hidden; border-bottom: solid 1px #ccc; border-top: solid 1px #ccc;}
#news .inner .newsArea ul li{ width: 100%; display: flex;}
#news .inner .newsArea ul li a{ padding: 15px 8px; border-bottom: dashed 1px #ddd;}
#news .inner .newsArea ul li a, 
#news .inner .newsArea ul li a .txt{ width: 100%; display: flex; align-items: flex-start;}
#news .inner .newsArea ul li a .txt .date{ display: flex; align-items: center; padding-top: 4px;}
#news .inner .newsArea ul li a .txt .date .ymd{ font-size: 12px; letter-spacing: 0; margin-right: 10px; color: #555;}
#news .inner .newsArea ul li a .txt .date .cate{ font-size: 11px; letter-spacing: 0; padding: 3px 6px; border: solid 1px #999; border-radius: 3px; color: #555;}
#news .inner .newsArea ul li a .txt .i{ flex: 1; display: block; padding-left: 25px; line-height: 1.8em; font-size: 13px;}
#news .inner .newsArea ul li a:hover{ box-shadow: 0 4px 12px rgba(0,0,0,.2); border-radius: 4px; border-bottom: dashed 0px #ddd;}
/**/
#news .inner .snsArea { width: 30%; display: flex; flex-direction: column; padding: 15px; border: solid 1px #ccc; border-radius: 3px;}
#news .inner .snsArea h3 { display: block;font-size:16px; }
#news .inner .snsArea p { display: block; font-size: 12px; font-weight: 300; margin-bottom: 10px;}
#news .inner .snsArea ul { width: 100%; display: flex; flex-direction: column;}
#news .inner .snsArea ul li{ display: block; margin: 4px 0;}
#news .inner .snsArea ul li a{ display: flex; align-items: center; justify-content: flex-start; border-radius: 4px; background: #444; position: relative; overflow: hidden;}
#news .inner .snsArea ul li a .txt{ width: 64px; text-align: center; font-size: 9px; padding: 6px 0; margin: 3px; color: #fff; border-radius: 2px; letter-spacing: 0; margin-right: 8px; position: relative; z-index: 10;}
#news .inner .snsArea ul li a::before{ width: 64px; height: calc(100% - 6px); position: absolute; left: 3px; top: 3px; content: ""; background: rgba(0,0,255,0.5); border-radius: 2px; transition: 0.4s; z-index: 1;}
#news .inner .snsArea ul li a:hover::before{ width: 100%; height: 100%; left: 0; top: 0; border-radius: 4px;}
#news .inner .snsArea ul li a .name{ color: #fff; font-size: 12px; letter-spacing: 0; position: relative; z-index: 3;}
#news .inner .snsArea ul li a.sns-x::before{ background: #000000;}
#news .inner .snsArea ul li a.sns-i::before{ background: linear-gradient(to right, rgba(255,214,0,1) 0%,rgba(255,122,0,1) 25%,rgba(255,0,105,1) 50%,rgba(211,0,197,1) 75%,rgba(118,56,250,1) 100%);}
#news .inner .snsArea ul li a.sns-l::before{ background: #00B900;}
#news .inner .snsArea ul li a.sns-f::before{ background: #1877f2;}


@media screen and (max-width:1200px) {
#news .inner .newsArea{ width: 60%;}
#news .inner .snsArea { width: 35%;}
}

@media screen and (max-width:950px) {
	#news{ padding-bottom: 40px;}
#news .inner .newsArea ul li a .txt .date{ flex-direction: column; justify-content: flex-start; align-items: flex-start;}
#news .inner .newsArea ul li a .txt .date .cate{ font-size: 9px; width: 90%; margin-top: 5px; text-align: center;}
#news .inner .newsArea ul li a .txt .i{ line-height: 1.4em;}
#news .inner .snsArea ul li a .name{ letter-spacing: 0; font-size: 10.5px;}
}
@media screen and (max-width:850px) {
#news .inner{ flex-direction: column;}
#news .inner .newsArea, 
#news .inner .snsArea { width: 100%; margin: 0 0 25px;}
#news .inner .newsArea ul{ width: 100%; margin:0px;}
	#news .inner .newsArea, #news .inner .snsArea{border: none;}
}