@charset "UTF-8";
@media screen and (min-width: 768px),print {

/* =================================================   
   #contentsmain
   ================================================= */
#contentsmain {margin: 0 auto 13.4rem;position: relative;max-width: 880px;}
#contentsmain .inner-Box {margin: 0 auto;position: relative;padding: 9.3rem 4rem 0;}
#contentsmain .inner-Box p.text {font-size: 1.6rem;line-height: 2.4;font-weight: 500;letter-spacing: 0rem;margin-bottom: 1.7rem;position: relative;}

/* =================================================   
   #contentsgallery-list
   ================================================= */
#contentsgallery-list {margin: 0 auto 12.1rem;position: relative;padding: 0 5vw;max-width: 1360px;}
#contentsgallery-list .inner-Box { margin: 0 auto; position: relative; }

/* リスト構造 */
#contentsgallery-list .inner-Box ul.systemlist {display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-bottom: 18px;}
#contentsgallery-list .inner-Box ul.systemlist li.box {position: relative;margin-right: 6.6%;width: 46.7%;margin-bottom: 5.2rem;}
#contentsgallery-list .inner-Box ul.systemlist li.box:nth-child(2n) { margin-right: 0px; }
#contentsgallery-list .inner-Box ul.systemlist li.box a {  }
#contentsgallery-list .inner-Box ul.systemlist li.box a:hover {  }

/* フィギュア・画像 */
#contentsgallery-list .inner-Box ul.systemlist li.box figure.figbo {width: 100%;aspect-ratio: 56 / 38;position: relative;top: 0;left: 0;margin-bottom: 1.4rem;}
#contentsgallery-list .inner-Box ul.systemlist li.box figure.figbo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* データテキストエリア */
#contentsgallery-list .inner-Box ul.systemlist li.box .data { margin: 0 auto; position: relative; }
#contentsgallery-list .inner-Box ul.systemlist li.box .data h3 {font-size: 2rem;line-height: 1.75;font-weight: 500;letter-spacing: 0rem;margin-bottom: 0.8rem;position: relative;}
#contentsgallery-list .inner-Box ul.systemlist li.box .data p.text {font-size: 1.4rem;line-height: 2;font-weight: 400;letter-spacing: 0.028rem;position: relative;}
#contentsgallery-list .inner-Box ul.systemlist li.box .data p.cate { font-size: 1.4rem; line-height: 2; font-weight: 500; letter-spacing: 0.028rem; margin-bottom: 3rem; position: relative; }

/* 装飾要素 */
#contentsgallery-list .inner-Box ul.systemlist li.box span.arr {display: block;line-height: 1;position: absolute;bottom: 1.3rem;right: 0.8rem;transition: all 0.3s ease-in-out;}
#contentsgallery-list .inner-Box ul.systemlist li.box span.arr img {  }
#contentsgallery-list .inner-Box ul.systemlist li.box a:hover span.arr { right: 0; }

#contentsbottom {margin: 0 auto 18rem;position: relative;max-width: 1280px;padding: 0 4rem;}
#contentsbottom .inner-Box{border-top: #D6D6D6 1px solid;position: relative;padding: 5.9rem 0 0;}
#contentsbottom .inner-Box::before{content: "";display: block;background: #0097A3;width: 120px;height: 1px;position: absolute;top: -1px;left: 0;}
#contentsbottom .inner-Box h2{font-size: 2.4rem;line-height: 1.25;letter-spacing: 0;margin-bottom: 5.7rem;font-weight: 500;}
#contentsbottom .inner-Box ul{display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#contentsbottom .inner-Box ul li {position: relative;width: 46.7%;margin-right: 6.6%;}
#contentsbottom .inner-Box ul li:nth-child(2n) { margin-right: 0px; }
#contentsbottom .inner-Box ul li a {display: block;height: 180px;background: #EEF7F9;position: relative;padding: 68px 10px 0 221px;}
#contentsbottom .inner-Box ul li a:hover {  }
#contentsbottom .inner-Box figure.figbo { position: absolute; top: 0; left: 0; }
#contentsbottom .inner-Box figure.figbo img{  }
#contentsbottom .inner-Box p.ltext {font-weight: 500;margin-bottom: 3rem;position: relative;font-size: 1.4rem;line-height: 1.5;letter-spacing: 0;}
#contentsbottom .inner-Box p.ltext span.f-en {font-size: 1.8rem;line-height: 1;letter-spacing: 0.144rem;display: block;margin-bottom: 10px;}
#contentsbottom .inner-Box ul li .arr{position: absolute;bottom: 23px;right: 22px;transition: all 0.3s ease-in-out;}
#contentsbottom .inner-Box ul li a:hover .arr{  right: 10px;}

#ttlbox .inner-Box h1 .en{line-height: 1.6;letter-spacing: 0;margin: 10px 0 17px;width: 27.44vw;max-width: 45rem;}
#ttlbox .inner-Box h1 .jp::before{ display: none;}
#ttlbox .inner-Box h1 .jp{ font-size: 1.4rem; line-height: 1.5; letter-spacing: 0.056rem; padding: 0;}

.single-page-gallery{padding: 0 4rem;margin: 0 auto;max-width: 1200px;}
.gallery-box{padding-top: 12rem;}
.gallery-box h2{font-size: 4rem;line-height: 1;letter-spacing: 0.24rem;text-align: center;margin-bottom: 5.2rem;}
.gallery-box ul{ display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.gallery-box ul li{width: 18.9%;margin-right: 1.3%;margin-bottom: 2.6rem;}
.gallery-box ul li:nth-child(5n){margin-right: 0;}
.gallery-box ul li .incap {width: 100%;aspect-ratio: 1 / 1;overflow: hidden;text-align: center;margin-bottom: 7px;position: relative;}
.gallery-box ul li .incap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-box ul li dd{font-size: 1.3rem;line-height: 1.5;letter-spacing: 0.026rem;}

#syscon{padding: 0 4rem 16rem;background: url(../images/gallery/wyback01.jpg)no-repeat top center;background-size: 100% auto;margin: 11.4rem 0 0;padding-top: 13.2rem;}
#syscon .wysiwyg{max-width: 800px;margin: 0 auto;padding-top: 10px;}

}
@media screen and (min-width:768px) and ( max-width:1919px) {
#syscon{background-size: 1920px auto; }

}


@media screen and (max-width: 767px) {
/* =================================================   
   #contentsmain
   ================================================= */
#contentsmain {margin: 0 auto 11.7vw;position: relative;}
#contentsmain .inner-Box {margin: 0 6.4vw;position: relative;padding: 1.4vw 0 0 0;}
#contentsmain .inner-Box p.text {font-weight: 500;margin-bottom: 1.7rem;position: relative;font-size: 4vw;line-height: 2;letter-spacing: 0;}

/* =================================================   
   #contentsgallery-list
   ================================================= */
#contentsgallery-list {position: relative;padding: 0 2.2vw;margin-bottom: 17vw;}
#contentsgallery-list .inner-Box { margin: 0 4vw; position: relative; }

/* リスト構造 */
#contentsgallery-list .inner-Box ul.systemlist {display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-bottom: 3.15vw;}
#contentsgallery-list .inner-Box ul.systemlist li.box {position: relative;margin-right: 4.9%;width: 47.5%;margin-bottom: 5.3vw;}
#contentsgallery-list .inner-Box ul.systemlist li.box:nth-child(2n) { margin-right: 0.0vw; }
#contentsgallery-list .inner-Box ul.systemlist li.box a {display: block;padding-bottom: 8.4vw;}
#contentsgallery-list .inner-Box ul.systemlist li.box a:hover {  }

/* フィギュア・画像 */
#contentsgallery-list .inner-Box ul.systemlist li.box figure.figbo {width: 100%;aspect-ratio: 56 / 38;position: relative;top: 0;left: 0;margin-bottom: 2.6vw;}
#contentsgallery-list .inner-Box ul.systemlist li.box figure.figbo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* データテキストエリア */
#contentsgallery-list .inner-Box ul.systemlist li.box .data {position: relative;}
#contentsgallery-list .inner-Box ul.systemlist li.box .data h3 {font-weight: 500;position: relative;font-size: 3.47vw;line-height: 1.5;letter-spacing: 0;}
#contentsgallery-list .inner-Box ul.systemlist li.box .data p.text {font-weight: 400;position: relative;font-size: 2.93vw;line-height: 1.5;letter-spacing: 0.06vw;}
#contentsgallery-list .inner-Box ul.systemlist li.box .data p.cate {font-weight: 500;margin-bottom: 0vw;position: relative;font-size: 2.93vw;line-height: 1.5;letter-spacing: 0.06vw;}

/* 装飾要素 */
#contentsgallery-list .inner-Box ul.systemlist li.box span.arr {display: block;line-height: 1;position: absolute;bottom: 1.3vw;right: 0vw;transition: all 0.3s ease-in-out;width: 5vw;}
#contentsgallery-list .inner-Box ul.systemlist li.box span.arr img {  }
#contentsgallery-list .inner-Box ul.systemlist li.box a:hover span.arr { right: 0; }

#contentsbottom {margin: 0 auto 13vw;position: relative;padding: 0 6.6vw;}
#contentsbottom .inner-Box{border-top: #D6D6D6 0.24vw solid;position: relative;padding: 6.7vw 0 0;}
#contentsbottom .inner-Box::before{content: "";display: block;background: #0097A3;width: 15.79vw;height: 0.24vw;position: absolute;top: 0vw;left: 0;}
#contentsbottom .inner-Box h2{margin-bottom: 0vw;font-size: 4.8vw;line-height: 1.5;letter-spacing: 0;margin-bottom: 8vw;font-weight: 500;}
#contentsbottom .inner-Box ul{display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#contentsbottom .inner-Box ul li {position: relative;width: 100%;margin-bottom: 3.9vw;}
#contentsbottom .inner-Box ul li:nth-child(2n) { margin-right: 0.0vw; }
#contentsbottom .inner-Box ul li a {display: block;height: 32.28vw;background: #EEF7F9;position: relative;padding: 10.43vw 2.42vw 0 27.88vw;}
#contentsbottom .inner-Box ul li a:hover {  }
#contentsbottom .inner-Box figure.figbo {position: absolute;top: 0;left: 0;width: 21.5vw;}
#contentsbottom .inner-Box figure.figbo img{  }
#contentsbottom .inner-Box p.ltext {font-weight: 500;margin-bottom: 3rem;position: relative;font-size: 3.38vw;line-height: 1.5;letter-spacing: 0;}
#contentsbottom .inner-Box p.ltext span.f-en {font-size: 3.85vw;line-height: 1;letter-spacing: 0.35vw;display: block;margin-bottom: 3.02vw;}
#contentsbottom .inner-Box ul li .arr{position: absolute;bottom: 4.26vw;width: 5.1vw;right: 4.11vw;transition: all 0.3s ease-in-out;}
#contentsbottom .inner-Box ul li a:hover .arr{  right: 2.42vw;}

#ttlbox .inner-Box h1 .en{margin: 2.42vw 0 4.11vw;font-size: 6.63vw;line-height: 1;letter-spacing: 0.51vw;}
#ttlbox .inner-Box h1 .jp::before{ display: none;}
#ttlbox .inner-Box h1 .jp{ font-size: 3.38vw; line-height: 1.5; letter-spacing: 0.14vw; padding: 0;}

.single-page-gallery{margin: 0 6.2vw;}
.gallery-box{ }
.gallery-box h2{text-align: center;margin-bottom: 7.5vw;font-size: 6.4vw;line-height: 1.5;letter-spacing: 0.38vw;}
.gallery-box ul{ display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.gallery-box ul li{width: 47.6%;margin-right: 4.8%;margin-bottom: 2.6rem;}
.gallery-box ul li:nth-child(2n){margin-right: 0;}
.gallery-box ul li .incap {width: 100%;aspect-ratio: 1 / 1;overflow: hidden;text-align: center;margin-bottom: 1.69vw;position: relative;}
.gallery-box ul li .incap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-box ul li dd{font-size: 3.2vw;line-height: 1.5;letter-spacing: 0.06vw;}

#syscon{padding: 0 2.4vw 16vw;background: url(../images/gallery/wyback01.jpg)no-repeat top center;background-size: 100% auto;margin: 11vw 0 0;padding-top: 12.4vw;}
#syscon .wysiwyg{margin: 0 4vw;padding-top: 2.42vw;}
}