@charset "UTF-8"; body { opacity: 1; padding-top: 0; } #movie-back {position: fixed;top: 0;left: 0;width: 100vw;height: 130vh;z-index: -1;overflow: hidden;} #movie-back video {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);min-width: 100vw;min-height: 130vh;width: auto;height: auto;object-fit: cover;} @-webkit-keyframes animate-svg-fill-1 { 0% { fill: transparent; } 100% { fill: rgb(1, 82, 48); } } @keyframes animate-svg-fill-1 { 0% { fill: transparent; } 100% { fill: rgb(1, 82, 48); } } .svg-elem-1 { -webkit-animation: animate-svg-fill-1 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.8s both; animation: animate-svg-fill-1 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.8s both; } @-webkit-keyframes animate-svg-fill-2 { 0% { fill: transparent; } 100% { fill: rgb(1, 82, 48); } } @keyframes animate-svg-fill-2 { 0% { fill: transparent; } 100% { fill: rgb(1, 82, 48); } } .svg-elem-2 { -webkit-animation: animate-svg-fill-2 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.9s both; animation: animate-svg-fill-2 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.9s both; } @-webkit-keyframes animate-svg-fill-3 { 0% { fill: transparent; } 100% { fill: rgb(1, 82, 48); } } @keyframes animate-svg-fill-3 { 0% { fill: transparent; } 100% { fill: rgb(1, 82, 48); } } .svg-elem-3 { -webkit-animation: animate-svg-fill-3 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) 1s both; animation: animate-svg-fill-3 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) 1s both; } @keyframes reveal { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } } @media screen and (min-width: 768px),print { /* ======================= メインアニメーション領域 ======================= */ #mainanime {width: 100vw;height: 100vh;position: fixed;z-index: 1000000;background: url(../images/index/contents03-back01.jpg) repeat center;top: 0;left: 0;} #mainanime p { width: 29.22vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 1s ease; } #mainanime #fff { width: 71.67vw; margin: 0 auto; margin-left: 9vw; } /* フェードアウト */ #mainanime.fadeout { opacity: 0; transition: opacity 0.8s ease; } /* ======================= コンテンツメイン領域 ======================= */ header {/* position: absolute; */} #contentsmain { margin: 0 auto -320px; position: relative; width: 100%; height: 100vh; background: url(../images/index/head-back01.png) repeat-x top center rgba(0,0,0,0.3); } #contentsmain .inner-Box { margin: 0 auto; position: relative; text-align: center; padding: 48.1vh 0 0; } #contentsmain .inner-Box h2 { padding-top: 0; margin-bottom: 1.1vh; } #contentsmain .inner-Box h2 img { width: auto; height: 6.7rem; } #contentsmain .inner-Box h3 img { height: 6.7rem; } /* 最初は透明＋ぼかし */ #contentsmain .inner-Box h2, #contentsmain .inner-Box h3, #contentsmain .inner-Box h4 { opacity: 0; filter: blur(10px); transition: opacity 1.2s ease, filter 1.2s ease; } /* 表示時にフェード＋ぼかし解除 */ #contentsmain .inner-Box h2.show, #contentsmain .inner-Box h3.show, #contentsmain .inner-Box h4.show { opacity: 1; filter: blur(0); } #contents01 {margin: 0 auto -930px;position: relative;background: url('../images/index/contents01-back01.png')repeat-x top center;padding: 464px 3rem 0;} #contents01 .inner-Box {margin: 0 auto 389px;position: relative;background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(212,228,221,0.85) 100%);max-width: 1100px;padding: 6.4rem 6rem 3.5rem 25.6rem;border-radius: 1.5rem;z-index: 3;} #contents01 .inner-Box h2 {font-size: 2.5rem;line-height: 1.5;font-weight: 500;letter-spacing: 0.5rem;margin-bottom: 0px;position: absolute;top: 4.8rem;left: 9.2rem;} #contents01 .inner-Box h2 span.ttlicon {display: block;width: 2.4rem;{}{};position: absolute;top: -0.6rem;left: -3.2rem;} #contents01 .inner-Box h2 span.f-en {display: block;font-size: 1.4rem;letter-spacing: 0.28rem;margin-left: 35px;margin-top: -0.2rem;} #contents01 .inner-Box ul.system-list {} #contents01 .inner-Box ul li {position: relative;border-bottom: #C2CEC9 1px solid;margin-bottom: 1.5rem;} #contents01 .inner-Box ul li a {display: flex;} #contents01 .inner-Box ul li a .arr{display: block;border: 1px solid #005F37;width: 27px;height: 27px;background: none;position: absolute;border-radius: 50%;position: absolute;top: 0.6rem;right: 0;line-height: 0;transition: all 0.3s ease-in-out;} #contents01 .inner-Box ul li a .arr img{width: 7px;position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);} #contents01 .inner-Box ul li a:hover .arr{ background: #fff;} #contents01 .inner-Box ul li a:hover .system-ttl{ text-decoration: underline; } #contents01 .inner-Box p.system-date {font-size: 1.6rem;line-height: 2;font-weight: 400;letter-spacing: 0.16rem;position: relative;padding-left: 80px;width: 200px;flex-shrink: 0;} #contents01 .inner-Box p.system-date span.sdate {font-size: 1.4rem;color: #00331D;letter-spacing: 0.14rem;position: absolute;top: 0.3rem;left: 0rem;} #contents01 .inner-Box p.system-date span.cate {display: inline-block;color: #fff;background: #005F37;border-radius: 30px;font-size: 1.2rem;letter-spacing: 0.084rem;padding: 0 0.8rem;margin-left: 1.3rem;width: auto;text-align: center;margin-bottom: 0.5rem;} #contents01 .inner-Box p.system-ttl { font-size: 1.6rem; line-height: 1.5; font-weight: 400; letter-spacing: 0.16rem; margin-bottom: 2.6rem; position: relative; flex: 1; min-width: 0; padding-right: 5rem; } #contents01 .inner-Box p.dlbtn {position: absolute;top: 14.4rem;left: 6rem;} #contents01 .inner-Box2 {margin: 0 auto;position: relative;min-height: 1560px;} #contents01 .inner-Box2 .inBox {margin: 0 auto;max-width: 1100px;color: #fff;} #contents01 .inner-Box2 .inBox h2 {font-size: 2.5rem;line-height: 1.5;font-weight: 400;letter-spacing: 0.5rem;margin-bottom: 4.1rem;position: relative;} #contents01 .inner-Box2 .inBox p.text {font-size: 1.6rem;line-height: 2.5;font-weight: 400;letter-spacing: 0.32rem;margin-bottom: 5rem;position: relative;} #contents01 .inner-Box2 .inBox figure.img01 {position: absolute;top: -548px;left: -3rem;width: 42.4vw;} #contents01 .inner-Box2 .inBox figure.img01 img{mix-blend-mode: multiply;} #contents01 .inner-Box2 .inBox figure.img02 {position: absolute;top: -35.5rem;right: 2.6rem;width: 75.52vw;} #contents01 .inner-Box2 .inBox figure.img02 img{ } #contents01 .inner-Box2 .inBox figure.img022 {position: absolute;top: -33.5rem;left: -0.9rem;width: 78.12vw;mix-blend-mode: lighten;} #contents01 .inner-Box2 .inBox figure.img022 img{ } #contents01 .inner-Box2 .inBox figure.photo01 {position: absolute;left: 50%;top: -9.5rem;margin-left: 8.8rem;width: 29.11vw;max-width: 559px;max-height: 634px;} #contents01 .inner-Box2 .inBox figure.photo01 img{ position: relative; z-index: 3; } #contents01 .inner-Box2 .inBox figure.photo01::before{content: "";display: block;width: 29.11vw;height: 33.02vw;background: rgba(0,0,0,0.1);position: absolute;bottom: -4rem;right: -3rem;max-width: 559px; max-height: 634px;} #contents01 .inner-Box2 .inBox figure.photo02 {position: absolute;top: 47rem;left: 50%;margin-left: -55rem;max-width: 303px;max-height: 343px;width: 15.78vw;height: 17.86vw;z-index: 5;} #contents01 .inner-Box2 .inBox figure.photo02 img{ position: relative; z-index: 3; } #contents01 .inner-Box2 .inBox figure.photo02::before{content: "";display: block;max-width: 303px;max-height: 343px;width: 15.78vw;height: 17.86vw;background: rgba(0,0,0,0.1);position: absolute;bottom: -4rem;right: -3rem;} #contents01 .inner-Box2 .inBox figure.photo03 {position: absolute;top: 66.8rem;left: 50%;margin-left: -10rem;max-width: 523px;max-height: 321px;width:27.24vw;height:16.72vw;z-index: 5;} #contents01 .inner-Box2 .inBox figure.photo03::before{content: "";display: block;max-width: 523px;max-height: 321px;width:27.24vw;height:16.72vw;background: rgba(0,0,0,0.1);position: absolute;bottom: -4rem;right: -3rem;} #contents01 .inner-Box2 .inBox figure.photo03 img{ position: relative; z-index: 3; } #contents01 .inner-Box2 .morebtn2{width: 320px;} #contents01 .inner-Box2 .morebtn2 a{ } #contents02 {margin: 0 auto -24px;position: relative;background: url('../images/index/contents02-back02.png')no-repeat bottom center,url('../images/index/contents02-back01.png')repeat-x top center;padding: 28.02vw 3rem 48.23vw 3rem;background-size: 100% auto,auto 100%;} #contents02 .inner-Box {margin: 0 auto 15rem;max-width: 1360px;} #contents02 .inner-Box figure.img01 {position: absolute;top: 33.5rem;left: 4.9rem;mix-blend-mode: multiply;max-width: 472px;width: 24.58vw;} #contents02 .inner-Box figure.img01 img{ } #contents02 .inner-Box h2 {font-size: 2.5rem;line-height: 1.5;font-weight: 500;letter-spacing: 0.5rem;margin-bottom: 2.5rem;position: relative;text-align: center;} #contents02 .inner-Box h2 span.ttlicon {display: block;width: 35px;margin: 0 auto 8px;} #contents02 .inner-Box h2 span.f-en {display: block;font-size: 1.4rem;letter-spacing: 0.28rem;} #contents02 .inner-Box p.subttl {font-size: 1.6rem;line-height: 2;font-weight: 400;letter-spacing: 0.32rem;margin-bottom: 4.5rem;position: relative;text-align: center;} #contents02 .inner-Box ul.system-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;margin-bottom: 4.8rem;position: relative;z-index: 4;} #contents02 .inner-Box ul li {position: relative;width: 32%;background: #fff;border-radius: 1.5rem;margin-right: 2%;padding: 3.6rem;} #contents02 .inner-Box ul li:nth-child(3n) { margin-right: 0px; } #contents02 .inner-Box ul li a { } #contents02 .inner-Box ul li a:hover { } #contents02 .inner-Box .system-pic {width: 100%;aspect-ratio: 3 / 2.1;overflow: hidden;text-align: center;margin-bottom: 15px;position: relative;} #contents02 .inner-Box .system-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } #contents02 .inner-Box ul li .dlbtn{width: 147px;margin: 0 0 0 auto;} #contents02 .inner-Box .morebtn2{width: 320px;margin: 0 auto;display: block;z-index: 4;position: relative;} #contents02 .inner-Box h3 {font-size: 1.8rem;line-height: 1.5;font-weight: 500;letter-spacing: 0.18rem;margin-bottom: 1rem;position: relative;} #contents02 .inner-Box p.ltext {font-size: 1.4rem;line-height: 1.8;font-weight: 400;letter-spacing: 0.14rem;margin-bottom: 3rem;position: relative;} #contents02 .inner-Box p.ltext span{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} #contents02 .inner-Box figure.img02 {position: absolute;top: 103.7rem;right: 5rem;mix-blend-mode: multiply;width: 20.89vw;height: 29.11vw;max-width: 401px;max-height: 559px;} #contents02 .inner-Box figure.img02 img{ } #contents02 .inner-Box1 {margin: 0 auto;position: relative;max-width: 1360px;padding-right: 72rem;min-height: 52rem;} #contents02 .inner-Box1 figure.img03 {position: absolute;bottom: 84px;left: -230px;mix-blend-mode: multiply;} #contents02 .inner-Box1 figure.img03 img{ } #contents02 .inner-Box1 figure.photo {position: absolute;top: 0;right: 0;/* width: 33.85vw; *//* height: 20.83vw; */max-width: 65rem;max-height: 40rem;} #contents02 .inner-Box1 figure.photo img{ } #contents02 .inner-Box1 .morebtn2{width: 320px;margin: 0 auto 0 0;display: block;z-index: 4;position: relative;} #contents02 .inner-Box1 h4 {font-size: 2.5rem;line-height: 1.5;font-weight: 400;letter-spacing: 0.5rem;margin-bottom: 2.7rem;position: relative;} #contents02 .inner-Box1 p.text {font-size: 1.6rem;line-height: 2.5;font-weight: 400;letter-spacing: 0.32rem;margin-bottom: 5.6rem;position: relative;} #contents02 .inner-Box2 {margin: 0 auto;position: relative;max-width: 1360px;padding-left: 71rem;min-height: 52rem;} #contents02 .inner-Box2 figure.img04 {position: absolute;bottom: -21.8rem;left: 50%;margin-left: -87.4rem;mix-blend-mode: multiply;width: 16.82vw;height: 28.07vw;max-width: 323px;max-height: 539px;} #contents02 .inner-Box2 figure.img04 img{ } #contents02 .inner-Box2 figure.img05 {position: absolute;bottom: 84px;right: -23rem;mix-blend-mode: multiply;} #contents02 .inner-Box2 figure.img05 img{ } #contents02 .inner-Box2 figure.photo02 {position: absolute;top: 0;left: 0;/* width: 33.85vw; *//* height: 20.83vw; */max-width: 65rem;max-height: 40rem;} #contents02 .inner-Box2 figure.photo02 img{ } #contents02 .inner-Box2 .morebtn2{width: 320px;margin: 0 auto 0 0;display: block;z-index: 4;position: relative;} #contents02 .inner-Box2 h4 {font-size: 2.5rem;line-height: 1.5;font-weight: 400;letter-spacing: 0.5rem;margin-bottom: 2.7rem;position: relative;} #contents02 .inner-Box2 p.text {font-size: 1.6rem;line-height: 2.5;font-weight: 400;letter-spacing: 0.32rem;margin-bottom: 5.6rem;position: relative;} #contents02 .inner-Box3 {margin: 0 auto;position: relative;max-width: 1360px;padding-right: 72rem;min-height: 52rem;} #contents02 .inner-Box3 figure.img06 {position: absolute;bottom: 84px;left: -230px;mix-blend-mode: multiply;} #contents02 .inner-Box3 figure.img06 img{ } #contents02 .inner-Box3 figure.photo03 {position: absolute;top: 0;right: 0;/* width: 33.85vw; *//* height: 20.83vw; */max-width: 65rem;max-height: 40rem;} #contents02 .inner-Box3 figure.photo03 img{ } #contents02 .inner-Box3 .morebtn2{width: 320px;margin: 0 auto 0 0;display: block;z-index: 4;position: relative;} #contents02 .inner-Box3 h4 {font-size: 2.5rem;line-height: 1.5;font-weight: 400;letter-spacing: 0.5rem;margin-bottom: 2.7rem;position: relative;} #contents02 .inner-Box3 p.text {font-size: 1.6rem;line-height: 2.5;font-weight: 400;letter-spacing: 0.32rem;margin-bottom: 5.6rem;position: relative;} #contents02 .inner-Box4 {margin: 0 auto;position: relative;max-width: 1360px;padding-left: 71rem;min-height: 52rem;} #contents02 .inner-Box4 figure.img04 {position: absolute;bottom: -39.8rem;left: 50%;margin-left: -31.2rem;mix-blend-mode: multiply;width: 76.82vw;height: 28.07vw;max-width: 1222px;max-height: 539px;} #contents02 .inner-Box4 figure.img04 img{ } #contents02 .inner-Box4 figure.img05 {position: absolute;bottom: 84px;right: -23rem;mix-blend-mode: multiply;} #contents02 .inner-Box4 figure.img05 img{ } #contents02 .inner-Box4 figure.photo04 {position: absolute;top: 0;left: 0;/* width: 33.85vw; *//* height: 20.83vw; */max-width: 65rem;max-height: 40rem;} #contents02 .inner-Box4 figure.photo04 img{ } #contents02 .inner-Box4 .morebtn2{width: 320px;margin: 0 auto 0 0;display: block;z-index: 4;position: relative;} #contents02 .inner-Box4 h4 {font-size: 2.5rem;line-height: 1.5;font-weight: 400;letter-spacing: 0.5rem;margin-bottom: 2.7rem;position: relative;} #contents02 .inner-Box4 p.text {font-size: 1.6rem;line-height: 2.5;font-weight: 400;letter-spacing: 0.32rem;margin-bottom: 5.6rem;position: relative;} #contents03 {margin: 0 auto -810px;position: relative;background: url('../images/index/contents03-back01.jpg')repeat top center;padding-bottom: 710px;} #contents03 .inner-Box {margin: 0 auto;position: relative;max-width: 1096px;padding: 25px 0rem 0 394px;z-index: 10;min-height: 450px;} #contents03 .inner-Box h2 {width: 334px;position: absolute;top: 0;left: 0;} #contents03 .inner-Box h2 span{ } #contents03 .inner-Box h2 img { } #contents03 .inner-Box ul.system-list {position: relative;z-index: 4;} #contents03 .inner-Box ul li {min-height: 118px;color: #fff;position: relative;} #contents03 .inner-Box ul li a {color: #fff;display: block;min-height: 118px;padding: 0 0 0 156px;color: #fff;position: relative;border-bottom: 1px solid #1C8156;margin-bottom: 24px;} #contents03 .inner-Box ul li a:hover { } #contents03 .inner-Box .text-Box {} #contents03 .inner-Box p.system-date {font-size: 1.4rem;line-height: 1.1;font-weight: 400;letter-spacing: 0.14rem;position: relative;} #contents03 .inner-Box p.system-ttl { font-size: 1.6rem; line-height: 1.5; font-weight: 400; letter-spacing: 0.16rem; margin-bottom: 2.6rem; position: relative; flex: 1; min-width: 0; padding-right: 5rem; } #contents03 .inner-Box ul li a .arr{display: block;border: 1px solid #fff;width: 27px;height: 27px;background: none;border-radius: 50%;position: absolute;top: 2.3rem;right: 0;line-height: 0;transition: all 0.3s ease-in-out;} #contents03 .inner-Box ul li a .arr img{width: 7px;position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);} #contents03 .inner-Box ul li a:hover .arr{ background: #fff;} #contents03 .inner-Box ul li a:hover .arr img{ -webkit-filter: none; filter: none;} #contents03 .inner-Box .system-pic {width: 142px;aspect-ratio: 142 / 100;overflow: hidden;text-align: center;margin-bottom: 15px;position: absolute;top: 0;left: 0;} #contents03 .inner-Box .system-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } #contents03 .inner-Box .dlbtn2{position: absolute;top: 385px;left: 76px;} } @media screen and (min-width:768px) and ( max-width:1450px) { #contents02 .inner-Box2 figure.img04 {left: 0;margin-left: 0;} } @media screen and (min-width:768px) and ( max-width:1200px) { #contents01 .inner-Box2 .inBox figure.photo02 {margin-left: 0;left: 3rem;width: 300px;height: 399px;} #contents01 .inner-Box2 .inBox figure.photo02 img{ } #contents01 .inner-Box2 .inBox figure.photo02::before{ width: 300px; height: 399px; } #contents01 .inner-Box2 .inBox figure.photo03 {position: absolute;top: 66.8rem;left: auto;right: 0rem;width: 390px;height: 240px;} #contents01 .inner-Box2 .inBox figure.photo03::before{ width: 400px; height: 240px; } #contents03 .inner-Box {padding: 25px 3rem 0 28vw;} #contents03 .inner-Box h2 {width: 23vw;position: absolute;top: 0;left: 0.5vw;} #contents03 .inner-Box .dlbtn2{position: absolute;top: 295px;left: 2rem;} } @media screen and (min-width:768px) and ( max-width:1000px) { #contents02 .inner-Box1 {padding-right: 52rem;} #contents02 .inner-Box1 figure.photo {max-width: 45rem;max-height: 40rem;} #contents02 .inner-Box2 {padding-left: 51rem;} #contents02 .inner-Box2 figure.photo02 {max-width: 45rem;max-height: 40rem;} #contents02 .inner-Box3 {padding-right: 52rem;} #contents02 .inner-Box3 figure.photo03 {max-width: 45rem;max-height: 40rem;} } @media screen and (max-width: 767px) { body{ padding-top: 0;} header{ position: absolute;} header .h-logo{top: 2.5vw;} /* ======================= メインアニメーション領域 ======================= */ #mainanime {width: 100vw;height: 100vh;position: fixed;z-index: 1000000;background: url(../images/index/contents03-back01.jpg) repeat center;top: 0;left: 0; background-size: 20vw auto;} #mainanime p {width: 53.33vw;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0;transition: opacity 1s ease;} #mainanime #fff {width: 92vw;margin: 0 4vw;} /* フェードアウト */ #mainanime.fadeout { opacity: 0; transition: opacity 0.8s ease; } /* ======================= コンテンツメイン領域 ======================= */ header { position: absolute; } #contentsmain {margin: 0 auto -30vw;position: relative;width: 100%;height: 230vw;background: url(../images/index/head-back01.png) repeat-x top center rgba(0,0,0,0.3);background-size: 100% auto;} #contentsmain .inner-Box {margin: 0 4vw;position: relative;text-align: center;padding: 70.1vw 0 22vw;} #contentsmain .inner-Box h2 { padding-top: 0; margin-bottom: 1.1vh; } #contentsmain .inner-Box h2 {padding-top: 0;margin-bottom: 5vw;} #contentsmain .inner-Box h2 span{ } #contentsmain .inner-Box h2 img {width: auto;height: 15vw;} #contentsmain .inner-Box h3 {margin-bottom: 5vw;} #contentsmain .inner-Box h3 span{ } #contentsmain .inner-Box h3 img {height: 15vw;} #contentsmain .inner-Box h4 img {height: 15vw;} #contentsmain .inner-Box h2, #contentsmain .inner-Box h3, #contentsmain .inner-Box h4 { opacity: 0; filter: blur(2.67vw); transition: opacity 1.2s ease, filter 1.2s ease; } #contentsmain .inner-Box h2.show, #contentsmain .inner-Box h3.show, #contentsmain .inner-Box h4.show { opacity: 1; filter: blur(0); } #contents01 {margin: 0 auto -54vw;position: relative;background: url('../images/index/sp-contents01-back01.png')repeat-x top center;padding: 20vw 5.3vw 16vw;background-size: 100% auto;} #contents01 .inner-Box {margin: 0 auto 46vw;position: relative;background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(212,228,221,0.85) 100%);padding: 4.9vw 3vw 7.9vw 3vw;border-radius: 3.8vw;z-index: 4;} #contents01 .inner-Box h2 {font-size: 6.13vw;line-height: 1.5;font-weight: 500;letter-spacing: 1.23vw;margin-bottom: 5.7vw;text-align: center;} #contents01 .inner-Box h2 span.ttlicon {display: block;width: 6.3vw;{}{};margin: 0 auto 1.6vw;} #contents01 .inner-Box h2 span.f-en {display: block;font-size: 3.73vw;letter-spacing: 0.75vw;} #contents01 .inner-Box ul.system-list {margin: 0 2.2vw 9vw;} #contents01 .inner-Box ul li {position: relative;border-bottom: #C2CEC9 0.27vw solid;margin-bottom: 1.5rem;} #contents01 .inner-Box ul li:nth-child(3) {border-bottom: none; } #contents01 .inner-Box ul li:last-child { display: none; } #contents01 .inner-Box ul li a {} #contents01 .inner-Box ul li a .arr{display: block;border: 0.27vw solid #005F37;height: 7.2vw;width: 7.2vw;background: none;position: absolute;border-radius: 50%;position: absolute;top: 10vw;right: 0vw;line-height: 0;transition: all 0.3s ease-in-out;} #contents01 .inner-Box ul li a .arr img{position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 1.6vw;} #contents01 .inner-Box ul li a:hover .arr{ background: #fff;} #contents01 .inner-Box ul li a:hover .system-ttl{ text-decoration: underline; } #contents01 .inner-Box p.system-date {font-size: 4.27vw;line-height: 2;font-weight: 400;letter-spacing: 0.43vw;position: relative;padding-left: 25.23vw;margin-bottom: 1vw;min-height: 8vw;} #contents01 .inner-Box p.system-date span.sdate {font-size: 3.73vw;color: #00331D;letter-spacing: 0.4vw;position: absolute;top: 1.3vw;left: 0.2vw;} #contents01 .inner-Box p.system-date span.cate {display: inline-block;color: #fff;background: #005F37;border-radius: 8.0vw;font-size: 3.2vw;letter-spacing: 0.22vw;padding: 0.2vw 2.2vw;margin-left: 0vw;width: auto;text-align: center;top: 0.3vw;margin-bottom: 0.5vw;position: relative;} #contents01 .inner-Box p.system-ttl {font-size: 3.73vw;line-height: 1.5;font-weight: 400;letter-spacing: 0.26vw;margin-bottom: 5.8vw;position: relative;padding-right: 9vw;} #contents01 .inner-Box p.dlbtn {position: relative;margin: 0 2.1vw 0 auto;width: 39.4vw;} #contents01 .inner-Box2 {position: relative;margin: 0 0vw;z-index: 3;} #contents01 .inner-Box2 .inBox {color: #fff;margin: 0 -5vw;padding: 0vw 5vw;} #contents01 .inner-Box2 .inBox h2 {font-size: 5.33vw;line-height: 1.5;font-weight: 400;letter-spacing: 1.07vw;margin-bottom: 6.5vw;position: relative;margin-right: -1vw;} #contents01 .inner-Box2 .inBox p.text {font-size: 3.73vw;line-height: 2.5;font-weight: 400;letter-spacing: 0.75vw;margin-bottom: 8.8vw;position: relative;} #contents01 .inner-Box2 .inBox figure.img01 {position: absolute;top: -56.1vw;left: -5.2vw;width: 88.9vw;} #contents01 .inner-Box2 .inBox figure.img01 img{display: block;opacity: 0.3;} #contents01 .inner-Box2 .inBox figure.img02 {position: absolute;top: -23.3vw;right: -4.2vw;width: 97.52vw;} #contents01 .inner-Box2 .inBox figure.img02 img{ } #contents01 .inner-Box2 .inBox figure.img022 {position: absolute;top: 1.1vw;left: -5vw;width: 100vw;mix-blend-mode: lighten;opacity: 0.5;} #contents01 .inner-Box2 .inBox figure.img022 img{ } #contents01 .inner-Box2 .inBox figure.photo01 {position: relative;margin: 0 4.3vw 11.3vw 5.4vw;} #contents01 .inner-Box2 .inBox figure.photo01 img{ position: relative; z-index: 3; } #contents01 .inner-Box2 .inBox figure.photo01::before{content: "";display: block;width: 77.11vw;height: 91.11vw;background: rgba(0,0,0,0.1);position: absolute;bottom: -4vw;right: -4vw;} #contents01 .inner-Box2 .inBox figure.photo02 {position: relative;width: 31.78vw;z-index: 5;margin-bottom: -17.2vw;} #contents01 .inner-Box2 .inBox figure.photo02 img{ position: relative; z-index: 3; } #contents01 .inner-Box2 .inBox figure.photo02::before{content: "";display: block;width: 31.48vw;height: 36.48vw;background: rgba(0,0,0,0.1);position: absolute;bottom: -4vw;right: -3vw;} #contents01 .inner-Box2 .inBox figure.photo03 {position: relative;width: 51.24vw;height: 29.42vw;z-index: 5;margin-left: 40.4vw;margin-bottom: 15.4vw;} #contents01 .inner-Box2 .inBox figure.photo03::before{content: "";display: block;width: 50.24vw;height: 33.72vw;background: rgba(0,0,0,0.1);position: absolute;bottom: -6vw;right: -3vw;} #contents01 .inner-Box2 .inBox figure.photo03 img{ position: relative; z-index: 3; } #contents01 .inner-Box2 .morebtn2{ margin: 0vw 2vw; width: 85.9vw; } #contents01 .inner-Box2 .morebtn2 a{ } #contents02 {margin: 0 auto 0vw;position: relative;background: url('../images/index/sp-contents02-back02.png')no-repeat bottom center,url('../images/index/sp-contents02-back01.png')repeat top center;padding: 66.62vw 3vw 60.23vw;background-size:100% auto,130% auto;} #contents02 .inner-Box {position: relative;padding-bottom: 29vw;} #contents02 .inner-Box figure.img01 {position: absolute;top: -31.4vw;left: 2.2vw;mix-blend-mode: multiply;width: 45.38vw;} #contents02 .inner-Box figure.img01 img{ } #contents02 .inner-Box h2 {font-size: 6.13vw;line-height: 1.5;font-weight: 500;letter-spacing: 1.23vw;margin-bottom: 6.1vw;position: relative;text-align: center;} #contents02 .inner-Box h2 span.ttlicon {display: block;width: 6.63vw;margin: 0 auto 2.13vw;} #contents02 .inner-Box h2 span.f-en {display: block;font-size: 3.73vw;letter-spacing: 0.75vw;} #contents02 .inner-Box p.subttl {font-size: 4.27vw;line-height: 2;font-weight: 400;letter-spacing: 0.85vw;margin-bottom: 7vw;position: relative;text-align: center;} #contents02 .inner-Box ul.system-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;margin: 0 2.2vw -0.2vw;position: relative;z-index: 4;} #contents02 .inner-Box ul li {position: relative;width: 100%;background: #fff;padding: 8vw;border-radius: 4vw;margin-bottom: 7.8vw;} #contents02 .inner-Box ul li:nth-child(3n) { margin-right: 0.0vw; } #contents02 .inner-Box ul li a { } #contents02 .inner-Box ul li a:hover { } #contents02 .inner-Box .system-pic {width: 100%;aspect-ratio: 3 / 2.1;overflow: hidden;text-align: center;margin-bottom: 4.0vw;position: relative;} #contents02 .inner-Box .system-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } #contents02 .inner-Box ul li .dlbtn{margin: 0 0 0 auto;width: 39.4vw;} #contents02 .inner-Box .morebtn2{margin: 0 4vw;display: block;z-index: 4;position: relative;width: 86vw;} #contents02 .inner-Box h3 {font-size: 4.8vw;line-height: 1.5;font-weight: 500;letter-spacing: 0.48vw;margin-bottom: 2.1vw;position: relative;} #contents02 .inner-Box p.ltext {font-size: 3.73vw;line-height: 1.8;font-weight: 400;letter-spacing: 0.37vw;margin: 0 -0.7vw 4.3vw;position: relative;} #contents02 .inner-Box p.ltext span{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;} #contents02 .inner-Box figure.img02 {position: absolute;bottom: 0vw;mix-blend-mode: multiply;width: 44.29vw;right: 2.2vw;} #contents02 .inner-Box figure.img02 img{ } #contents02 .inner-Box1 {margin: 0 2.3vw 7.9vw;position: relative;} #contents02 .inner-Box1 figure.img03 {position: relative;left: 0vw;mix-blend-mode: multiply;top: 0vw;margin-right: -6vw;margin-bottom: 2.7vw;} #contents02 .inner-Box1 figure.img03 img{ } #contents02 .inner-Box1 figure.photo {position: relative;top: 0;right: 0;margin-bottom: 4vw;} #contents02 .inner-Box1 figure.photo img{ } #contents02 .inner-Box1 .morebtn2{margin: 0 2vw;display: block;z-index: 4;position: relative;width: auto;} #contents02 .inner-Box1 h4 {font-size: 5.33vw;line-height: 1.5;font-weight: 400;letter-spacing: 1.07vw;margin-bottom: 0vw;position: relative;} #contents02 .inner-Box1 p.text {font-size: 3.73vw;line-height: 2.5;font-weight: 400;letter-spacing: 0.37vw;margin-bottom: 7.6vw;position: relative;} #contents02 .inner-Box2 {margin: 0 2.3vw 7.5vw;position: relative;} #contents02 .inner-Box2 figure.img04 {position: absolute;left: 0vw;mix-blend-mode: multiply;top: 71vw;margin-right: -6vw;margin-bottom: 2.7vw;width: 45vw;} #contents02 .inner-Box2 figure.img04 img{ } #contents02 .inner-Box2 figure.img05 {position: relative;left: 0vw;mix-blend-mode: multiply;top: 0vw;margin-right: 38vw;margin-bottom: 2.7vw;} #contents02 .inner-Box2 figure.img05 img{ } #contents02 .inner-Box2 figure.photo02 {position: relative;top: 0;right: 0;margin-bottom: 4vw;} #contents02 .inner-Box2 figure.photo02 img{ } #contents02 .inner-Box2 .morebtn2{margin: 0 2vw;display: block;z-index: 4;position: relative;width: auto;} #contents02 .inner-Box2 h4 {font-size: 5.33vw;line-height: 1.5;font-weight: 400;letter-spacing: 1.07vw;margin-bottom: 0vw;position: relative;} #contents02 .inner-Box2 p.text {font-size: 3.73vw;line-height: 2.5;font-weight: 400;letter-spacing: 0.37vw;margin-bottom: 7.6vw;position: relative;} #contents02 .inner-Box3 {margin: 0 2.3vw 16vw;position: relative;} #contents02 .inner-Box3 figure.img06 {position: relative;left: 0vw;mix-blend-mode: multiply;margin-right: -6vw;margin-bottom: 2.7vw;width: 79.1vw;} #contents02 .inner-Box3 figure.img06 img{ } #contents02 .inner-Box3 figure.photo03 {position: relative;top: 0;right: 0;margin-bottom: 4vw;} #contents02 .inner-Box3 figure.photo03 img{ } #contents02 .inner-Box3 .morebtn2{margin: 0 2vw;display: block;z-index: 4;position: relative;width: auto;} #contents02 .inner-Box3 h4 {font-size: 5.33vw;line-height: 1.5;font-weight: 400;letter-spacing: 1.07vw;margin-bottom: 0vw;position: relative;} #contents02 .inner-Box3 p.text {font-size: 3.73vw;line-height: 2.5;font-weight: 400;letter-spacing: 0.37vw;margin-bottom: 7.6vw;position: relative;} #contents02 .inner-Box4 {margin: 0 2.3vw 7.5vw;position: relative;} #contents02 .inner-Box4 figure.img04 {position: relative;left: 0vw;mix-blend-mode: multiply;margin-right: -6vw;margin-bottom: 2.7vw;width: 62.70vw;} #contents02 .inner-Box4 figure.img04 img{ } #contents02 .inner-Box4 figure.img05 {position: relative;left: 0vw;mix-blend-mode: multiply;top: 0vw;margin-right: 38vw;margin-bottom: 2.7vw;} #contents02 .inner-Box4 figure.img05 img{ } #contents02 .inner-Box4 figure.photo04 {position: relative;top: 0;right: 0;margin-bottom: 4vw;} #contents02 .inner-Box4 figure.photo04 img{ } #contents02 .inner-Box4 .morebtn2{margin: 0 2vw;display: block;z-index: 4;position: relative;width: auto;} #contents02 .inner-Box4 h4 {font-size: 5.33vw;line-height: 1.5;font-weight: 400;letter-spacing: 1.07vw;margin-bottom: 0vw;position: relative;} #contents02 .inner-Box4 p.text {font-size: 3.73vw;line-height: 2.5;font-weight: 400;letter-spacing: 0.37vw;margin-bottom: 7.6vw;position: relative;} #contents03 {margin: 0 auto -164vw;position: relative;background: url('../images/index/contents03-back01.jpg')repeat top center;padding-bottom: 131vw;background-size: 20% auto;} #contents03 .inner-Box {margin: 0 5.3vw;position: relative;padding: 8.67vw 0rem 0 0vw;z-index: 10;} #contents03 .inner-Box h2 {position: relative;top: 0;left: 0;margin: 0 9.8vw 10.6vw 10.2vw;} #contents03 .inner-Box h2 span{ } #contents03 .inner-Box h2 img { } #contents03 .inner-Box ul.system-list {position: relative;z-index: 4;margin-bottom: 4vw;} #contents03 .inner-Box ul li {color: #fff;position: relative;} #contents03 .inner-Box ul li a {color: #fff;display: block;padding: 0 0 0 35.3vw;color: #fff;position: relative;border-bottom: 0.27vw solid #1C8156;margin-bottom: 3.9vw;min-height: 26.7vw;} #contents03 .inner-Box ul li a:hover { } #contents03 .inner-Box .text-Box {} #contents03 .inner-Box p.system-date {font-size: 3.73vw;line-height: 1.1;font-weight: 400;letter-spacing: 0.37vw;position: relative;margin-bottom: 1vw;} #contents03 .inner-Box p.system-ttl {font-size: 3.73vw;line-height: 1.5;font-weight: 400;letter-spacing: 0.26vw;margin-bottom: 2.6rem;position: relative;flex: 1;min-width: 0;padding-right: 5rem;} #contents03 .inner-Box ul li a .arr{display: block;border: 0.27vw solid #fff;height: 7.2vw;width: 7.2vw;background: none;border-radius: 50%;position: absolute;top: 50%;transform: translateY(-50%);right: 0;margin-top: -2vw;line-height: 0;transition: all 0.3s ease-in-out;} #contents03 .inner-Box ul li a .arr img{position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1);width: 1.4vw;} #contents03 .inner-Box ul li a:hover .arr{ background: #fff;} #contents03 .inner-Box ul li a:hover .arr img{ -webkit-filter: none; filter: none;} #contents03 .inner-Box .system-pic {aspect-ratio: 142 / 100;overflow: hidden;text-align: center;margin-bottom: 4.0vw;position: absolute;top: 0;left: 0;width: 31.9vw;} #contents03 .inner-Box .system-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } #contents03 .inner-Box .dlbtn2{position: relative;top: 0vw;margin: 0 0vw 0vw 35.8vw;} }