@charset "UTF-8";

@media screen and (min-width: 768px),print {

.seo_bread_list { margin-bottom: 18px; color: #fff; }
.seo_bread_list a { color: #fff; }
.seo_bread_list img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }

#contentsmain .kavadas {position: absolute;top: 598px;right: -88px;transform: translate(30px, 30px);opacity: 0;animation: kavadas-pop 0.3s ease-out forwards;animation-delay: 0.1s;}

#contentsmain {margin: 0 auto;position: relative;background: url('../images/abashiri/contentsmain-back01.jpg')no-repeat top 993px left,url('../images/abashiri/contentsmain-back02.jpg')no-repeat top 992px right #1788A0;padding: 13.5rem 4rem 17.2rem;overflow: hidden;}
#contentsmain .inner-Box1 {background: url(../images/abashiri/contentsmain-back00.jpg)no-repeat top center;margin: 0 auto 30px;position: relative;max-width: 1820px;height: 858px;text-align: center;padding: 307px 0 0;border-radius: 20px;overflow: hidden;}
#contentsmain .inner-Box1 h1 img, #contentsmain .inner-Box1 h2 img{ width: 100%; height: auto;}
#contentsmain .inner-Box1 h1, #contentsmain .inner-Box1 h2 { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 0.8s ease-out; }
#contentsmain .inner-Box1 h1 { margin: 0 auto 20px; width: 66.1rem; }
#contentsmain .inner-Box1 h2 { transition-delay: 0.8s; margin: 0 auto 20px; width: 66.1rem; }

#contentsmain .inner-Box1 h1.is-visible, #contentsmain .inner-Box1 h2.is-visible { clip-path: inset(0 0% 0 0); display: block; }
#contentsmain .inner-Box2 {margin: 0 auto;position: relative;color: #fff;max-width: 1100px;}
#contentsmain .inner-Box2 h2 {text-align: center;padding: 20px 0 0;}
#contentsmain .inner-Box2 h2 span{  }
#contentsmain .inner-Box2 h2 img {  }
#contentsmain .inner-Box2 span.icon01 {display: inline-block;line-height: 1;position: relative;left: 23px;top: -7px;}
#contentsmain .inner-Box2 span.icon01 img {  }
#contentsmain .inner-Box2 h3 {font-size: 1.8rem;line-height: 1.75;font-weight: 700;letter-spacing: 0.36rem;margin-bottom: 17px;position: relative;text-align: center;}
#contentsmain .inner-Box2 span.icon02 {display: inline-block;line-height: 1;transform: rotate(180deg);transform-origin: center;position: relative;top: -6px;left: -23px;}
#contentsmain .inner-Box2 span.icon02 img {  }
#contentsmain .inner-Box2 p.text {font-size: 1.6rem;line-height: 3;font-weight: 400;letter-spacing: 0.16rem;margin-bottom: 59px;position: relative;text-align: center;}
#contentsmain .inner-Box2 ul.list {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;}
#contentsmain .inner-Box2 ul li {position: relative;width: 31.5%;margin-right: 2.7%;}
#contentsmain .inner-Box2 ul li:nth-child(3n) { margin-right: 0px; }
#contentsmain .inner-Box2 figure.photo {position: relative;top: 0;left: 0;border-radius: 10px;overflow: hidden;margin-bottom: 12px;}
#contentsmain .inner-Box2 figure.photo img{width: 100%;height: auto;}
#contentsmain .inner-Box2 h4 {font-size: 1.8rem;line-height: 1.75;font-weight: 700;letter-spacing: 0.18rem;margin-bottom: 11px;position: relative;}
#contentsmain .inner-Box2 p.ltext {font-size: 1.4rem;line-height: 1.5;font-weight: 400;letter-spacing: 0.14rem;margin-bottom: 59px;position: relative;}

#contents01 {margin: 0 auto 240px;position: relative;}
#contents01::before{content: "";display: block;width: 100%;height: 116px;background: url(../images/abashiri/contents01-back00.svg)no-repeat top center;position: absolute;top: -112px;left: 0;background-size: 100% auto;}

#contents01 .inner-Box {margin: 0 auto;position: relative;text-align: center;}
#contents01 .inner-Box::before{content: "";display: block;width: 54rem;height: 28.1rem;position: absolute;top: 116px;left: 0;background: url(../images/abashiri/contents01-icon02.svg)no-repeat top left;background-size: 100% auto;}
#contents01 .inner-Box::after{content: "";display: block;width: 54.7rem;height: 27rem;position: absolute;top: 496px;right: 0;background: url(../images/abashiri/contents01-icon03.svg)no-repeat top left;background-size: 100% auto;}
#contents01 .inBox {margin: 0 auto;position: relative;max-width: 800px;padding: 61px 0 0;}
#contents01 .inner-Box span.abashiri100 {display: block;line-height: 1;position: absolute;top: 5px;left: -154px;}
#contents01 .inner-Box span.abashiri100 img {  }
#contents01 .inner-Box h2 {position: relative;left: 13px;margin-bottom: 64px;}
#contents01 .inner-Box h2 span{  }
#contents01 .inner-Box h2 img {  }
#contents01 .inner-Box figure.img01 {position: absolute;top: 364px;right: -21px;}
#contents01 .inner-Box figure.img01 img{  }
#contents01 .inner-Box figure.img02 {position: absolute;top: 460px;left: -100px;}
#contents01 .inner-Box figure.img02 img{  }
#contents01 .inner-Box figure.img03 {position: absolute;top: 507px;right: -100px;z-index: 4;}
#contents01 .inner-Box figure.img03 img{  }
#contents01 .inner-Box figure.photo01 {position: absolute;top: 140px;right: -93px;}
#contents01 .inner-Box figure.photo01 img{  }
#contents01 .inner-Box figure.photo02 {position: absolute;top: 214px;left: -115px;}
#contents01 .inner-Box figure.photo02 img{  }
#contents01 .inner-Box p.text {font-size: 1.6rem;line-height: 3;font-weight: 500;letter-spacing: 0.16rem;margin-bottom: 33px;position: relative;}
#contents01 .inner-Box2 {margin: 0 auto;position: relative;max-width: 800px;padding: 0 3rem;}
#contents01 .inner-Box2 ul.cate-list { cursor: pointer; 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;justify-content: center;padding: 0;}
#contents01 .inner-Box2 ul li {margin: 0 1rem 1rem;}
#contents01 .inner-Box2 p.ctext {position: relative;border: 1px solid #000000;border-radius: 21px;font-size: 1.4rem;padding: 0.1rem 1.3rem;font-size: 1.6rem;line-height: 2;font-weight: 700;letter-spacing: 0.16rem;position: relative;transition: all 0.3s ease-in-out;}
#contents01 .inner-Box2 .active{ background: #1788A0; color: #fff; }
#contents01 .inner-Box2 p:hover{ background: #1788A0; color: #fff; }

#contents01 .inner-Box3 {margin: 0 auto;position: relative;padding: 0 4rem;}

#contents01 .inner-Box3 .flip-item { opacity: 1; transition: opacity 0.25s ease; }
#contents01 .inner-Box3 .flip-item.is-hidden { opacity: 0; pointer-events: none; }
#contents01 .inner-Box3 .flip-item.is-none { display: none; }
#contents01 .inner-Box3 .flip-list { position: relative; transition: min-height 0.2s ease; }
#contents01 .inner-Box3 .flip-list {list-style: none;padding: 0;margin: 50px auto 30px auto;max-width: 1100px;display: flex;justify-content: flex-start;gap: 1.7%;flex-wrap: wrap;}
#contents01 .inner-Box3 .flip-item {width: calc(26.3% - 2.6%);min-height: 315px;perspective: 1000px;cursor: pointer;margin-bottom: 20px;}
#contents01 .inner-Box3 .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; }
#contents01 .inner-Box3 .flip-item.is-flipped .flip-card-inner { transform: rotateY(180deg); }
#contents01 .inner-Box3 .face {position: absolute;width: 100%;height: 100%;top: 0;left: 0;backface-visibility: hidden;border-radius: 10px;display: flex;flex-direction: column;align-items: center;/* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */padding: 1.4rem;/* position: relative; */}
#contents01 .inner-Box3 .face.front {background-color: #F6F4F1;color: #333;}
#contents01 .inner-Box3 .face.front .number {font-size: 4.1rem;letter-spacing: 0.41rem;font-weight: bold;color: #4a8db7;margin-bottom: 2rem;}
#contents01 .inner-Box3 .face.front .title {font-size: 2rem;letter-spacing: 0.2rem;font-weight: bold;color: #333;margin-bottom: 3rem;}
#contents01 .inner-Box3 .face.front .title span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#contents01 .inner-Box3 .face.front .click-hint {color: #4a8db7;font-weight: bold;font-size: 1.2rem;letter-spacing: 0.24rem;position: absolute;bottom: 26px;left: 50%;transform: translateX(-50%);}
#contents01 .inner-Box3 .face.front .click-hint .arrow-down{width: 3.3rem;height: 3.3rem;display: block;margin: 6px auto 0 auto;background: #1788A0;border-radius: 50%;padding-top: 0.3rem;transform: rotate(90deg);transform-origin: center;}

/* --- 裏面のデザイン --- */
#contents01 .inner-Box3 .face.back { background-color: #4a8db7; color: white; transform: rotateY(180deg); padding: 20px; box-sizing: border-box; }
#contents01 .inner-Box3 .face.back figure { width: 90%; margin: 0 0 15px 0; overflow: hidden; border-radius: 10px; }
#contents01 .inner-Box3 .face.back img { width: 100%; height: auto; display: block; }
#contents01 .inner-Box3 .face.back .description {font-size: 1.4rem;letter-spacing: 0.14rem;line-height: 1.8;text-align: left;width: 90%;margin-bottom: 1rem;}
#contents01 .inner-Box3 .face.back .description span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
#contents01 .inner-Box3 .face.back .detail-btn::before{content: "";display: inline-block;width: 20px;height: 20px;background: url(../images/works/zoom.svg)no-repeat top center;background-size: 100% auto;position: relative;top: 4px;}

.abashiri-modal{width: 700px;margin: 0 auto;background: #F6F4F1;padding: 4rem;border-radius: 20px;position: relative;}
.modal-inner .modal-title{font-size: 2rem;font-weight: bold;margin-bottom: 2rem;}
.modal-inner .modal-image{overflow: hidden;border-radius: 20px;margin-bottom: 2rem;}
.modal-inner .modal-image img{ width: 100%; height: auto; }
.abashiri-modal .mfp-close{position: absolute;top: 10px;right: 10px;padding: 0;}
#contents01 .smorebtn2 {text-align: center;cursor: pointer;transition: opacity 0.3s;width: 155px;height: 36px;margin: 0 auto;border: 1px solid #000000;border-radius: 21px;background: #E9E7DE;font-weight: bold;padding-top: 4px;}
#contents01 .smorebtn2.disabled { opacity: 0.3; pointer-events: none; }

#news-contents {background: #E9E7DE;padding: 2px 0 193px;position: relative;}
#news-contents::before{content: "";display: block;width: 100%;height: 130px;background: url(../images/abashiri/contents02-back00.svg)no-repeat top center;background-size: 100%;position: absolute;top: -129px;}
#news-contents::after{content: "";display: block;width: 146.1rem;height: 10.1rem;background: url(../images/abashiri/contents02-icon01.svg)no-repeat top center;background-size: 100% auto;position: absolute;top: -92px;left: 50%;transform: translateX(-50%);}

#contents02 { margin: 0 auto; position: relative; }
#contents02 .inner-Box{ margin: 0 auto; position: relative; padding: 23px 4rem 0 4rem; max-width: 1180px; }
#contents02 .book-Box{position: relative;float: left;width: 50%;margin-right: 6.4%;}
#contents02 .back-Box{position: relative;background: url('../images/abashiri/contents02-back01.png')no-repeat top center;background-size: 100% 100%;margin-bottom: 23px;height: 38rem;}
#contents02 .book-Box h2 {text-align: center;padding: 7.2rem 6rem 3rem 9.9rem;}
#contents02 .book-Box h2 span{  }
#contents02 .book-Box h2 img {width: 100%;max-width: 423px;}
#contents02 .book-Box p.text {font-size: 1.6rem;line-height: 2;font-weight: 500;letter-spacing: 0.32rem;position: relative;text-align: center;}
#contents02 .book-Box p.text2 {font-size: 1.2rem;line-height: 2;font-weight: 400;letter-spacing: 0.12rem;margin-bottom: 30px;position: relative;text-align: center;}
#contents02 .right-Box {position: relative;float: left;width: 43.4%;padding-top: 24px;}
#contents02 .right-Box span.pickup {display: block;line-height: 1;position: absolute;top: -6px;left: -25px;z-index: 3;}
#contents02 .right-Box span.pickup img {  }

#contents02 .right-Box ul.systemlist {margin-bottom: 1.5rem;}
#contents02 .right-Box ul.systemlist li {position: relative;width: 100%;}
#contents02 .right-Box ul.systemlist li a {  }
#contents02 .right-Box ul.systemlist li a:hover {  }
#contents02 .right-Box ul.systemlist li .systemphoto-box{position: relative;overflow: hidden;margin-bottom: 12px;}
#contents02 .right-Box ul.systemlist .photo {width: 100%;aspect-ratio: 347 / 217;overflow: hidden;text-align: center;/* margin-bottom: 15px; */position: relative;border-radius: 1rem;}
#contents02 .right-Box ul.systemlist .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#contents02 .right-Box ul.systemlist a.link-arr .post-arrow {position: absolute;width: 6.7rem;height: 6.7rem;bottom: 0;top: auto;right: 0px;overflow: visible;background: #E9E7DE;border-radius: 1rem 0 0 0;}
#contents02 .right-Box ul.systemlist a.link-arr .post-arrow .arrow-bg {position: absolute;width: 4.5rem;height: 4.5rem;top: 1.1rem;left: 1.6rem;background: #1788A0;border: none;border-radius: 50%;opacity: 1;/* transform: translate(-50%, -50%) scale(0.5); *//* transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease; */z-index: 0}
#contents02 .right-Box ul.systemlist a.link-arr .post-arrow .arrow-icon {position: absolute;top: 50%;left: 70%;width: 3.4rem;height: auto;transform: translate(-50%, -50%);transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;z-index: 1}
#contents02 .right-Box ul.systemlist a.link-arr:hover .arrow-icon.default { transform: translate(100%, -50%); opacity: 0 }
#contents02 .right-Box ul.systemlist a.link-arr:hover .arrow-icon.next { left: -14px; transform: translate(100%, -50%); opacity: 1 }


#contents02 .right-Box p.systemcate {font-size: 1.4rem;line-height: 2;font-weight: 400;letter-spacing: 0.14rem;margin-bottom: 8px;position: relative;text-align: left;}
#contents02 .right-Box p.systemcate span {display: inline-block;background: #C4C4C4;border-radius: 2rem;padding: 0.1rem 1.2rem;font-size: 1.2rem;margin: 0 0.5rem 0.5rem 1rem;}
#contents02 .right-Box h3.systemttl {font-size: 1.6rem;line-height: 1.5;font-weight: 500;letter-spacing: 0.16rem;margin-bottom: 30px;position: relative;text-align: left;}
#contents02 .right-Box h3.systemttl span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}

#news-contents .inner-Boxnl p.smorebtn span {cursor: pointer;display: inline-block;width: 15.5rem;height: 3.6rem;border: 1px solid #000000;border-radius: 21px;padding-top: 0.5rem;transition: all 0.3s ease-in-out;font-size: 1.4rem;font-weight: bold;}
#news-contents .inner-Boxnl p.smorebtn span:hover {background: #fff;}


#news-contents .inner-Boxnl {margin: 0 auto;position: relative;text-align: center;padding: 0 4rem;max-width: 1180px;}
#news-contents .inner-Boxnl 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: 1.5rem;}
#news-contents .inner-Boxnl ul.systemlist li {position: relative;width: 31.5%;margin-right: 2.7%;}
#news-contents .inner-Boxnl ul.systemlist li:nth-child(3n) { margin-right: 0px; }
#news-contents .inner-Boxnl ul.systemlist li a {  }
#news-contents .inner-Boxnl ul.systemlist li a:hover {  }
#news-contents .inner-Boxnl ul.systemlist li .systemphoto-box{position: relative;overflow: hidden;margin-bottom: 12px;}
#news-contents .inner-Boxnl ul.systemlist .photo {width: 100%;aspect-ratio: 347 / 217;overflow: hidden;text-align: center;/* margin-bottom: 15px; */position: relative;border-radius: 1rem;}
#news-contents .inner-Boxnl ul.systemlist .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

#news-contents .inner-Boxnl p.systemcate {font-size: 1.4rem;line-height: 2;font-weight: 400;letter-spacing: 0.14rem;margin-bottom: 8px;position: relative;text-align: left;}
#news-contents .inner-Boxnl p.systemcate span {display: inline-block;background: #C4C4C4;border-radius: 2rem;padding: 0.1rem 1.2rem;font-size: 1.2rem;margin: 0 0.5rem 0.5rem 1rem;}
#news-contents .inner-Boxnl h3.systemttl {font-size: 1.6rem;line-height: 1.5;font-weight: 500;letter-spacing: 0.16rem;margin-bottom: 30px;position: relative;text-align: left;}
#news-contents .inner-Boxnl h3.systemttl span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}



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

#contents01::before{background-size: 1920px auto;}
#contents02 {background-size: 1920px auto;}
#news-contents::before{background-size: 1920px auto;}
#news-contents::after{width: 76.09vw;}
}

@media screen and (min-width:768px) and ( max-width:1160px) {
#contentsmain::before{top: -6vw;}
	



	
}


@media screen and (max-width: 767px) {


    .seo_bread_list {margin: 0 5vw 4.8vw;color: #fff;}
    .seo_bread_list a { color: #fff; }
    .seo_bread_list img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
    
    #contentsmain .kavadas {position: absolute;top: 51.4vw;width: 36.7vw;right: -16vw;transform: translate(8.0vw, 8.0vw);opacity: 0;animation: kavadas-pop 0.3s ease-out forwards;animation-delay: 0.1s;}
    
    #contentsmain {position: relative;background: url('../images/abashiri/contentsmain-back01.jpg')no-repeat top 113.4vw left,url('../images/abashiri/contentsmain-back02.jpg')no-repeat bottom -8vw right #1788A0;padding: 8.1vw 5.2vw 7vw 5.2vw;overflow: hidden;background-size: 100% auto;}
    #contentsmain .inner-Box1 {background: url(../images/abashiri/sp-h1.jpg)no-repeat top center;margin: 0 auto -0.5vw;position: relative;text-align: center;padding: 30.57vw 0 0;border-radius: 5.33vw;overflow: hidden;background-size: 100% auto;height: 89.5vw;}
    #contentsmain .inner-Box1 h1 img, #contentsmain .inner-Box1 h2 img{ width: 100%; height: auto;}
    #contentsmain .inner-Box1 h1, #contentsmain .inner-Box1 h2 { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 0.8s ease-out; }
    #contentsmain .inner-Box1 h1 {margin: 0 5.4vw 2.63vw 9vw;}
    #contentsmain .inner-Box1 h2 {transition-delay: 0.8s;margin: 0 7.8vw 5.33vw 5.8vw;}
    
    #contentsmain .inner-Box1 h1.is-visible, #contentsmain .inner-Box1 h2.is-visible { clip-path: inset(0 0% 0 0); display: block; }
    #contentsmain .inner-Box2 {margin: -9vw 0vw 0;position: relative;color: #fff;padding-bottom: 16vw;}
    #contentsmain .inner-Box2 h2 {text-align: center;padding: 5.33vw 0 4.1vw;}
    #contentsmain .inner-Box2 h2 span{  }
    #contentsmain .inner-Box2 h2 img {  }
    #contentsmain .inner-Box2 span.icon01 {display: inline-block;line-height: 1;position: absolute;left: 13.13vw;top: -1.4vw;width: 11vw;}
    #contentsmain .inner-Box2 span.icon01 img {  }
    #contentsmain .inner-Box2 h3 {font-size: 4.27vw;line-height: 1.9;font-weight: 700;letter-spacing: 0.85vw;margin-bottom: 4.73vw;position: relative;text-align: center;}
    #contentsmain .inner-Box2 span.icon02 {display: inline-block;line-height: 1;transform: rotate(180deg);transform-origin: center;position: absolute;top: -1.6vw;right: 13.6vw;width: 10.5vw;}
    #contentsmain .inner-Box2 span.icon02 img {  }
    #contentsmain .inner-Box2 p.text {font-size: 3.73vw;line-height: 2.5;font-weight: 400;letter-spacing: 0.75vw;margin-bottom: 8.83vw;position: relative;margin-right: 1vw;}
    #contentsmain .inner-Box2 ul.list {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;}
    #contentsmain .inner-Box2 ul li {position: relative;width: 100%;margin-bottom: -0.3vw;}
    #contentsmain .inner-Box2 ul li:nth-child(3n) { margin-right: 0.0vw; }
    #contentsmain .inner-Box2 figure.photo {position: relative;top: 0;left: 0;border-radius: 2.67vw;overflow: hidden;margin-bottom: 3.2vw;}
    #contentsmain .inner-Box2 figure.photo img{width: 100%;height: auto;}
    #contentsmain .inner-Box2 h4 {font-size: 4.8vw;line-height: 1.75;font-weight: 700;letter-spacing: 0.48vw;margin-bottom: 2.93vw;position: relative;}
    #contentsmain .inner-Box2 p.ltext {font-size: 3.73vw;line-height: 1.5;font-weight: 400;letter-spacing: 0.37vw;margin-bottom: 8.73vw;position: relative;}
    
    #contents01 {margin: 0 auto 16vw;position: relative;}
    #contents01::before{content: "";display: block;width: 100%;height: 30.93vw;background: url(../images/abashiri/contents01-back00.svg)no-repeat top center;position: absolute;top: -5.3vw;left: 0;background-size: 100% auto;}
    
    #contents01 .inner-Box {position: relative;text-align: center;}
    #contents01 .inner-Box::before{content: "";display: block;width: 59vw;height: 31vw;position: absolute;top: 87.73vw;left: -9vw;background: url(../images/abashiri/contents01-icon02.svg)no-repeat top left;background-size: 100% auto;}
    #contents01 .inner-Box::after{content: "";display: block;width: 62.7vw;height: 32vw;position: absolute;top: 123vw;right: -5vw;background: url(../images/abashiri/contents01-icon03.svg)no-repeat top left;background-size: 100% auto;}
    #contents01 .inBox {position: relative;padding: 21.27vw 0 0;}
    #contents01 .inner-Box span.abashiri100 {display: block;line-height: 1;position: absolute;top: 7.83vw;left: 4.7vw;width: 56.2vw;}
    #contents01 .inner-Box span.abashiri100 img {width: 100%;}
    #contents01 .inner-Box h2 {position: relative;margin: 0 5.3vw 66.07vw 5.6vw;}
    #contents01 .inner-Box h2 span{  }
    #contents01 .inner-Box h2 img {  }
    #contents01 .inner-Box figure.img01 {position: absolute;top: 104.07vw;right: 24vw;width: 23vw;z-index: 3;}
    #contents01 .inner-Box figure.img01 img{  }
    #contents01 .inner-Box figure.img02 {position: absolute;top: 85vw;left: 4.9vw;width: 28.2vw;}
    #contents01 .inner-Box figure.img02 img{  }
    #contents01 .inner-Box figure.img03 {position: absolute;top: 129vw;right: 10vw;width: 24vw;}
    #contents01 .inner-Box figure.img03 img{  }
    #contents01 .inner-Box figure.photo01 {position: absolute;top: 79.33vw;right: 5vw;width: 43vw;}
    #contents01 .inner-Box figure.photo01 img{  }
    #contents01 .inner-Box figure.photo02 {position: absolute;top: 109.07vw;left: 5vw;width: 43.1vw;}
    #contents01 .inner-Box figure.photo02 img{  }
    #contents01 .inner-Box p.text {font-size: 3.73vw;line-height: 2.5;font-weight: 500;letter-spacing: 0.75vw;margin-bottom: 8.8vw;position: relative;}
    #contents01 .inner-Box2 {margin: 0 5.2vw 8vw;position: relative;}
    #contents01 .inner-Box2 ul.cate-list {cursor: pointer;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;padding: 0;}
    #contents01 .inner-Box2 ul li {margin: 0 2.6vw 3.1vw 0vw;}
    #contents01 .inner-Box2 p.ctext {position: relative;border: 0.27vw solid #000000;border-radius: 5.6vw;font-size: 3.20vw;padding: 0.7vw 5.4vw;line-height: 2;font-weight: 700;letter-spacing: 0.43vw;position: relative;transition: all 0.3s ease-in-out;}
    #contents01 .inner-Box2 .active{ background: #1788A0; color: #fff; }
    #contents01 .inner-Box2 p:hover{ background: #1788A0; color: #fff; }
    
    #contents01 .inner-Box3 {margin: 0 4.4vw 0 5.2vw;position: relative;}
    
    #contents01 .inner-Box3 .flip-item {height: 58.4vw; /* ←追加 */opacity: 1;transition: opacity 0.25s ease;}
    #contents01 .inner-Box3 .flip-item.is-hidden { opacity: 0; pointer-events: none; }
    #contents01 .inner-Box3 .flip-item.is-none { display: none; }
    #contents01 .inner-Box3 .flip-list { position: relative; transition: min-height 0.2s ease; }
    #contents01 .inner-Box3 .flip-list {list-style: none;padding: 0;margin: 7.43vw auto 8.0vw auto;display: flex;justify-content: flex-start;gap: 3.9%;flex-wrap: wrap;}
    #contents01 .inner-Box3 .flip-item {width: calc(47.2% - -0.4%);perspective: 53.4vw;cursor: pointer;margin-bottom: 5.33vw;height: 58.4vw;}
    #contents01 .inner-Box3 .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; }
    #contents01 .inner-Box3 .flip-item.is-flipped .flip-card-inner { transform: rotateY(180deg); }
    #contents01 .inner-Box3 .face {position: absolute;width: 100%;height: 100%;top: 0;left: 0;backface-visibility: hidden;border-radius: 2.67vw;display: flex;flex-direction: column;align-items: center;/* box-shadow: 0 1.07vw 2.13vw rgba(0,0,0,0.1); */padding: 2vw 3vw;/* position: relative; */}
    #contents01 .inner-Box3 .face.front {background-color: #F6F4F1;color: #333;}
    #contents01 .inner-Box3 .face.front .number {font-size: 6.67vw;letter-spacing: 1.09vw;font-weight: bold;color: #4a8db7;margin-bottom: 1vw;}
    #contents01 .inner-Box3 .face.front .title {font-size: 4.27vw;letter-spacing: 0.53vw;font-weight: bold;color: #333;margin-bottom: 3rem;}
    #contents01 .inner-Box3 .face.front .title span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
    #contents01 .inner-Box3 .face.front .click-hint {color: #4a8db7;font-weight: bold;font-size: 2.40vw;letter-spacing: 0.44vw;position: absolute;bottom: 4.03vw;left: 50%;transform: translateX(-50%);}
    #contents01 .inner-Box3 .face.front .click-hint .arrow-down{width: 7.20vw;height: 7.20vw;display: block;margin: 1vw auto 0vw auto;background: #1788A0;border-radius: 50%;padding: 1vw 2.5vw 0vw 2.3vw;transform: rotate(90deg);transform-origin: center;}
    
    /* --- 裏面のデザイン --- */
    #contents01 .inner-Box3 .face.back {height: 100%;  /* ←追加 */width: 100%;box-sizing: border-box;overflow-y: auto; /* ←スクロールで対応 */background-color: #4a8db7;color: white;transform: rotateY(180deg);padding: 3.33vw 3.93vw;box-sizing: border-box;}
    #contents01 .inner-Box3 .face.back figure {width: 100%;height: 22vw;overflow: hidden;text-align: center;margin-bottom: 15px;position: relative;border-radius: 2vw;}
    #contents01 .inner-Box3 .face.back figure img {width: 100%;height: 130%;object-fit: cover;display: block;}
    #contents01 .inner-Box3 .face.back img {width: 100%;height: 31vw;display: block;}
    #contents01 .inner-Box3 .face.back .description {font-size: 3.20vw;letter-spacing: 0.37vw;line-height: 1.8;text-align: left;margin-bottom: 1rem;}
    #contents01 .inner-Box3 .face.back .description span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
    #contents01 .inner-Box3 .face.back .detail-btn::before{content: "";display: inline-block;width: 5.33vw;height: 5.33vw;background: url(../images/works/zoom.svg)no-repeat top center;background-size: 100% auto;position: relative;top: 1.07vw;}
    
    .abashiri-modal{margin: 0 4vw;background: #F6F4F1;padding: 11vw 5vw 10vw;border-radius: 5.33vw;position: relative;}
    .modal-inner .modal-title{font-size: 4.33vw;font-weight: bold;margin-bottom: 2rem;}
    .modal-inner .modal-image{overflow: hidden;border-radius: 2.33vw;margin-bottom: 4vw;}
    .modal-inner .modal-image img{ width: 100%; height: auto; }
    .abashiri-modal .mfp-close{position: absolute;top: 2.67vw;right: 2.67vw;padding: 0;}
    #contents01 .smorebtn2 {text-align: center;cursor: pointer;transition: opacity 0.3s;height: 9.6vw;margin: 0 24vw;border: 0.27vw solid #000000;border-radius: 5.6vw;background: #E9E7DE;font-weight: bold;padding-top: 1.07vw;}
    #contents01 .smorebtn2.disabled { opacity: 0.3; pointer-events: none; }
    

    #news-contents {background: #E9E7DE;padding: 0.53vw 0 21.47vw;position: relative;}
    #news-contents::before{content: "";display: block;width: 100%;height: 34.67vw;background: url(../images/abashiri/contents02-back00.svg)no-repeat top center;background-size: 100%;position: absolute;top: -6vw;}
    #news-contents::after{content: "";display: block;width: 70vw;height: 21vw;background: url(../images/abashiri/sp-contents02-icon01.svg)no-repeat top center;background-size: 100% auto;position: absolute;top: -9vw;left: 49%;transform: translateX(-50%);}
    
    #contents02 {position: relative;}
    #contents02 .inner-Box{margin: 0 4vw;position: relative;padding-top: 14vw;}
    #contents02 .book-Box{position: relative;margin: 0 1.1vw 17.4vw -0.9vw;}
    #contents02 .back-Box{position: relative;background: url('../images/abashiri/contents02-back01.png')no-repeat top center;background-size: 100% 63vw;margin-bottom: -1.87vw;padding-bottom: 17.2vw;}
    #contents02 .book-Box h2 {text-align: center;margin: 0 12vw 1vw;padding: 8.7vw 0vw 0vw;}
    #contents02 .book-Box h2 span{  }
    #contents02 .book-Box h2 img {width: 100%;}
    #contents02 .book-Box p.text {font-size: 3.73vw;line-height: 2;font-weight: 500;letter-spacing: 0.37vw;position: relative;text-align: center;}
    #contents02 .book-Box p.text2 {font-size: 3.20vw;line-height: 1.8;font-weight: 400;letter-spacing: 0.32vw;margin: 0 0.6vw 8.0vw;position: relative;}
    #contents02 .right-Box {position: relative;margin: 0 -3vw;}
    #contents02 .right-Box span.pickup {display: block;line-height: 1;position: absolute;top: -10vw;left: 2vw;z-index: 3;width: 45vw;}
    #contents02 .right-Box span.pickup img {  }
    
    #contents02 .right-Box ul.systemlist {margin-bottom: 1.5rem;}
    #contents02 .right-Box ul.systemlist li {position: relative;width: 100%;}
    #contents02 .right-Box ul.systemlist li a {  }
    #contents02 .right-Box ul.systemlist li a:hover {  }
    #contents02 .right-Box ul.systemlist li .systemphoto-box{position: relative;overflow: hidden;margin-bottom: 3.2vw;}
    #contents02 .right-Box ul.systemlist .photo {width: 100%;aspect-ratio: 347 / 217;overflow: hidden;text-align: center;/* margin-bottom: 4.0vw; */position: relative;border-radius: 1rem;}
    #contents02 .right-Box ul.systemlist .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    
    #contents02 .right-Box p.systemcate {font-size: 3.73vw;line-height: 2;font-weight: 400;letter-spacing: 0.37vw;margin-bottom: 2.13vw;position: relative;text-align: left;}
    #contents02 .right-Box p.systemcate span {display: inline-block;background: #C4C4C4;border-radius: 2rem;padding: 0.1rem 1.2rem;font-size: 3.2vw;margin: 0 0.5rem 0.5rem 1rem;}
    #contents02 .right-Box h3.systemttl {font-size: 4.27vw;line-height: 1.5;font-weight: 500;letter-spacing: 0.43vw;margin-bottom: 8.0vw;position: relative;text-align: left;}
    #contents02 .right-Box h3.systemttl span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
    
    

    #news-contents .inner-Boxnl 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: 0 1.3vw;}
    #news-contents .inner-Boxnl ul.systemlist li {position: relative;width: 100%;margin-bottom: 7.4vw;}
    #news-contents .inner-Boxnl ul.systemlist li:nth-child(3n) { margin-right: 0.0vw; }
    #news-contents .inner-Boxnl ul.systemlist li a {  }
    #news-contents .inner-Boxnl ul.systemlist li a:hover {  }
    #news-contents .inner-Boxnl ul.systemlist li .systemphoto-box{position: relative;overflow: hidden;margin-bottom: 2.2vw;}
    #news-contents .inner-Boxnl ul.systemlist .photo {width: 100%;aspect-ratio: 347 / 217;overflow: hidden;text-align: center;/* margin-bottom: 4.0vw; */position: relative;border-radius: 1rem;}
    #news-contents .inner-Boxnl ul.systemlist .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
        
    #news-contents .inner-Boxnl p.systemcate {font-size: 3.73vw;line-height: 2;font-weight: 400;letter-spacing: 0.43vw;margin-bottom: 3.8vw;position: relative;text-align: left;}
    #news-contents .inner-Boxnl p.systemcate span {display: inline-block;background: #C4C4C4;border-radius: 22vw;padding: 1.7vw 2vw;margin: 0 0.5vw 0.5vw 0;font-size: 3.20vw;line-height: 1;position: relative;left: 2vw;top: 0.3vw;}
    #news-contents .inner-Boxnl h3.systemttl {font-size: 4.27vw;line-height: 1.5;font-weight: 500;letter-spacing: 0.43vw;position: relative;text-align: left;}
    #news-contents .inner-Boxnl h3.systemttl span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
    
    #news-contents .smorebtn {text-align: center;cursor: pointer;transition: opacity 0.3s;height: 9.6vw;margin: 0 24vw;border: 0.27vw solid #000000;border-radius: 5.6vw;background: #E9E7DE;font-weight: bold;padding-top: 1.87vw;}
    #news-contents .smorebtn.disabled { opacity: 0.3; pointer-events: none; }

}