@charset "utf-8";

#imageBox.spanBox > div span.img0 { background:url(../img/top/i01.webp) 50% 50% no-repeat; background-size: cover; background-attachment: fixed;}
#imageBox.spanBox > div span.img1 { background:url(../img/top/01.webp) 50% 50% no-repeat; background-size: cover; background-attachment: fixed;}
#imageBox.spanBox > div span.img2 { background:url(../img/top/i02.webp) 50% 50% no-repeat; background-size: cover; background-attachment: fixed;}
#imageBox.spanBox > div span.img3 { background:url(../img/top/02.webp) 50% 50% no-repeat; background-size: cover; background-attachment: fixed;}
#imageBox.spanBox > div span.img4 { background:url(../img/top/04.webp) 50% 50% no-repeat; background-size: cover; background-attachment: fixed;}

/**/
body, main{ overflow-y: visible !important;}
.focus-border{ pointer-events: none; width: 90vw; height: 86vh; position: fixed; left: 5vw; top: 8vh; border: solid 10px #fff; z-index: 100;}
body::before{ width: 100%; height: 300%; position: absolute; left: 0; top: 0; content: ""; background: #fff; content: ""; opacity: 1; transition: 3.4s; pointer-events: none;}
body.opBody::before{ opacity: 0; z-index: 99999999999;}
/* マスク */
#top-mv-start { position: fixed; top: 50%; left: 50%; width: 250px; height: 300px; min-width: 250px !important; min-height: 300px !important; transform: translate(-50%, -50%); border: 80px solid rgba(180,180,180,.85); box-sizing: border-box; z-index: 999999999999; background: rgba(255,255,255,1); box-shadow: 0 0 0 9999px #fff; box-sizing: border-box;}
.opBody #top-mv-start{ background: rgba(255,255,255,0.0); pointer-events: none;}



/*===========================
 #topMv
===========================*/
#topMv{ }
#topMv #mv-ttl{ width: 100%; height: 60vh; min-height: 300px; display: flex; flex-direction: row; align-items: center; justify-content: center;}
#topMv #mv-ttl .inner{ max-width: 900px; display: flex; justify-content: flex-start; align-items: flex-start; padding:60px 15px 0;}
#topMv #mv-ttl .inner .ttl{ display: flex; flex-direction: column-reverse; }
#topMv #mv-ttl .inner .ttl h1{ font-size: 13px; letter-spacing: 7.4px; color:#555; padding: 8px 0;}
#topMv #mv-ttl .inner .ttl h2{ font-size: 19px; letter-spacing: 5px; color:#666;}
#topMv #mv-ttl .inner .ttl .eng{ font-size: 48px; letter-spacing: 4px; color: #999; margin-bottom: 8px;}
@media screen and (max-width: 600px) {
#topMv #mv-ttl{ height: 60vh;}
#topMv #mv-ttl .inner .ttl h1{ font-size: 3.4vw; letter-spacing: 0.05vw;}
#topMv #mv-ttl .inner .ttl h2{ font-size: 4.0vw; letter-spacing: 0.05vw;}
#topMv #mv-ttl .inner .ttl .eng{ font-size: 12.2vw; letter-spacing: 0.05vw; line-height: 1.4em; margin-bottom: 20px;}
}

/*===========================
 #concept
===========================*/
#concept{ width: 100%; position: relative; background: #fff; margin-bottom: 250px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; z-index: 1;}
#concept .image-wrap{ width: 100%; height: 100vh; position: sticky; top: 0vh; left: 0; display: flex; align-items: center; justify-content: center; z-index: 3;}
#concept .image-wrap .imageBox{ width: 80%; height: 90vh; border-radius: 60px; background: url(../img/top/image.webp) 0 70% no-repeat; background-size: cover; position: relative; z-index: 1; overflow: hidden;}
#concept .image-wrap .imageBox span.overray{ width: 100%; height: 100vh; content: ""; position: absolute; left: 0; top: 0; background: rgba(110,110,110,.92); z-index: 10; opacity: 0; transition: 0.8s;}
/**/
#concept #concept_info{ display:flex; justify-content: center; padding:0px 3% 300px ; position: relative; z-index: 100;}
#concept #concept_info .txt-wrap{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
#concept #concept_info .txt-wrap .ttl{ display: flex; flex-direction: column; margin-bottom: 50px;}
#concept #concept_info .txt-wrap .ttl .txt{ margin-left: -0.5em;}
#concept #concept_info .txt-wrap .ttl span{ color: #fff;}
#concept #concept_info .ttl .txt.setTit > span{ font-size: 24px; letter-spacing: 0.6em; font-weight: 200;}
#concept #concept_info .txt-wrap > p{ display: block; text-align: center;}
#concept #concept_info .txt-wrap > p span{ display: block; text-align: center; font-size: 18px; line-height: 2.2em; letter-spacing: 0.2em; color: #fff; margin: 10px 0 40px;}
@media screen and (max-width: 750px) {
#concept #concept_info .txt-wrap .ttl{ width: 100%; padding: 0 2%;}
#concept #concept_info .txt-wrap .ttl .txt{ margin-left: 0;}
#concept #concept_info .ttl .txt.setTit > span{ letter-spacing: 0.05vw; font-size: 5.0vw;}
#concept #concept_info .txt-wrap > p span{ display: block; text-align: left; line-height: 2.0em; padding: 0 2%;}
#concept #concept_info .txt-wrap > p br{ display: none;}

}


/*===========================
 #focus
===========================*/
#focus{ padding:0 5%;}
#focus #tag-menu{ width: 100%; display: flex; justify-content: center;}
#focus #tag-menu .inner-wrap{ display: flex; flex-direction: row; justify-content: space-between;}
/*left*/
#focus #tag-menu .inner-wrap .left { width: 48%; min-width: 400px; display: flex; flex-direction: column;}
#focus #tag-menu .inner-wrap .left .c-tag{ width: 100%; display: block; height: 1px;}
#focus #tag-menu .inner-wrap .left .box{ width: 100%; display: flex; flex-direction: column; border-top: solid 1px #ddd;}

/*-------
.left
#focus1
--------*/
#focus #tag-menu .inner-wrap .left .box#focus1{ padding-bottom: 60px; border-top: none; padding-left: 10px;}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttlarea{ width: 100%; display: flex; flex-direction: column-reverse;}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttlarea .focus_ttl{ display: block; font-size: 15px; letter-spacing: 0.1em; line-height: 1.8em; padding-bottom: 5px;}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl{}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en{ position: relative;}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en::before{ width: 1px; height: 0px; top: 50%; margin-top: 0px; right: -22px;}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en::after{ width: 0px; height: 1px; top: 50%; right: -22px;}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en::before, 
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en::after{ content: ""; background: #555; position: absolute; transition: 1.4s;}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en.setView::before{ height: 20px; margin-top: -10px;}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en.setView::after{ width: 20px; right: -32px;}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en, 
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en *{ font-size: 20px; letter-spacing: 2px; font-weight: 200;}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .txt{ padding: 40px 0 60px; margin-left: -0.8em;}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .txt, 
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .txt *{ font-size: 24px; font-weight: 300; letter-spacing: 0.4em; }
#focus #tag-menu .inner-wrap .left .box p { display: flex; flex-direction: column; align-items: flex-start;}
#focus #tag-menu .inner-wrap .left .box p > span{ display: block; margin: 8px 0; line-height: 1.2em; font-size: 14px; vertical-align: baseline;}
#focus #tag-menu .inner-wrap .left .box p > span b{ display: inline; vertical-align: baseline; font-weight: 500;}

/*-------
.left
.ser
--------*/
#focus #tag-menu .inner-wrap .left .box.ser{}
#focus #tag-menu .inner-wrap .left .box.ser a{ padding: 120px 100px 120px 10px;}
#focus #tag-menu .inner-wrap .left .box.ser a:hover *{ color: #000;}
#focus #tag-menu .inner-wrap .left .box.ser a:hover h3 .txt *{ letter-spacing: 3px;}
#focus #tag-menu .inner-wrap .left .box.ser a p{ font-size: 14px; position: relative; padding-top: 25px; margin-top: 10px;}
#focus #tag-menu .inner-wrap .left .box.ser a p span{ width: 0; height: 5px; display: block; position: absolute; left: 0; top: 0; z-index: 1; transition: 0.8s; animation: bk-color 120.0s ease-in infinite forwards; border-radius: 3px;}
#focus #tag-menu .inner-wrap .left .box.ser a:hover p span{ width: 100px;}
/*right*/
#focus #tag-menu .inner-wrap .right { width: 46%; position: relative;}
#focus #tag-menu .inner-wrap .right .bk_imgbox{ width: 100%; height: 80vh; max-height:800px; display: block; position: sticky; top: 10vh;}
#focus #tag-menu .inner-wrap .right .bk_imgbox::before{ width: 100%; height: calc(100% + 30px); position: absolute; left: 0; bottom: 0; content: ""; z-index: 10; background: #fff; transition: 2.2s;}
#focus.setView #tag-menu .inner-wrap .right .bk_imgbox::before { height: 0;}
/**/
#focus #tag-menu .inner-wrap .right .bk_imgbox .imgbox1, 
#focus #tag-menu .inner-wrap .right .bk_imgbox .imgbox2{ width:100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 4px; overflow: hidden; transition: 0.6s;}

#focus #tag-menu .inner-wrap .right .bk_imgbox .imgbox1, 
#focus #tag-menu .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(0 0 0px 0 round 20px);}

#focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox .imgbox1{ clip-path: inset(0px 51% 100px 0 round 4px);}
#focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(100px 0 0px 51% round 4px);}
#focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox .imgbox1{ clip-path: inset(0px 50% 50% 0 round 600px);}
#focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(25% 0 0 25% round 600px);}
#focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox .imgbox1{ clip-path: inset(0 0 51% 0 round 60px 60px 0 0);}
#focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(51% 0 0 0 round 0 0 60px 60px);}
#focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox .imgbox1{ clip-path: inset(30% 0 0 10% round 600px);}
#focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(0px 39% 55% 0% round 600px);}
/*move*/
#focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox .imgbox1{ clip-path: inset(0 75% 0% 0 round 200px 0 0 20px);}
#focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(0% 0 0 28% round 0 20px 200px 0);}
#focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox .imgbox1{ clip-path: inset(0px 52% 0 0 round 50% 0 0 50%);}
#focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(0 0 0px 52% round 0 50% 50% 0);}
#focus #tag-menu .inner-wrap .right .bk_imgbox div span{ width: 100%; height: 100%; display: flex; position: absolute; left: 0; top: 0; z-index: 1; overflow: hidden; transition: 1.0s 0.6s ;}
#focus #tag-menu .inner-wrap .right .bk_imgbox div span > *{ width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#focus #tag-menu .inner-wrap .right .bk_imgbox div span.image_no1{ z-index: 30;}
#focus #tag-menu .inner-wrap .right .bk_imgbox div span.image_no2{ z-index: 25;}
#focus #tag-menu .inner-wrap .right .bk_imgbox div span.image_no3{ z-index: 20;}
#focus #tag-menu .inner-wrap .right .bk_imgbox div span.image_no4{ z-index: 15;}
#focus #tag-menu .inner-wrap .right .bk_imgbox div span.image_no5{ z-index: 10;}
/**/
#focus #tag-menu.tag0 .inner-wrap .right .bk_imgbox div span.image_no1, 
#focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox div span.image_no1{ }
/**/
#focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox div span.image_no1, 
#focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox div span.image_no1, 
#focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox div span.image_no1, 
#focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox div span.image_no1, 
#focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox div span.image_no1{ width: 0%;}
/**/
#focus #tag-menu.tag0 .inner-wrap .right .bk_imgbox div span.image_no2, 
/*#focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox div span.image_no2, */
/*#focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox div span.image_no2, */
#focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox div span.image_no2, 
#focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox div span.image_no2, 
#focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox div span.image_no2, 
#focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox div span.image_no2{ width: 0%;}
/**/
#focus #tag-menu.tag0 .inner-wrap .right .bk_imgbox div span.image_no3, 
#focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox div span.image_no3, 
/*#focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox div span.image_no3, */
/*#focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox div span.image_no3, */
#focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox div span.image_no3, 
#focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox div span.image_no3, 
#focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox div span.image_no3{ width: 0%;}
/**/
#focus #tag-menu.tag0 .inner-wrap .right .bk_imgbox div span.image_no4, 
#focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox div span.image_no4, 
#focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox div span.image_no4, 
/*#focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox div span.image_no4, */
/*#focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox div span.image_no4, */
#focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox div span.image_no4, 
#focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox div span.image_no4{ width: 0%;}
/**/
#focus #tag-menu.tag0 .inner-wrap .right .bk_imgbox div span.image_no5, 
#focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox div span.image_no5, 
#focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox div span.image_no5, 
#focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox div span.image_no5, 
/*#focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox div span.image_no5, */
/*#focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox div span.image_no5, */
#focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox div span.image_no5{ width: 0%;}
/**/
#focus #tag-menu.tag0 .inner-wrap .right .bk_imgbox div span.image_no6, 
#focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox div span.image_no6, 
#focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox div span.image_no6, 
#focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox div span.image_no6, 
#focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox div span.image_no6, { width: 0%;}
/*#focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox div span.image_no6, 
#focus #tag-menu.tag6 .inner1100 .right .bk_imgbox div span.image_no6{ width: 0%;}*/
@media screen and (max-width: 800px) {
#focus{ padding:0 0 100px; }
#focus #tag-menu .inner-wrap{ flex-direction: column-reverse;}
#focus #tag-menu .inner-wrap .left { width: 100%; min-width: auto; position: relative; z-index: 1;}
#focus #tag-menu .inner-wrap .left .box{ width: 90%; margin: 3vh 5%; border: none;}
#focus #tag-menu .inner-wrap .left .box#focus1{ padding: 120px 0; margin-bottom: 0; border-radius: 150px 150px 0 0; background: linear-gradient(to bottom,  rgba(255,255,255,0.9) 55%,rgba(255,255,255,0) 100%);}
#focus #tag-menu .inner-wrap .left .box.ser a{ padding: 6vh 5% 12vh; background:rgba(255,255,255,.9) ; border-radius: 20px; border: solid 8px rgba(100,100,100,.2);}
#focus #tag-menu .inner-wrap .left .box.ser a:hover *{ color: #000;}
#focus #tag-menu .inner-wrap .left .box.ser a:hover h3 .txt *{ letter-spacing: 3px;}
#focus #tag-menu .inner-wrap .left .box.ser a p{ font-size: 14px; color: #555; position: relative; padding-top: 25px; margin-top: 10px;}
#focus #tag-menu .inner-wrap .left .box.ser a p span{ width: 0; height: 5px; display: block; position: absolute; left: 0; top: 0; z-index: 1; transition: 0.8s; animation: bk-color 120.0s ease-in infinite forwards; border-radius: 3px;}

#focus #tag-menu .inner-wrap .left .box.ser a:hover p span{ width: 100px;}
#focus #tag-menu .inner-wrap .left .box#focus1 .ttlarea .focus_ttl, 
#focus #tag-menu .inner-wrap .left .box p > span, 
#focus #tag-menu .inner-wrap .left .box.ser a p, 
#focus #tag-menu .inner-wrap .left .box.ser a:hover p{ font-weight: 400; color: #111;}

#focus #tag-menu .inner-wrap .left .box.ser a.linkBoxR .i{ right: 50%; top: auto; bottom: 20px; margin-top: 0; margin-right: -34px;}

/*right*/
#focus #tag-menu .inner-wrap .right { width: 46%; position: relative;}
#focus #tag-menu .inner-wrap .right .bk_imgbox{ width: 100%; height: 80vh; max-height:800px; display: block; position: sticky; top: 10vh;}
#focus #tag-menu .inner-wrap .right .bk_imgbox::before{ width: 100%; height: calc(100% + 30px); position: absolute; left: 0; bottom: 0; content: ""; z-index: 10; background: #fff; transition: 2.2s;}
#focus.setView #tag-menu .inner-wrap .right .bk_imgbox::before { height: 0;}
/**/
#focus #tag-menu .inner-wrap .right{ width: 80%; height: 80vh; position: sticky; left: 10%; top: 10vh;}
}
@media screen and (max-width: 600px) {
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .txt, 
#focus #tag-menu .inner-wrap .left .box#focus1 .ttl .txt *{ font-size: 6.2vw; letter-spacing: 0.2em; }
}



/*===========================
 #seo
===========================*/
#seo{ padding:100px 5% ;}
#seo .inner-wrap{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding:70px 50px; border: solid 6px #efefef; border-radius: 20px;}

/*left*/
#seo .inner-wrap .left { width: 46%; display: flex; flex-direction: column;}
#seo .inner-wrap .left .ttl{ display: flex; flex-direction: column; margin-bottom:20px;}
#seo .inner-wrap .left .ttl .en{ font-size: 12px; letter-spacing: 0; line-height: 1em; margin: 0;}
#seo .inner-wrap .left .ttl .txt, 
#seo .inner-wrap .left .ttl .txt *{ font-size: 22px;}
#seo .inner-wrap .left h3, 
#seo .inner-wrap .left p span{ display: flex; font-size: 14px; margin: 4px 0;}
/*right*/
#seo .inner-wrap .right { width: 46%; position: relative; display: flex; align-items: stretch; flex-direction: column-reverse;}
#seo .inner-wrap .right .seo-ser{ width: 100%; display: flex; flex-direction: column; padding: 10px; position: relative; border-radius: 10px; margin-top: 20px;}
#seo .inner-wrap .right .seo-ser .bk-color{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 10px; z-index: -1; opacity: 0.2;}
#seo .inner-wrap .right .seo-ser h4{ font-size: 12px; padding: 0 4px 4px;}
#seo .inner-wrap .right .seo-ser p{ display: flex; flex-wrap: wrap;}
#seo .inner-wrap .right .seo-ser p span{ font-size: 11px; line-height: 1.2em; padding: 3px;}
#seo .inner-wrap .right .seo-ser p span::after{ content: "|"; margin-left: 5px; color: #ccc;}
#seo .inner-wrap .right .seo-ser p span:last-child:after{ content: ""; display: none;}
/**/
#seo .inner-wrap .right .pageLinks{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 0 5px;}
#seo .inner-wrap .right .pageLinks a{ width: auto; display: block; font-size: 14px; padding: 4px 10px; border-radius: 30px; border: solid 1px #aaa; margin: 5px 10px 5px 0; overflow: hidden; position: relative; color: #444;}
#seo .inner-wrap .right .pageLinks a::before{ content: "・";}
#seo .inner-wrap .right .pageLinks a::after{ content: ""; width: 0; height: 100%; position: absolute; left: 0; top: 0; pointer-events: none; z-index: -1; transition: 0.6s;}
#seo .inner-wrap .right .pageLinks a:hover::after{ width: 100%;}
#seo .inner-wrap .right .pageLinks a:hover{ border: solid 1px #111; color: #000;}

@media screen and (max-width: 900px) {
#seo .inner-wrap{ padding:40px 3%; flex-direction: column;}
#seo .inner-wrap .left .ttl .en{ margin-bottom: 10px;}
#seo .inner-wrap .left { width: 100%; padding: 0 10px 20px;}
#seo .inner-wrap .right { width: 100%;}
}
@media screen and (max-width: 500px) {
#seo .inner-wrap .right .pageLinks a{ width: 100%; padding: 10px; border: solid 1px #222; color: #111; margin: 5px 0;}
}












/*=========================
画像
==========================*/
#imageBox.spanBox{ width: 96%; max-width: 100%; height: 500px; margin: 0 2% 40px; display: flex; justify-content: center; align-items: center; background: #777; border-radius: 30px;}
#imageBox.spanBox > div{ width: 100%; height: 100%; display: block; position: relative; border-radius: 30px; overflow: hidden; opacity: 0.5;}
#imageBox.spanBox > div span{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; display: flex; align-items: center; justify-content: center;}
#imageBox.spanBox > div span *{ min-width: 100%; min-height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1;}

/*pc本体*/
#imageBox.spanBox > div.spanSet0 span.img0, 
#imageBox.spanBox > div.spanSet1 span.img1, 
#imageBox.spanBox > div.spanSet2 span.img2, 
#imageBox.spanBox > div.spanSet3 span.img3, 
#imageBox.spanBox > div.spanSet4 span.img4{ opacity: 0; z-index: 10; animation: spanBox 1.4s ease-in forwards;}
/**/
#imageBox.spanBox > div.spanSet1 span.img0, 
#imageBox.spanBox > div.spanSet2 span.img1, 
#imageBox.spanBox > div.spanSet3 span.img2, 
#imageBox.spanBox > div.spanSet4 span.img3, 
#imageBox.spanBox > div.spanSet0 span.img4 { opacity: 1; z-index: 1;}
@keyframes spanBox{
0%{ opacity: 0; z-index: 10;}
10%{ opacity: 0; z-index: 10;}
90%{ opacity: 1; z-index: 10;}
100%{ opacity: 1; z-index: 2;}
}

/*=========================
事例
==========================*/
#works{ margin: 100px 0;}
#works .inner-wrap{ flex-direction: row; justify-content: space-between; padding: 0 2%;}
/**/
#works .inner-wrap .left{ width: 240px; display: block;}
#works .inner-wrap .left .left-wrap{ display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 50px; left: 0; margin-bottom: 50px;}
#works .inner-wrap .left .left-wrap h2{}
#works .inner-wrap .left .left-wrap p{ width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
#works .inner-wrap .left .left-wrap p span{ font-size: 14px; margin:20px 0 50px; text-align: left;}
/**/
#works .inner-wrap .right{ flex: 1; margin-left: 60px; display: block;}
#works .inner-wrap .right .item-list { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
#works .inner-wrap .right .item-list .item { width: 46%; display: block; margin: 0 2% 30px;}

#works .inner-wrap .right .item-list .item a{ display: flex; width: 100%; flex-direction: column; position: relative; background: #000; border-radius: 10px; overflow: hidden; border: solid 1px #ddd;}
#works .inner-wrap .right .item-list .item a .image{ display: block; position: relative; z-index: 1;}
#works .inner-wrap .right .item-list .item a .image img{ width: 100%; height: auto; display: block; transition: 0.8s;}
#works .inner-wrap .right .item-list .item a .txt{ width: 100%; display: block; opacity: 0; position: absolute; padding: 50px 15px 20px; left: 0; bottom: -20px; z-index: 10; background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.4) 90%,rgba(0,0,0,0.4) 100%); transition: 0.8s; pointer-events: none;}
#works .inner-wrap .right .item-list .item a .txt h3{ font-size: 10.5px; color: #fff;}
#works .inner-wrap .right .item-list .item a .txt p{ font-size: 14px; font-weight: bold; color: #fff;}

@media screen and (min-width: 600px) {
#works .inner-wrap .right .item-list .item a:hover .image img{ opacity: 0.85; transform: scale(1.1,1.1);}
#works .inner-wrap .right .item-list .item a:hover .txt{ bottom: 0; opacity: 1;}
}

@media screen and (max-width: 800px) {
#works .inner-wrap{ flex-direction: column; justify-content: flex-start; padding: 0;}
/**/
#works .inner-wrap .left{ width: 100%; padding: 0 40px 10px;}
#works .inner-wrap .left .left-wrap{ position: relative; top: auto; left: auto; margin-bottom: 0;}
#works .inner-wrap .left .left-wrap h2{ display: flex; flex-direction: row; justify-content: flex-start;}
#works .inner-wrap .left .left-wrap h2 span{ margin-right: 10px;}
#works .inner-wrap .left .left-wrap p span{ margin: 10px 0;}
#works .inner-wrap .left .left-wrap p span br{ display: none;}
#works .inner-wrap .left .left-wrap a{ padding: 2px 30px 2px 2px; border: solid 1px #ccc; border-radius: 60px; margin-top: 20px;}
#works .inner-wrap .left .left-wrap a.linkBtn .i{ height: 30px;}
#works .inner-wrap .left .left-wrap p span{ margin: 0;}
/**/
#works .inner-wrap .right { width: 100%; display: flex; margin: 0; flex:auto; overflow-x: scroll; overflow-y: hidden; padding: 30px;}

#works .inner-wrap .right .item-list{ width: auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: row; flex-wrap: nowrap;}

#works .inner-wrap .right .item-list .item { width: 200px; display: block; margin: 0 10px;}
#works .inner-wrap .right .item-list .item a .txt{ opacity: 1; position: relative; padding: 10px 10px 25px; left: auto; bottom: auto; z-index: 10; background:#fff; transition: 0s; pointer-events: all;}
#works .inner-wrap .right .item-list .item a .txt h3{ color: #111; text-align: left; line-height: 1.2em;}
#works .inner-wrap .right .item-list .item a .txt p{ font-size: 12px; font-weight: 500; color: #555; text-align: left; line-height: 1.2em;}


}



/*===========================
 #column
===========================*/
#column{ margin: 120px 0 150px;}
#column > .wrap{ display: flex; justify-content: center; align-items: center; flex-direction: column;}
#column > .wrap .inner800{ max-width:1100px; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 20px; padding: 0 20px;}
#column > .wrap .inner800 .list-box {display: flex; flex-direction: column;}
#column > .wrap .inner800 .list-box .tit { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin-bottom: 15px;}
#column > .wrap .inner800 .list-box .tit h2{ display: flex; flex-direction: row; align-items: flex-end;}
#column > .wrap .inner800 .list-box .tit h2 .en{ margin-right: 5px; margin-bottom: -2px;}
#column > .wrap .inner800 .list-box .tit h2 .en, 
#column > .wrap .inner800 .list-box .tit h2 .en *{ font-size: 18px; }
#column > .wrap .inner800 .list-box .tit h2 .jpn{ margin-bottom: 2px;} 
#column > .wrap .inner800 .list-box .tit h2 .jpn, 
#column > .wrap .inner800 .list-box .tit h2 .jpn *{ font-size: 10px; color: #555; font-weight: 300;}
#column > .wrap .inner800 .list-box .tit p{ display: flex;}
#column > .wrap .inner800 .list-box .tit p a{ display: flex; align-items: center; justify-content: center; padding: 2px 3px; border-radius: 4px; border: solid 1px #ddd; color: #666; font-weight: 400; font-size: 10px; margin-right: 15px; position: relative;}
/**/
#column > .wrap .inner800 .list-box .tit p .bkhover:hover{ color: #111; border: solid 1px #111;}
#column > .wrap .inner800 .list-box .tit p .bkhover::before, 
#column > .wrap .inner800 .list-box .tit p .bkhover::after{ content: ""; width: 100%; height: 100%; position: absolute; right: 0; top: 0;}
#column > .wrap .inner800 .list-box .tit p .bkhover::before{ background: #f5f5f5; z-index: -1; transition: 0.4s;}
#column > .wrap .inner800 .list-box .tit p .bkhover::after{ z-index: -10;}
#column > .wrap .inner800 .list-box .tit p .bkhover:hover:before{ width: 0;}

/**/
#column > .wrap .list-box#c { width: 53%;}
#column > .wrap .list-box#n { width: 40%;}
#column > .wrap ul::-webkit-scrollbar {width: 4px;}
#column > .wrap ul::-webkit-scrollbar-track { background-color:#ddd;}
#column > .wrap ul::-webkit-scrollbar-thumb { background-color:#555; border-radius:0px; box-shadow:0 0 0 1px rgba(255, 255, 255, .3);}
#column > .wrap #column-list{width: 100%; display: block;  max-height: 400px; overflow-y: scroll; padding:0 8px 30px;}
#column > .wrap #column-list li{width: 100%; display: block;  border-bottom: solid 1px #ddd; position: relative; z-index: 1;}
#column > .wrap #column-list li:nth-child(1){ border-top: solid 1px #ddd;}
#column > .wrap #column-list li:hover{ z-index: 10;}
#column > .wrap #column-list li a{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; align-content: center; padding:20px 5px; background: #fff;}
#column > .wrap #column-list li a:hover{ box-shadow: 0 2px 8px rgba(0,0,0,.3);}
#column > .wrap #column-list li a .image{ width: 80px; height: auto; display: flex; overflow: hidden; border-radius: 4px; background: #000;}
#column > .wrap #column-list li a .image img{ display: block;}
#column > .wrap #column-list li a:hover .image img{ opacity: 0.7; transform: scale(1.1,1.1);}
/**/
#column > .wrap #column-list li a .text{ flex:1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding:0 10px 0 20px;}
#column > .wrap #column-list li a .text h4{ display: flex; flex-direction: row; width: 100%; margin-bottom: 4px;}
#column > .wrap #column-list li a .text h4 .date{ font-size: 11px; text-align: center; margin-bottom: 5px; font-weight: 300; letter-spacing: 0; color: #000;}
#column > .wrap #column-list li a .text h4 .cate{ height: 16px; display: flex; align-items: center; font-size: 11px; padding:0 4px; border-radius: 1px; border: solid 1px #ddd; color: #555; text-align: center; font-weight: 300; line-height: 1.1em; margin-left: 10px;}
#column > .wrap #column-list li a .text p{ font-size: 15px; line-height: 1.6em;}
/**/
#column > .wrap #news-list{width: 100%; display: block;  max-height: 400px; overflow-y: auto; padding:0px 10px 20px;}
#column > .wrap #news-list li { width: 100%; display: block; border-top: solid 1px #ddd;}
#column > .wrap #news-list li a{ display: flex; flex-wrap: wrap; padding: 15px 8px;}
#column > .wrap #news-list li a:hover{ box-shadow: 0 2px 8px rgba(0,0,0,.3);}
#column > .wrap #news-list li a .date{ font-size: 11px; letter-spacing: 0;}
#column > .wrap #news-list li a .tag{ font-size: 9px; padding: 2px 4px; border: solid 1px #ccc; border-radius: 1px; margin-left: 10px;}
#column > .wrap #news-list li a .txt{ width: 100%; display: block; font-size: 13px; line-height: 1.4em; margin-top: 10px;}
#column > .wrap #news-list li a:hover .txt{text-decoration: underline;}

@media screen and (max-width: 850px){
#column > .wrap .inner800{ flex-direction: column-reverse; justify-content: center;}
#column > .wrap .list-box#c{ width: 100%;}
#column > .wrap .list-box#n { width: 100%; margin-bottom: 50px;}

#column > .wrap.tit .inner800 p a{ font-size: 11px;}
}
@media screen and (max-width: 700px){
#column > .wrap #column-list li a{ padding:10px;}
#column > .wrap #column-list li a .text{ flex-direction: column; padding: 10px 10px 10px 30px;}
#column > .wrap #column-list li a .text h4{ width: 100%; margin: 0; flex-direction: row; align-items: center;}
#column > .wrap #column-list li a .text h4 .date{ margin: 0 10px 0 0; font-weight: 400; font-size: 12px;}
}
@media screen and (max-width: 600px){
#column > .wrap .inner800 .list-box .tit{ align-items: center;}
#column > .wrap .inner800 .list-box .tit h2{ flex-direction: column; align-items: flex-start; padding-right: 15px;}
#column > .wrap .inner800 .list-box .tit h2 .jpn{ margin-bottom: 0;}
#column > .wrap .inner800 .list-box .tit p a{ background: #fff; border: solid 1px #ccc; color: #777;}
/**/
#column > .wrap #column-list{ padding: 10px 5px 10px 0;}
#column > .wrap.tit .inner800{ align-items: baseline;}
#column > .wrap.tit .inner800 p a{ display: block; padding: 4px 10px;}
#column > .wrap.tit .inner800 h2{ flex-direction: column; justify-content: flex-start;}
#column > .wrap.tit .inner800 h2 .en, 
#column > .wrap.tit .inner800 h2 .en *{ font-size: 6.0vw; font-weight: bold;}
#column > .wrap.tit .inner800 h2 .jpn{width: 100%; }
#column > .wrap.tit .inner800 h2 .jpn, 
#column > .wrap.tit .inner800 h2 .jpn *{ font-size: 2.0vw;}
#column > .wrap #column-list li a .image{ width: 80px;}
#column > .wrap #column-list li a .text p{ font-size: 13px;}
}