@charset "utf-8";
.hd_logo{ margin:5px 15px;}
.scroll .hd_logo{ margin: 0px;}
.mvfinDiv{ width: 100%; height: 1px; display: block;}
.ofset200 h1.hd_logo a {filter: invert(100%) !important;}
.ofset200 #menuBtn .menuBtn-line::before{ color: #fff;}
.ofset200 #menuBtn .menuBtn-line span.l1::before,
.ofset200 #menuBtn .menuBtn-line span.l1::after,
.ofset200 #menuBtn .menuBtn-line span.l2::before,
.ofset200 #menuBtn .menuBtn-line span.l2::after{ background: #fff;}
/*================================
mv
===================================*/
#newMv{ width: 100vw; height: 100vh; display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; background: #fff;}
#newMv_galleryFin #newMv{transform: scale(1, 1) !important; border-radius: 0px !important; transition: 0s !important;}
.mvfin #newMv{ position: absolute; display: none;}
/**/
#newMv #newMv_gallery {width: 100%; height: 100%; display: block; position: fixed; left: 0; top: 0; overflow: hidden; transition: 0.01s;}
#newMv #newMv_gallery::before{ width: 100%; height: 100%; content: ""; position: fixed; left: 0; top: 0; z-index: 100; background: url("../img/index/mv_dot.png") repeat; transition: 2.0s;}
/**/
#newMv #newMv_gallery .new_mvItem{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; overflow: hidden; display: flex; justify-content: center;}
#newMv #newMv_gallery .new_mvItem.play { z-index: 20;}
#newMv #newMv_gallery .new_mvItem.play-after { z-index: 15;}
#newMv #newMv_gallery .new_mvItem::before{ width: 100%; height: 100%; content: ""; position: absolute; left: 0; bottom: 0; z-index: -1; background: #000; opacity: 0; pointer-events: none;}
#newMv #newMv_gallery .new_mvItem.play::before{ animation: animate-mv-bk 0.4s ease-out 1 both; opacity: 1;}
@-webkit-keyframes animate-mv-bk {
  0% { opacity: 1;}
  100% { opacity: 0;}
}
/**/
#newMv #newMv_gallery .new_mvItem .mvArea{ mask-image:none; min-width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: center; object-fit: cover; position: relative; z-index: 100;}
#newMv #newMv_gallery #newMV0.new_mvItem.play .mvArea, 
#newMv #newMv_gallery #newMV1.new_mvItem.play .mvArea, 
#newMv #newMv_gallery #newMV2.new_mvItem.play .mvArea, 
#newMv #newMv_gallery #newMV3.new_mvItem.play .mvArea, 
#newMv #newMv_gallery #newMV4.new_mvItem.play .mvArea { mask-repeat: no-repeat; mask-position: 0% 0; mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: 3% 0; -webkit-mask-size: cover;}
/**/
#newMv #newMv_gallery .new_mvItem .mvArea video{ min-width: 100%; min-height: 120%; object-fit: cover; display: block; position: relative; z-index: 10;}
#newMv #newMv_gallery .new_mvItem .mvArea img{ min-width: 100%; min-height: 120%; object-fit: cover; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);}
@media screen and (max-width: 600px) {
#newMv #newMv_gallery .new_mvItem .mvArea video, 
#newMv #newMv_gallery .new_mvItem .mvArea img{ height: 100vh; width: auto;}
}

/*========================
mvTitle
==========================*/
#mv_ttl{ width: 100%; height: 1000px; position: relative; display: flex; align-items: flex-start; justify-content: center; overflow: hidden;}
@media screen and (min-width: 800px) {
#mv_ttl::before{ width: 1px; height: 90vh; content: ""; background: #fff; position: fixed; right: 74px; top: 5vh; opacity: 0.2; pointer-events: none; transition: 0.6s;}
.scroll #mv_ttl::before{ height: 0; top: 50vh;}
}

#mv_ttl .tline{ display: block; position: absolute; transition: 1.4s 1.4s; overflow: hidden; z-index: 10; pointer-events: none;}
#mv_ttl .tline::after{ width: 180%; height: 180%; position: absolute; left: -40%; top: -40%; content: ""; background: rgba(255,255,255,0.2);backdrop-filter: blur(19px) brightness(1.80) contrast(200%) hue-rotate(19deg) saturate(300%);
}
#mv_ttl .tline.ttl_1{ width: 10px; height: 100%; left: 0; top: 0; margin-left: -40px;}
#mv_ttl .tline.ttl_2{ width: 10px; height: 100%; right: 0; top: 0; margin-right: -40px;}
#mv_ttl .tline.ttl_3{ width: 100%; height: 10px; left: 0; top: 0; margin-top: -40px;}
#mv_ttl .tline.ttl_4{ width: 100%; height: 10px; left: 0; bottom: 0; margin-bottom: -40px;}
.opBody1 #mv_ttl .tline.ttl_1{ margin-left: 0px;}
.opBody1 #mv_ttl .tline.ttl_2{ margin-right: 0px;}
.opBody1 #mv_ttl .tline.ttl_3{ margin-top: 0px;}
.opBody1 #mv_ttl .tline.ttl_4{ margin-right: 0px;}
.opBody1.scroll #mv_ttl .tline.ttl_1{ margin-left:-40px; transition: 1.4s 0;}
.opBody1.scroll #mv_ttl .tline.ttl_2{ margin-right:-40px; transition: 1.4s 0;}
.opBody1.scroll #mv_ttl .tline.ttl_3{ margin-top:-40px; transition: 1.4s 0;}
.opBody1.scroll #mv_ttl .tline.ttl_4{ margin-bottom:-40px; transition: 1.4s 0;}
/**/
#mv_ttl .scTop{ width: 60px; height: 80px; position: absolute; left: 50%; top: 100vh; margin: -100px 0 0 -30px; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; pointer-events: none; transition: 0.4s;}
.scroll #mv_ttl .scTop{ opacity: 0; top: 90vh;}
#mv_ttl .scTop::before, 
#mv_ttl .scTop::after{ width: 3px; position: absolute; left: calc(50% - 1.5px); top: 25px; background: #fff; content: ""; border-radius:40px;}
#mv_ttl .scTop::before{ height: 15px; z-index: 10; opacity: 0.8; animation: topSC 5.0s infinite;}
#mv_ttl .scTop::after{ height: 55px; z-index: 1; opacity: 0.2;}

@-webkit-keyframes topSC {
0% { margin-top: 0; height: 15px;}
60% { margin-top: 150px; height: 15px;}
61% { margin-top: 150px; height: 0px;}
62% { margin-top: 0px; height: 0px;}
80% { margin-top: 0px; height: 0px;}
90% { margin-top: 0px; height: 15px;}
100% { margin-top: 0px; height: 15px;}
}

#mv_ttl .scTop span{ width: 100%; text-align: center; display: flex; justify-content: center;}
#mv_ttl .scTop span::before{ content: "scroll"; color: #fff; font-size: 10px; font-weight: 200;}


/**/
#mv_ttl .ttiArea{ width: 100vh; height: 100vh; min-height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#mv_ttl .ttiArea .textBox{ display: block; margin-bottom: 5vh;}
#mv_ttl .ttiArea .textBox h1, 
#mv_ttl .ttiArea .textBox p { display: flex; justify-content: center;}
#mv_ttl .ttiArea .textBox h1 *{ font-weight: 900; font-size: 40px; color: #fff;}
#mv_ttl .ttiArea .textBox p .e { margin: 0 6px;}
#mv_ttl .ttiArea .textBox p *{ font-weight: 200; font-size: 32px; color: #fff;}
@media screen and (max-width: 800px) {
#mv_ttl .scTop{ top: 90vh;}

#mv_ttl .ttiArea .textBox { padding-right: 4vw;} 
#mv_ttl .ttiArea .textBox h1 , 
#mv_ttl .ttiArea .textBox p { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#mv_ttl .ttiArea .textBox h1 .setTit:nth-child(1){ margin-left: 0.8em;} 
}
@media screen and (max-width: 600px) {
#mv_ttl .ttiArea .textBox h1 *{ font-size: 8.8vw;}
#mv_ttl .ttiArea .textBox p *{ font-size: 7.0vw;}
}


/*========================
aboutUmber
==========================*/
#aboutUmber{ padding:160px 4% 120px; position: relative; background: linear-gradient(hsla(0, 0%, 100%, .65) 50%, #fff); backdrop-filter: blur(20px);}
#aboutUmber::after { width: 100%; height: 80%; position: absolute; left: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%); z-index: -1;}
#aboutUmber h2{ width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-bottom: 30px;}
#aboutUmber h2 .eng2 { display: flex; margin-bottom: 80px !important; opacity: 0.9;}
#aboutUmber h2 .eng2 *{ font-size: 56px; font-weight: 300; letter-spacing: 2px;}
#aboutUmber h2 .jp *{ font-size: 24px; font-weight: 500; letter-spacing: 0.2em; line-height: 1.2em; margin-bottom: 5px;}
#aboutUmber h2 .setTit{ margin: 6px 0;}
#aboutUmber p { display: flex; flex-direction: column;}
#aboutUmber p span{ display: block; line-height: 1.8em; font-weight: 400; padding: 10px 0;}
@media screen and (max-width: 700px) {
#aboutUmber h2 .eng2 *{ font-size: 15.0vw; letter-spacing: 0.01em;}
#aboutUmber h2 .jp *{ font-size: 4.2vw; letter-spacing: 0.1em; font-weight: bold;}
}

/*========================
service
==========================*/
#service{ min-height: 100vh; align-items: center; justify-content: center; background: #fff; padding:80px 1.5% 50px;}
#service .ttlArea{ align-items: flex-start; flex-direction: column; margin-bottom: 20px;}
#service .ttlArea h2{ opacity: 0.9;}
#service .ttlArea h2 *{ font-weight: 300; font-size: 50px; line-height: 1.0em;}
#service .ttlArea h3 { display: flex;}
#service .ttlArea h3.font-anime { padding: 0 5px;}
#service .ttlArea h3 *{ font-weight: 400; letter-spacing: 0.8em; line-height: 1em; display: flex;}
@media screen and (max-width: 700px) {
#service{ padding:80px 1.5% 30px;}
#service, 
#service p.info{ padding-top:0px !important; margin-top: 0 !important;}
}
@media screen and (max-width: 600px) {
#service .ttlArea h2 *{ font-size: 15.0vw; letter-spacing: 0.01em;}
}
/*------------------------------
 ▽タブ
------------------*/
#service p.info{ margin: 30px 0; align-items: flex-start; letter-spacing: 2px; color: #555;}
/*--▽タブ ul-----*/
#service ul.ser_tab{ width: 440px; display: flex; justify-content:flex-start; margin-bottom: 15px; overflow: hidden; position: relative;}
#service.customer_behavior ul.ser_tab li.customer_behavior , 
#service.web_channel ul.ser_tab li.web_channel{ color: #fff;}

/*--▽タブ li-----*/
#service ul.ser_tab li{ width: 220px; height: 40px; display: flex; justify-content: center; align-items: center; border: solid 1px #aaa; position: relative; cursor: pointer;}
#service ul.ser_tab li:nth-child(1){ border-radius: 50px 0 0 50px; border-right: none;}
#service ul.ser_tab li:nth-child(2){ border-radius: 0 50px 50px 0;}
/*背景色*/
#service ul.ser_tab::before{ width: 50%; height: 100%; background: var(--color1); position: absolute; top: 0%; margin:0; z-index: -10; pointer-events: none; transition: 0.6s; content: ""; border-radius: 100%;}
#service.customer_behavior ul.ser_tab::before { border-radius: 50px 0 0 50px; left: 0;}
#service.web_channel ul.ser_tab::before { border-radius: 0 50px 50px 0; left: 50%;}
/*白◎*/
#service ul.ser_tab li::after{ width: 8px; height: 8px; border-radius: 100%; position: absolute; z-index: -1; content: ""; background: #fff; top:50%; left:15px; margin-top: -4px; pointer-events: none; transition: 0.6s; transform: scale(1.8,1.8);}
#service ul.ser_tab li:hover::after{ transform: scale(1,1);}
#service.customer_behavior .ser_itemList .ser_setArea#web_channel{ left: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); padding: 0 15px;}
@media screen and (min-width: 600px) {
#service.web_channel ul.ser_tab li.web_channel:hover, 
#service.web_channel ul.ser_tab.customer_behaviorhover li.web_channel, 
#service.customer_behavior ul.ser_tab li.customer_behavior:hover, 
#service.customer_behavior ul.ser_tab.web_channelhover li.customer_behavior{ color: var(--color1);}
/**/
#service ul.ser_tab.customer_behaviorhover::before, 
#service ul.ser_tab.web_channelhover::before{ width: 20px; height: 20px; margin: 10px 0 0; border-radius: 100%;}
#service ul.ser_tab.customer_behaviorhover::before{ left: 10px; }
#service ul.ser_tab.web_channelhover::before{ left: calc(50% + 10px);}
/**/
#service.web_channel ul.ser_tab.customer_behaviorhover li.web_channel::after, 
#service.customer_behavior ul.ser_tab.web_channelhover li.customer_behavior::after{ background: var(--color1); transform: scale(0.8,0.8);}
}
@media screen and (max-width: 600px) {
#service ul.ser_tab{ width: 100%;}
#service ul.ser_tab li{ width: 50%; height: 50px; padding: 0 0 0 10px;}
#service ul.ser_tab li:nth-child(1){ border-radius: 6px 0 0 6px;}
#service ul.ser_tab li:nth-child(2){ border-radius: 0 6px 6px 0;}
#service.web_channel ul.ser_tab li.web_channel{ color: #fff;}	
#service.customer_behavior ul.ser_tab::before { border-radius: 6px 0 0 6px;}
#service.web_channel ul.ser_tab::before { border-radius: 0 6px 6px 0;}
#service ul.ser_tab li::after{ width: 4px; height: 4px; left: 6px; margin-top: -2px;}
#service.customer_behavior ul.ser_tab li.web_channel::after, 
#service.web_channel ul.ser_tab li.customer_behavior::after { background: #555;}
}

/*------------------------------
 ▽中身
------------------*/
#service .ser_itemList{ width: 100%; position: relative;}
#service .ser_itemList .ser_setArea{ width: 100%; height: 100%; display: flex; background: #fff; justify-content: space-between; position: relative; left: auto; right: auto; top: auto; z-index: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transition: 1.4s;}
#service.web_channel .ser_itemList .ser_setArea#customer_behavior, 
#service.customer_behavior .ser_itemList .ser_setArea#web_channel{ position: absolute; top: 0; z-index: 10;}
#service.web_channel .ser_itemList .ser_setArea#customer_behavior *, 
#service.customer_behavior .ser_itemList .ser_setArea#web_channel *{ overflow: hidden;}
#service.web_channel .ser_itemList .ser_setArea#customer_behavior{ right: 0; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
#service.customer_behavior .ser_itemList .ser_setArea#web_channel{ left: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); padding: 0 15px;}
/**/
#service .ser_itemList .ser_setArea .ser_item{ display: flex; flex-direction: column; margin: 20px 0;}
#service .ser_itemList .ser_setArea#customer_behavior .ser_item{ width: 23%; border: solid 1px #999; border-radius: 4px;}
#service .ser_itemList .ser_setArea#web_channel .ser_item{ width: 31%; margin: 20px 1%; box-shadow: 0 4px 12px rgba(0,0,0,.2); border-top: solid 4px var(--color1);}
/**/
#service .ser_itemList .ser_setArea .ser_item h4{ width: 100%; display: flex; justify-content: center; align-items: center; position: relative;}
#service .ser_itemList .ser_setArea#web_channel .ser_item h4{ min-height:80px;}
#service .ser_itemList .ser_setArea#customer_behavior .ser_item h4{ min-height:50px;}
#service .ser_itemList .ser_setArea .ser_item h4 span{ line-height: 1.2em; font-weight: 700;}
#service .ser_itemList .ser_setArea#web_channel .ser_item h4 span{ font-size: 18px; font-weight: 400;}
#service .ser_itemList .ser_setArea .ser_item > p{line-height: 1.4em; font-size: 12px; min-height: 110px; padding-bottom: 15px; display: flex; align-items: flex-start; color: #666; padding: 0 20px;}
#service .ser_itemList .ser_setArea .ser_item .item_dl {width: 100%; display: flex; flex-direction: column; position: relative; border-top: solid 1px #999;}
#service .ser_itemList .ser_setArea#web_channel .ser_item .item_dl { flex-direction: row; flex-wrap: wrap;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl{ width: 100%; display: flex; flex-direction: column;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt{ width: 100%; height: 40px; display: flex; justify-content: flex-start; align-items: center; padding: 0 20px; font-size: 13px; cursor: pointer; position: relative; transition: 0.1s;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt span{ width: 100%; height: 1px; content: ""; position: absolute; left: 0; bottom: -1px; border-bottom: solid 1px #999; z-index: 10;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt.a_up span{ border-bottom: dotted 1px #999;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt:hover{ background: #f5f5f5;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt::before, 
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt::after{ content: ""; background: #aaa; position:absolute; transition: 0.2s;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt::before{ width: 1px; height: 10px; top: 50%; right: 10px; margin-top: -4.5px;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt::after{ width: 10px; height: 1px; top: 50%; right: 6px;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt.a_up::before{ height: 8px; transform:rotate(-45deg); right: 10px; margin:-4px -2px 0 0; background: #555;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt.a_up::after{ width: 8px; transform: rotate(-45deg); right: 10px; margin: 0; background: #555;}
/*dd*/
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dd{ width: 100%; display: none; border-bottom: solid 1px #999;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl.noborder dt, 
#service .ser_itemList .ser_setArea .ser_item .item_dl dl.noborder dd{ border-bottom: none;}
#service .ser_itemList .ser_setArea .ser_item .item_dl.view dl dd{ display: block;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dd a{ display: block; padding: 10px 10px 40px; background: #eee; font-size: 12px; color: #444; font-weight: 300; line-height: 1.2em;  position: relative; transition: 0.4s;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dd a:hover{ background: #f0f0f0; color: #000;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dd a::after{ width: 80px; height: 18px; display: flex; font-size: 9px; font-weight: 300; content: "詳しく見る"; justify-content: center; align-items: center; position: absolute; left: 10px; bottom: 10px; background: #fff; color: #555; border: solid 1px #999; transition: 0.4s;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dd a:hover::after{ background: var(--color1); color: #fff;}
@media screen and (max-width: 1050px) {
#service .ser_itemList .ser_setArea .ser_item > p{ min-height: 150px;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt{ font-size: 11.5px; letter-spacing: 0;}
}
@media screen and (max-width: 900px) {
#service .ser_itemList .ser_setArea#customer_behavior .ser_item{ width: 24%;}
}
@media screen and (max-width: 800px) {
#service .ser_itemList .ser_setArea#customer_behavior .ser_item{ border: solid 1px #333;}
#service .ser_itemList .ser_setArea{ height: auto; flex-direction: column; justify-content: flex-start;}
#service .ser_itemList .ser_setArea .ser_item{ margin: 0 0 20px;}
#service .ser_itemList .ser_setArea#web_channel .ser_item h4, 
#service .ser_itemList .ser_setArea .ser_item > p{ min-height: auto;}
#service .ser_itemList .ser_setArea .ser_item h4 span{ font-size: 24px; padding: 15px 0;}
#service .ser_itemList .ser_setArea .ser_item > p{ padding:0 10px 15px; min-height: auto;}
#service .ser_itemList .ser_setArea#customer_behavior .ser_item{ width: 100%;}
/**/
#service .ser_itemList .ser_setArea .ser_item .item_dl { border-top: solid 1px #ddd;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt{ padding: 0 0 0 30px; height: 50px; font-size: 14px; letter-spacing: 0.2em;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt::before{ width: 2px; height: 13px; margin-top: -5.5px; right: auto; left: 14px; background: #333;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt::after{ height: 2px; width: 13px; right: auto; left: 8px; background: #333;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt.a_up::before{ height: 12px; right: auto; left: 10px; margin:-4px -2px 0 0; background: #000;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt.a_up::after{ width: 12px; right: auto; left: 5px; margin: 0; background: #000;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt span{ background: none; border-bottom: dashed 1px #ccc; mix-blend-mode: multiply;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dd a{ font-weight: 400;}
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dd a::after, 
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dd a:hover::after{ color: #333; content: "詳しく見る...→"; background: none; border: none; font-weight: 500;}
}
@media screen and (max-width: 600px) {
#service .ser_itemList .ser_setArea .ser_item .item_dl dl dt{ font-size: 3.4vw; font-weight: bold; letter-spacing:2px;}
#service .ser_itemList .ser_setArea .ser_item h4 span{ font-size: 4.8vw;}
}
/*web_channel*/
#service .ser_itemList .ser_setArea .ser_item .item_dl .itemDiv{ width: 46%; margin:10px 2%; display: flex;}
#service .ser_itemList .ser_setArea .ser_item .item_dl .itemDiv a{ width: 100%; padding: 5px 10px 20px; border-radius: 4px; border: solid 1px #999; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
#service .ser_itemList .ser_setArea .ser_item .item_dl .itemDiv a:hover{ border: solid 1px var(--color1);}
#service .ser_itemList .ser_setArea .ser_item .item_dl .itemDiv a:hover *{ color:var(--color1) !important;}
#service .ser_itemList .ser_setArea .ser_item .item_dl .itemDiv a h5{ width: 100%; height: 44px; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 400;  line-height: 1.2em;}
#service .ser_itemList .ser_setArea .ser_item .item_dl .itemDiv a p{ width: 100%; display: block; font-size: 10px; line-height: 1.3em; color: #666;}
@media screen and (max-width: 800px) {
#service .ser_itemList .ser_setArea#web_channel{ padding: 0 10px;}
#service .ser_itemList .ser_setArea#web_channel .ser_item h4 span{ font-size: 24px; font-weight: bold;}
#service .ser_itemList .ser_setArea#web_channel .ser_item > p{ padding-bottom: 0;}
#service .ser_itemList .ser_setArea#web_channel .ser_item{ width: 100%; margin: 0 0 20px;}
#service .ser_itemList .ser_setArea#web_channel .ser_item .item_dl{ border-top: none;}
#service .ser_itemList .ser_setArea .ser_item .item_dl .itemDiv{ width: 23%; margin:10px 1%;}
}
@media screen and (max-width: 600px) {
#service .ser_itemList .ser_setArea#web_channel .ser_item h4 span{ font-size: 4.8vw;}
#service .ser_itemList .ser_setArea .ser_item .item_dl .itemDiv{ width: 48%;}
#service .ser_itemList .ser_setArea .ser_item .item_dl .itemDiv a h5{ font-size: 3.2vw; font-weight: bold;}
#service .ser_itemList .ser_setArea .ser_item .item_dl .itemDiv a h5.f-min{ font-size: 2.6vw;}
#service .ser_itemList .ser_setArea .ser_item .item_dl .itemDiv a h5 br{ display: none;}
#service .ser_itemList .ser_setArea .ser_item .item_dl .itemDiv a p{ font-size: 12px;}
}

/*========================
purpose
==========================*/
#purpose{ background: #fff; padding-bottom: 80px; border-bottom: solid 1px #ccc;}
#purpose .inner1100{ flex-direction: row; justify-content: space-between; position: relative;}
#purpose .inner1100 h4{ font-size: 12px; font-weight: 500; line-height: 1.2em; padding:0 30px; position: sticky; left: 0; top: 10px; white-space: nowrap;}
#purpose .inner1100 p{ display: flex; flex-direction: row; flex-wrap: wrap; padding:0 30px; border-left: solid 1px #ccc;}
#purpose .inner1100 p span{ margin: 0 20px 10px 0;}
#purpose .inner1100 p span a{ display: flex; justify-content: center; align-items: center; padding: 4px 20px; border-radius: 30px; font-size: 13px; font-weight: 500; white-space: nowrap; color: #555; border: solid 1px #555; background: #fff;}
#purpose .inner1100 p span a::before{ content: "#";}
#purpose .inner1100 p span a:hover{ background: var(--color1); color: #fff;}
@media screen and (max-width: 1100px) {
#purpose .inner1100 p{ padding:0 0 0 15px;}
#purpose .inner1100 p span{ margin: 0 10px 15px 0;}
#purpose .inner1100 p span a{ padding:5px 8px;}
}
@media screen and (max-width: 800px) {
#purpose .inner1100{ flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 0 2%;}
#purpose .inner1100 h4{ position:relative; left: auto; top: auto; padding: 4px 10px; background: #111; color: #fff;}
#purpose .inner1100 p{ border-left:none; padding:10px 0 0;}
#purpose .inner1100 p span a{ padding:8px 10px; font-size: 12px; color: #111; border-radius: 4px;}
}

/*========================
break-contents
==========================*/
.break-contents{ width: 100%; height: 70vh; background: rgba(0,0,0,.4);}
/*===================
 #column_slide
=====================*/
#column_slide{ padding: 80px 0; background: #fff;}
#column_slide .inner1100{ width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
#column_slide .inner1100 .ttlArea{ align-items: flex-start; flex-direction: column; margin-bottom: 20px; padding: 0 3%;}
#column_slide .inner1100 .ttlArea h2{ opacity: 0.6;}
#column_slide .inner1100 .ttlArea h2 *{ font-weight: 300; font-size: 40px; line-height: 1.0em; padding: 0 3px;}
#column_slide .inner1100 .ttlArea h3 { display: flex;}
#column_slide .inner1100 .ttlArea h3.font-anime { padding: 5px 8px;}
#column_slide .inner1100 .ttlArea h3 *{ font-size: 12px; font-weight: 400; letter-spacing: 0.5em; line-height: 1em; display: flex; opacity: 0.7;}
/**/
#column_slide .inner1100 .sl-wrap{ width: 100%; min-width: 1100px; display: flex; justify-content: center; align-items: center;}
#column_slide .inner1100 .sl-wrap ul.slider{ width: 100%; display: flex; padding-bottom: 50px;}
#column_slide .inner1100 .sl-wrap ul.slider li { width: 24%; min-width: 255px; height: 100%; display: flex; padding: 0 10px;}
#column_slide .inner1100 .sl-wrap ul.slider li a{ width: 100%; height: 320px; display: flex; flex-direction: column; padding:20px 15px 60px; border: solid 1px #777; position: relative; background: #fff;}
#column_slide .inner1100 .sl-wrap ul.slider li a .ttl{ width: 100%; height: 100%; display: flex; font-size: 20px; line-height: 1.8em; font-weight: 300; overflow: hidden;}
#column_slide .inner1100 .sl-wrap ul.slider li a .cate{ position: absolute; width: calc(100% - 30px); height: 60px; left: 15px; bottom: 0px; display: flex; align-items: flex-start; flex-wrap: wrap; border-top: solid 1px #ddd; padding-top: 7px;}
#column_slide .inner1100 .sl-wrap ul.slider li a .cate span{ display: flex; height: 20px; align-items: center; padding:0 4px; margin: 0 4px 4px 0; font-size: 10px; letter-spacing: 0;  background: #eee; transition: 0.1s;}
#column_slide .inner1100 .sl-wrap ul.slider li a:hover{ background: var(--cursor_color2);}
#column_slide .inner1100 .sl-wrap ul.slider li a:hover .cate span{ background: var(--cursor_color4);}

@media screen and (min-width: 800px) and (max-width: 1120px){
#column_slide .inner1100 .sl-wrap ul.slider li { width: 24.5vw !important; margin: 0 0.5vw 0 0 !important; min-width: auto;}
.slick-prev, .slick-next{ left:auto !important; right:calc(100vw - 150px) !important;}
.slick-prev{ margin-right: 60px !important;}
.slick-next{ margin-left: auto !important;}
}
@media screen and (max-width: 800px) {
#column_slide .inner1100 .sl-wrap{ width: 96%; margin: 0 2%; min-width:inherit;}
}
@media screen and (max-width: 600px) {
#column_slide .inner1100 .ttlArea h2 *{ font-size: 15.0vw; letter-spacing: 0.01em;}
#column_slide .inner1100 .sl-wrap ul.slider li{ min-width: auto; display: block;}
#column_slide .inner1100 .sl-wrap ul.slider li a{ min-height: 260px; height: auto;}
#column_slide .inner1100 .sl-wrap ul.slider li a .ttl{font-size: 16px;}
}




/*-------------------
#top_news
---------------------*/
#top_news{ padding:80px 1% 120px; background: #fff; position: relative; z-index: 10;}
#top_news::before{ width: 100%; height: 100vh; position: absolute; left: 0; top: 100%; z-index: -1;}
#top_news .inner1100{ width: 100%; align-items: flex-start;}
#top_news .inner1100 .ttlArea{ align-items: flex-start; flex-direction: column; margin: 30px 0 60px; padding: 0 3%; position: sticky; top: 50px; left: 0;}
#top_news .inner1100 .ttlArea h2{ opacity: 0.6;}
#top_news .inner1100 .ttlArea h2 *{ font-weight: 300; font-size: 40px; line-height: 1.0em; padding: 0 3px;}
#top_news .inner1100 .ttlArea h3 { display: flex;}
#top_news .inner1100 .ttlArea h3.font-anime { padding: 5px 8px;}
#top_news .inner1100 .ttlArea h3 *{ font-size: 12px; font-weight: 400; letter-spacing: 0.5em; line-height: 1em; display: flex; opacity: 0.7;}
/**/
#top_news .inner1100 .ulBox{ height: 340px; max-height: 340px; overflow-x: hidden; overflow-y: auto; flex:1; display: flex; flex-direction: column; padding: 10px 20px;}
#top_news .inner1100 .ulBox::-webkit-scrollbar { width: 6px; }
#top_news .inner1100 .ulBox::-webkit-scrollbar-thumb{ background: #222; border-radius: 5px;}
#top_news .inner1100 .ulBox::-webkit-scrollbar-track-piece {background: #eee;}
#top_news .inner1100 .ulBox ul, 
#top_news .inner1100 .ulBox ul li{ width: 100%; display: block; position: relative; z-index: 1;}
#top_news .inner1100 .ulBox ul li:hover{ z-index: 10;}
#top_news .inner1100 .ulBox ul li a{ display: flex; justify-content: flex-start; align-items: center; padding:15px 10px; border-top: solid 1px #e5e5e5; background: #fff; border-radius: 0;}
#top_news .inner1100 .ulBox ul li a .date{ width: 155px; display: flex; align-items: center; justify-content: space-between; padding-right: 15px;}
#top_news .inner1100 .ulBox ul li a .date b{ font-size: 12px; letter-spacing: 0; font-weight: 400; color: #222;}
#top_news .inner1100 .ulBox ul li a .date .cate{ padding: 2px 4px 1px; text-align: center; letter-spacing: 0; font-size: 8px; border: solid 1px #aaa; color: #777; border-radius: 1px;}
#top_news .inner1100 .ulBox ul li a .info{ flex: 1;  font-size: 12px; line-height: 1.3em;}
@media screen and (min-width: 851px){
#top_news .inner1100 .ulBox ul:hover li a{ opacity: 0.3;}
#top_news .inner1100 .ulBox ul li a:hover{ opacity: 1; border-top: solid 1px #fff; box-shadow: 0 8px 15px rgba(0,0,0,.3); border-radius: 6px;}
}
@media screen and (max-width: 1100px){
#top_news .inner1100 .ttlArea{ padding: 0 20px;}
#top_news .inner1100 .ttlArea h2 *{ font-size: 30px;}
#top_news .inner1100 .ttlArea h3 *{ font-size: 11px; letter-spacing: 0.3em;}
}

@media screen and (max-width: 800px){
#top_news{ margin:0px 0 80px;}
#top_news .inner1100 .ttlArea{ padding: 0 20px 0 10px;}
#top_news .inner1100 .ttlArea h2 *{ font-size: 20px;}
#top_news .inner1100 .ttlArea h3 *{ font-size: 10px; letter-spacing: 0.1em;}

#top_news .inner1100 h2{ width: 100%; flex-direction: row; align-items: baseline;}
#top_news .inner1100 h2 span{ font-size: 30px;}
#top_news .inner1100 h2 b{ font-size: 11px; margin-left: 15px;}
#top_news .inner1100 .ulBox{ padding: 10px 20px 0 0;}
#top_news .inner1100 .ulBox ul li a{ padding: 15px; align-items: flex-start;}
#top_news .inner1100 .ulBox ul li a .date{ width: auto; padding-right: 15px;}
#top_news .inner1100 .ulBox ul li a .date b{ color: #777;}
#top_news .inner1100 .ulBox ul li a .date .cate{ display: none;}
}


@media screen and (max-width: 600px){
#top_news{ padding:0px 1% 80px;}
#top_news .inner1100{ flex-direction: column !important;}
#top_news .inner1100 .ttlArea{ width: 100%; display: flex; justify-content: flex-start; flex-direction: row !important; align-items: baseline; position: relative; left: auto; top: auto; margin: 0 0 10px;}
#top_news .inner1100 h2{ width: auto; padding-right: 15px;}
#top_news .inner1100 .ulBox{ border-top: solid 1px #ccc; border-bottom: solid 1px #ccc;}

}