@charset "UTF-8";html,body,h1,h2,h3,h4,h5,h6,a,p,span,em,small,strong,sub,sup,mark,del,ins,strike,abbr,dfn,blockquote,q,cite,code,pre,ol,ul,li,dl,dt,dd,div,section,article,main,aside,nav,header,hgroup,footer,img,figure,figcaption,address,time,audio,video,canvas,iframe,details,summary,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0}article,aside,footer,header,nav,section,main{display:block}*{box-sizing:border-box}*:before,*:after{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}ol,ul{list-style:none}img,video{max-width:100%}img{border-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}html{scroll-behavior:smooth;font-size:var(--fontCriterion)}*{font-family:inherit;font-size:inherit;line-height:inherit}a{text-decoration:none}a,a:visited{color:inherit}h1:not([class]){font-size:calc(var(--fontCriterion) * var(--fontCoefficient) / 3);margin-bottom:calc(var(--fontCriterion) * 3);padding-left:calc(var(--fontCriterion) / 2);padding-right:calc(var(--fontCriterion) / 2)}h2:not([class]){font-size:calc(var(--fontCriterion) * var(--fontCoefficient) / 5);margin-bottom:calc(var(--fontCriterion) * 2);padding-left:calc(var(--fontCriterion) / 2);padding-right:calc(var(--fontCriterion) / 2)}h3:not([class]){font-size:calc(var(--fontCriterion) * var(--fontCoefficient) / 7);margin-bottom:var(--fontCriterion);padding-left:calc(var(--fontCriterion) / 2);padding-right:calc(var(--fontCriterion) / 2)}p:not([class]){margin-bottom:2em;padding-left:calc(var(--fontCriterion) / 2);padding-right:calc(var(--fontCriterion) / 2);line-height:1.8}section{margin-bottom:5%}:root{--colorBase: #FFF;--color-basic-text: #333;--color-primary: #28A745;--color-secondary: #86d67c;--color-tertiary: #F8F9FA;--color-accent: #F1A3A1;--color-accent2: #fff9e5;--color-shadow: rgba(0, 0, 0, .1);--border-color: #ccc;--color-balloon: #f2f2f2;--color-emphasis: #e6e6e6;--color-selector: #df3079;--color-attribute: #00a67d;--color-logo: #404b21;--fontCriterion: 16px;--fontCoefficient: 8;--maxWidthInner: 1100px;--maxWidthMain: 640px;--headerHeight: 80px;--footerHeight: 51px;--margin-side: 5%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans JP,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;position:relative}section{margin-bottom:calc(var(--fontCriterion) * 3)}section:last-of-type{margin-bottom:0}a{color:var(--color-logo);text-decoration:underline}.cPrimaryBack{background-color:var(--color-primary)}.cSuperWrapper{background-color:var(--colorBase);position:relative;min-height:100vh;padding-top:var(--headerHeight);overflow-x:hidden}.cWrapperOneColumn{width:min(100%,var(--maxWidthMain) + var(--fontCriterion));padding-left:calc(var(--fontCriterion) / 2);padding-right:calc(var(--fontCriterion) / 2);margin:0 auto}.cLRInner{padding-left:calc(var(--fontCriterion) / 2);padding-right:calc(var(--fontCriterion) / 2)}.cInner{width:min(100%,var(--maxWidthInner));margin-right:auto;margin-left:auto}.cTitleMarker{background:linear-gradient(transparent 70%,var(--color-secondary) 60%)}.cImageFrame{position:relative}.cImageFrame:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 20px);height:calc(100% - 20px);border-image-source:repeating-linear-gradient(45deg,var(--color-accent),var(--color-accent) 3px,rgba(0,0,0,0) 0,rgba(0,0,0,0) 6px);border-image-slice:20;border-image-repeat:round;border-style:solid;border-width:20px}.cTitleStandOut{background:linear-gradient(transparent 40%,#fffa99 30%)}.cClearfix{display:block}.cClearfix:before{content:"";display:block;clear:both}.cClearfix:after{content:"";display:block;clear:both}.cFloatLeft{float:left;margin-right:calc(var(--fontCriterion) * 1.5);margin-bottom:calc(var(--fontCriterion) * 1.5)}.cFloatRight{float:right;margin-left:calc(var(--fontCriterion) * 1.5);margin-bottom:calc(var(--fontCriterion) * 1.5)}.cFlex2Column{display:flex}.cFlex2Column ._img{width:calc(50% - var(--fontCriterion))}.cFlex2Column ._text{width:50%;margin-left:var(--fontCriterion)}.cFlex2ColumnReverse{display:flex}.cFlex2ColumnReverse ._img{width:calc(50% - var(--fontCriterion))}.cFlex2ColumnReverse ._text{width:50%;margin-right:var(--fontCriterion)}.cFlex2QS{display:flex;flex-wrap:wrap;justify-content:space-between}.cFlex2QS ._main{width:var(--maxWidthMain)}@media screen and (max-width:1023px){.cFlex2QS ._main{width:50%}}@media screen and (max-width:767px){.cFlex2QS ._main{width:100%}}.cFlex2QS ._sub{width:calc(100% - var(--maxWidthMain) - var(--fontCriterion) * 2)}@media screen and (max-width:1023px){.cFlex2QS ._sub{width:calc(50% - var(--fontCriterion) * 2)}}@media screen and (max-width:767px){.cFlex2QS ._sub{width:100%}}.cFlexReverse{flex-direction:row-reverse}.cButton{display:inline-block;background-color:var(--color-primary);color:var(--colorBase);padding:18px 35px;border-radius:8px;text-decoration:none;font-weight:700;font-size:1.8rem;transition:background-color .3s ease;text-align:center}.cButton:hover{background-color:#0062cc}header{position:fixed;top:0;left:0;height:var(--headerHeight);z-index:2;width:100%;padding:15px 0}.sHeaderFlex{display:flex;justify-content:space-between;align-items:center}.sHeaderFlex ._logo{width:200px}.sHeaderFlex ._logo img{width:100%}.sHeaderFlex ._openbtnWrap{display:none}@media screen and (max-width:767px){.sHeaderFlex ._openbtnWrap{display:block;cursor:pointer;background-color:var(--color-primary);padding:15px;border-radius:5px}.sHeaderFlex ._openbtnWrap .openbtn{position:relative;width:24px;height:16px}.sHeaderFlex ._openbtnWrap .openbtn span{display:block;transition:all .4s;position:absolute;left:0;height:2px;width:100%;background-color:var(--colorBase)}.sHeaderFlex ._openbtnWrap .openbtn span:nth-of-type(1){top:0}.sHeaderFlex ._openbtnWrap .openbtn span:nth-of-type(2){top:7px}.sHeaderFlex ._openbtnWrap .openbtn span:nth-of-type(3){top:14px}.sHeaderFlex ._openbtnWrap.active .openbtn span:nth-of-type(1){top:7px;transform:translateY(0) rotate(-45deg)}.sHeaderFlex ._openbtnWrap.active .openbtn span:nth-of-type(2){opacity:0}.sHeaderFlex ._openbtnWrap.active .openbtn span:nth-of-type(3){top:7px;transform:translateY(0) rotate(45deg)}}.sHeaderFlex ._gnavWrap .gnavList{display:flex;list-style-type:none;counter-reset:none;color:var(--color-basic-text)}.sHeaderFlex ._gnavWrap .gnavList li{margin-bottom:0;margin-left:30px;display:block}.sHeaderFlex ._gnavWrap .gnavList li a{font-weight:600;transition:color .3s ease}.sHeaderFlex ._gnavWrap .gnavList li a:hover{color:var(--color-primary)}@media screen and (max-width:767px){.sHeaderFlex ._gnavWrap{visibility:hidden;opacity:0;z-index:2;background-color:var(--colorBase);position:fixed;width:100%;height:100vh;max-width:300px;padding:80px 20px;top:0;right:-300px;transition:all .3s ease-in-out;overflow-y:auto;box-shadow:-5px 0 15px #0000001a}.sHeaderFlex ._gnavWrap.is-active{visibility:visible;opacity:1;right:0}.sHeaderFlex ._gnavWrap .gnavList{display:block;color:var(--color-basic-text)}.sHeaderFlex ._gnavWrap .gnavList li{margin-bottom:20px;margin-left:0;font-size:2rem;font-weight:700}.sHeaderFlex ._gnavWrap .gnavList li a{padding:10px 0;display:block;font-size:2rem}}.l-footer{padding:var(--fontCriterion) 0;background-color:var(--color-logo);color:var(--colorBase);text-align:center}.uMarker{background:linear-gradient(to right,#21ff00,#ff0);background-repeat:no-repeat;background-position:left bottom;background-size:100% 50%;padding-left:calc(var(--fontCriterion) / 2);padding-right:calc(var(--fontCriterion) / 2)}.uSourceArea{font-family:Google Sans Code,monospace;background-color:#f8f9fa;padding:calc(var(--fontCriterion));margin-bottom:calc(var(--fontCriterion) * 2);overflow-x:scroll;line-height:1.8;font-size:15px}.uResultArea{font-family:Yu Gothic Medium,YuGothic,sans-serif;border:1px solid var(--color-shadow);padding:calc(var(--fontCriterion));margin-bottom:calc(var(--fontCriterion) * 2);overflow-x:scroll}.uResultArea p{margin:0}.uCodeType span{font-size:14px;padding:.1em 1em;border-radius:5px 5px 0 0;color:var(--colorBase);background-color:var(--color-basic-text)}.uLetterRed{color:#dd3d29}ul{padding:.5em;list-style-type:none}ul li{position:relative;padding:0 .3em .3em;list-style:inside}.cLessonList{list-style:none;padding:0;margin-top:40px}.cLessonList li{background-color:var(--colorBase);border-bottom:1px solid var(--color-tertiary);transition:background-color .3s ease;list-style:none}.cLessonList li:first-child{border-top:1px solid var(--color-tertiary)}.cLessonList li:hover{background-color:var(--color-tertiary)}.cLessonList li a{display:flex;align-items:center;padding:25px 20px;text-decoration:none;color:var(--color-basic-text);position:relative}.cLessonList li a .lesson-number{font-size:1.2rem;font-weight:700;color:var(--color-primary);margin-right:10px;flex-shrink:0}.cLessonList li a .lesson-title{font-size:1.6rem;font-weight:600;line-height:1.5}.cLessonList li a:after{content:">";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:2rem;color:var(--color-primary)}.tech-page h2{margin-top:2em;border-left:5px solid var(--color-primary);background-color:var(--color-tertiary);padding:.5em .8em}.tech-page h3:not([class]){margin:3em calc(var(--fontCriterion) / 2) 2em;border-left:4px solid var(--color-secondary);padding:.25em .7em}.tech-page h4{font-size:1.05em;margin:2.5em 0 1.5em;padding-left:calc(var(--fontCriterion) / 2);padding-right:calc(var(--fontCriterion) / 2)}.tech-page p{padding-left:calc(var(--fontCriterion) / 2);padding-right:calc(var(--fontCriterion) / 2)}.tech-page p.mb-0{margin-bottom:0}.tech-page p:last-child{margin-bottom:0}.tech-page span.selector{color:var(--color-selector)}.tech-page span.attribute{color:var(--color-attribute)}.tech-page small,.tech-page sup{font-size:.85em;opacity:.5}.tech-page figure{margin-bottom:1.5em}.tech-page section{position:relative}.tech-page section h2{position:sticky;top:0;left:0;z-index:2}.tech-page section h3:first-child{margin-top:0}.tech-page section h4:first-child{margin-top:0}.tech-page section a{text-decoration:underline}.tech-page section>div{margin-left:calc(var(--fontCriterion) / 2);margin-right:calc(var(--fontCriterion) / 2);margin-bottom:2em}.tech-page ul{margin-bottom:2em;margin-left:1em}.tech-page ul li{list-style:disc;line-height:2}.tech-page code{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace!important;line-height:1.75;font-size:small}.tech-page code.emphasis{background-color:var(--color-emphasis);border-radius:.25rem;padding:.35em .5em .32em;font-size:.875em;margin:0 .5em}.tech-page pre{border-radius:5px;margin:20px calc(var(--fontCriterion) / 2);white-space:pre-wrap}.tech-page pre.code{position:relative;padding-top:55px}.tech-page pre.code:before{position:absolute;top:15px;left:15px;padding-bottom:.3em;border-bottom:1px solid rgba(255,255,255,.8);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans JP,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-size:.75em;font-weight:400;z-index:2;opacity:.5}.tech-page pre.code.html:before{content:"HTML"}.tech-page pre.code.css:before{content:"CSS"}.tech-page pre.code.js:before{content:"JS"}.tech-page table{width:100%;margin:40px auto}.tech-page table tbody tr{border-top:1px solid var(--border-color)}.tech-page table tbody tr:last-child{border-bottom:1px solid var(--border-color)}.tech-page table tbody tr th{text-align:left}.tech-page table tbody tr th,.tech-page table tbody tr td{padding:.7em 1.2em}.tech-page .goal{width:100%;border:2px solid var(--color-secondary);border-radius:5px;margin:0 0 5%}.tech-page .goal__title{padding:.2em 0;color:var(--colorBase);background:var(--color-secondary);text-align:center}.tech-page .goal__title p{margin:0;font-size:1.5em}.tech-page .goal__contents{padding:1em 1.5em}.tech-page .goal__contents ul{margin:0}.tech-page .goal__contents ul li{display:flex;align-items:center;gap:0 5px;padding:.5em .3em}.tech-page .goal__contents ul li:before{display:inline-block;width:12px;height:7px;border-bottom:2px solid var(--color-secondary);border-left:2px solid var(--color-secondary);transform:rotate(-45deg) translateY(-1.5px);content:"";margin-right:5px}.tech-page .toc{max-width:95%;margin:0 auto 30px;border-radius:5px;padding:1em 1em 1em 2em;border:1px solid var(--border-color)}.tech-page .toc__title{display:flex;align-items:center;margin:0;padding:5px 0;font-weight:700;font-size:calc(var(--fontCriterion) * var(--fontCoefficient) / 5)}.tech-page .toc ol{list-style-type:decimal;margin:5px 0 0;overflow:hidden;padding-left:1.1em}.tech-page .toc li{padding:.5em 0;font-weight:600}.tech-page .toc li a{color:var(--color-primary)}.tech-page .flex__wrap{display:flex;justify-content:space-between;flex-wrap:wrap}.tech-page .flex__item{width:49%}@media screen and (max-width:767px){.tech-page .flex__item{width:100%}}.tech-page .flex__item-full{width:100%}.tech-page .flex__code,.tech-page .flex__result{width:48%}.tech-page .flex__three{width:32%}@media screen and (max-width:767px){.tech-page .flex__three{width:100%}}.tech-page .point{display:flex;grid-gap:0 .7em;margin:0 auto 2rem;padding:1em;border-radius:5px;background-color:var(--color-accent2)}.tech-page .point:before{width:24px;height:24px;content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z' fill='%23ffb36b'%3E%3C/path%3E%3C/svg%3E")}.tech-page .point p{margin:0;padding:0 0 0 .7em}.modal{position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;display:none}.modal__wrap{display:inline-block}.modal__wrap input{display:none}.modal__open-label{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;width:250px;margin:0 auto 2em;padding:.8em 2em;border:none;border-radius:5px;background-color:var(--color-primary);color:#fff;font-weight:600;font-size:1em}.modal__open-label :hover{text-decoration:underline;cursor:pointer;color:#c7511f}.modal__open-input:checked+label+input+.modal{display:block;animation:modal-animation .6s}.modal__close-label{cursor:pointer;background-color:#777;color:#fff;border:2px solid #fff;border-radius:20px;width:36px;height:36px;line-height:1.5;text-align:center;display:table-cell;position:fixed;top:-15px;right:-2%;z-index:99999;font-size:1.4em}.modal__content{max-height:80vh;overflow-y:auto;padding:39px 45px 40px}.modal__content-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;background-color:#fefefe;z-index:2;border-radius:5px}.modal__background{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#00000073;z-index:1}@keyframes modal-animation{0%{opacity:0}to{opacity:1}}@media only screen and (max-width:520px){.modal__open-label{max-width:90%;padding:.94em 2.1em .94em 2.6em}.modal__close-label{top:-17px;right:-4%}.modal__content{padding:33px 21px 35px;max-width:100%}.modal__content-wrap{width:90vw}}.productionFlow{display:flex;align-items:flex-start;gap:40px;border-top:3px solid var(--border-color);max-width:800px;margin:0 auto 2em}.productionFlow.top{max-width:100%;margin-top:4em}.productionFlow__item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:20%;padding-top:2em;position:relative}.productionFlow__item.inactive{color:var(--border-color)}.productionFlow__item span{font-size:2em;font-weight:700}.productionFlow__item h3{font-size:inherit;margin:0}.productionFlow__item:before{content:"";position:absolute;top:-9px;left:50%;width:15px;height:15px;background-color:var(--border-color);border-radius:50%;transform:translate(-50%)}.productionFlow__item.active{color:var(--color-primary)}.productionFlow__item.active:before{background-color:var(--color-primary)}.productionFlow__item-balloon{text-align:center;display:flex;justify-content:center;position:relative;max-width:300px;margin-top:20px;padding:.8em 1.2em;border-radius:5px;background-color:var(--color-balloon)}.productionFlow__item-balloon:before{position:absolute;top:-10px;width:30px;height:15px;background-color:inherit;clip-path:polygon(50% 0,0 100%,100% 100%);content:""}.publicFlow{align-items:center}.publicFlow .flex__item{width:20%;text-align:center}.publicFlow .flex__item:nth-child(odd){background-color:var(--color-balloon);border-radius:5px;padding:2em}.publicFlow .flex__item .arrow:before{content:"";display:block;width:70px;height:36.5px;background:#000;clip-path:polygon(0 29.5%,66% 29.5%,66% 0,100% 50%,66% 100%,66% 70.5%,0 70.5%);margin:0 auto 10px}.sample-one{display:flex;align-items:center}.sample-one img{width:30px}.sample-two{display:flex;justify-content:space-between}.sample-two__item{width:49%}.sample-three{display:flex;justify-content:center;gap:15px}.sample-three button{cursor:pointer;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border-color);background-color:var(--colorBase);transition:.2s all}.sample-three button:hover{background-color:var(--color-primary);color:var(--colorBase)}.flex{display:flex;border:5px solid var(--color-selector);padding:20px;gap:20px}.justify{display:flex;border:2px solid var(--border-color)}.justify.center{justify-content:center}.justify.align{justify-content:space-between}.justify.around{justify-content:space-around}.align{display:flex;height:150px;border:2px solid var(--border-color)}.align.center{align-items:center}.align.start{align-items:flex-start}.align.stretch{align-items:stretch}.align div{padding:10px;border:1px solid;background-color:var(--color-balloon);min-width:23%}.align.wrap{flex-wrap:wrap}.two-column{display:flex;margin-top:20px}.two-column__image{border:1px solid}.two-column__image.fle{flex:2}.two-column__image.wid{width:50%}.two-column__text{border:1px solid}.two-column__text.fle{flex:8}.two-column__text.wid{width:50%}.three-column{display:flex;gap:20px;margin-top:20px}.card{flex:1;background:#fff;padding:20px;border-radius:8px;border:1px solid}.nav{display:flex;justify-content:space-between;align-items:center}.nav__menu{display:flex;gap:20px;list-style:none;padding:0}@media screen and (max-width:767px){.lesson-004 .three-column{flex-direction:column}}.lesson-004 .sec01__fleximg{width:300px;height:300px;max-width:100%;margin:0 auto}.lesson-004 .sec01__fleximg img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.lesson-004 .sec01__fleximg.pc{padding:2%}.lesson-004 .sec01__fleximg.tb{padding:10%}.lesson-004 .sec01__fleximg.sp{padding:20%}.lesson-004 .sec01__flextitle{padding:.5em;text-align:center;background-color:var(--color-balloon);font-weight:700}.lesson-004 .sec01__box-002{position:relative;display:flex;flex-direction:column;align-items:center;width:240px;height:460px;margin:0 auto 20px;overflow:hidden;border:8px solid #000000;border-radius:25px;box-sizing:content-box;box-shadow:0 15px 30px -7px #000c4233;background:#303030}.lesson-004 .sec01__box-002:after{position:absolute;bottom:5px;width:60px;height:3px;border-radius:20px;background-color:#fffc;content:""}.lesson-004 .sec01__box-002 svg{display:flex;justify-content:center;align-items:center;position:absolute;width:60px;height:15px;border-radius:0 0 15px 15px;background-color:#000}.lesson-004 .sec01__box-002 .img{width:100%;height:100%;overflow:scroll}.lesson-004 .sec01__box-002 img{width:100%;-o-object-fit:contain;object-fit:contain}.lesson-004 .sec02__structure{text-align:center}.lesson-004 .sec02__structure-item{position:relative;padding:.7em .2em;border-radius:.5em;margin-bottom:50px}.lesson-004 .sec02__structure-item:after{content:"";display:block;position:absolute;bottom:-35px;left:50%;transform:translate(-50%);height:20px;width:50px;clip-path:polygon(0% 0,100% 0%,50% 100%);background-color:#000}.lesson-004 .sec02__structure-item.full{background-color:var(--color-primary)}.lesson-004 .sec02__structure-item.three{background-color:var(--color-secondary)}.lesson-004 .sec02__structure-img{width:150px;height:150px;max-width:100%;margin:0 auto}.lesson-004 .sec02__structure-img img{height:100%;-o-object-fit:contain;object-fit:contain}.lesson-004 .sec02__structure-img.tb{padding:12px}.lesson-004 .sec02__structure-img.sp{padding:25px}.lesson-007 .btn{display:inline-block;padding:12px 20px;background-color:#007bff;color:#fff;border:none;cursor:pointer;margin-bottom:20px}.lesson-007 .box{display:none;padding:20px;background-color:#f0f0f0;border:1px solid #ccc}.lesson-007 .box.open{display:block}.lesson-007 .nav{display:none;background:#333;padding:20px}.lesson-007 .nav ul{list-style:none;padding:0}.lesson-007 .nav li{margin-bottom:10px}.lesson-007 .nav a{color:#fff;text-decoration:none}.lesson-007 .nav.open{display:block}.lesson-007 .hamburger{font-size:24px;padding:10px;cursor:pointer}.lesson-007 .fade{max-height:300px;overflow:scroll;border:1px solid #999;position:relative;padding:5%}.lesson-007 .fade__scroll{display:flex;align-items:center;justify-content:center;position:relative;padding-bottom:6rem;padding-top:4rem}.lesson-007 .fade__scroll:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:1px;height:5rem;background:#666;animation:scroll 2s ease-in-out infinite}.lesson-007 .fade__item{opacity:0;transform:translateY(50px);transition:.8s;margin:60px 0;padding:20px;background:#eee;height:200px;display:flex;align-items:center;justify-content:center}.lesson-007 .fade__item.show{opacity:1;transform:translateY(0)}@keyframes scroll{0%{transform:scaleY(0);transform-origin:0 0}50%{transform:scale(1);transform-origin:0 0}51%{transform:scale(1);transform-origin:0 100%}to{transform:scaleY(0);transform-origin:0 100%}}.lesson-008 .flex__column{display:flex;flex-direction:column;align-items:center;justify-content:center}.lesson-008 .arrow{display:block;width:70px;height:40px;background:#000;clip-path:polygon(0 30.9%,63.2% 30.9%,63.2% 0,100% 50%,63.2% 100%,63.2% 69.1%,0 69.1%)}.lesson-008 .arrow.reverse{transform:rotate(180deg)}.lesson-008 .arrow__wrap{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px}.lesson-008 .arrow__wrap:first-child{margin-bottom:40px}.lesson-008 .accordion{width:100%;margin:20px auto;border-top:1px solid #ddd}.lesson-008 .accordion-item{border-bottom:1px solid #ddd}.lesson-008 .accordion-header{width:100%;padding:20px;text-align:left;background:none;border:none;font-size:16px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.lesson-008 .accordion-header:before,.lesson-008 .accordion-header:after{content:"";position:absolute;right:20px;width:15px;height:2px;background-color:#333;transition:all .3s}.lesson-008 .accordion-header:after{transform:rotate(90deg)}.lesson-008 .accordion-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s;overflow:hidden}.lesson-008 .accordion-content p{min-height:0;padding:0 20px}.lesson-008 .accordion-item.is-open .accordion-header:after{transform:rotate(0)}.lesson-008 .accordion-item.is-open .accordion-content{grid-template-rows:1fr;padding-bottom:20px}.lesson-008 .html-accordion-item{border-bottom:1px solid #eee}.lesson-008 .html-accordion-header{padding:20px;font-weight:700;cursor:pointer;list-style:none;background:#f9f9f9;color:#333;display:flex;justify-content:space-between;align-items:center}.lesson-008 .html-accordion-header:after{content:"＋";font-size:1.2rem;color:#1e90ff}.lesson-008 .html-accordion-header::-webkit-details-marker{display:none}.lesson-008 .html-accordion-content{padding:20px}.lesson-008 .html-accordion-item[open] .html-accordion-header:after{content:"ー"}.lesson-008 .swiper{border-radius:12px}.lesson-008 .swiper-slide{border-radius:12px;display:flex;align-items:center;justify-content:center;height:300px;font-size:24px}.lesson-008 .swiper-slide.slide01{background-color:#20b2aa33}.lesson-008 .swiper-slide.slide02{background-color:#ffa50033}.lesson-008 .swiper-slide.slide03{background-color:#ffb6c133}.lesson-008 .swiper-button-prev,.lesson-008 .swiper-button-next{background-color:#fff;color:tomato;border-radius:50%;box-sizing:border-box;padding:13px}.lesson-008 .swiper-pagination-bullet{background:#fff;opacity:1;transition:all .3s}.lesson-008 .swiper-pagination-bullet-active{background:tomato;width:20px;border-radius:4px}.p-showcase.cSuperWrapper{padding-top:0}.p-showcase--hero{position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;background:url(/img/showcase/kv.webp) no-repeat center center/cover}.p-showcase--hero__content{width:60%;z-index:1;background:#00000080;background-image:repeating-linear-gradient(65deg,transparent,transparent 9px,#5B060E 0,#5B060E 10px,transparent 0,transparent 13px,#5B060E 0,#5B060E 14px,transparent 0,transparent 15px),repeating-linear-gradient(-65deg,transparent,transparent 3px,#5B060E 0,#5B060E 4px,transparent 0,transparent 5px,#5B060E 0,#5B060E 6px,transparent 0,transparent 9px,#5B060E 0,#5B060E 10px);color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5);padding:16px;text-align:center}@media screen and (max-width:1359px){.p-showcase--hero__content{width:100%}}.p-showcase--hero h1{font-size:3.8rem;margin-bottom:20px}@media screen and (max-width:1359px){.p-showcase--hero h1{font-size:3.5rem}}@media screen and (max-width:1023px){.p-showcase--hero h1{font-size:2.6rem}}@media screen and (max-width:575px){.p-showcase--hero h1{font-size:2rem}}.p-showcase--hero p{font-size:1.5rem;line-height:1.8;margin-bottom:40px}@media screen and (max-width:1023px){.p-showcase--hero p{font-size:1.3rem}}@media screen and (max-width:575px){.p-showcase--hero p{font-size:1rem}}.p-showcase--hero__action .cButton{background-color:#007bff;color:#fff;padding:15px 30px;border-radius:5px;text-decoration:none;font-size:1.2rem;transition:background-color .3s ease}.p-showcase--hero__action .cButton:hover{background-color:#0056b3}.p-showcase--cafe{padding-top:50px;position:relative}.p-showcase--cafe ._sectionHead{position:absolute;top:10px;left:5%;z-index:2;width:90%}@media screen and (max-width:575px){.p-showcase--cafe ._sectionHead{top:10px;left:50%;transform:translate(-50%);width:90%}}.p-showcase--cafe ._sectionHead{margin-bottom:40px}.p-showcase--cafe ._sectionHead h2{font-family:Playfair Display,serif;font-size:5rem;color:#333;margin-bottom:5px;letter-spacing:.05em;text-align:left}@media screen and (max-width:1359px){.p-showcase--cafe ._sectionHead h2{font-size:4.1rem}}@media screen and (max-width:1023px){.p-showcase--cafe ._sectionHead h2{font-size:3.6rem}}@media screen and (max-width:575px){.p-showcase--cafe ._sectionHead h2{font-size:3rem;text-align:center}}.p-showcase--cafe ._sectionHead p{font-family:"Noto Serif JP",serif;font-size:1.5rem;color:#555;line-height:1.6;text-align:right;display:flex;align-items:center;white-space:nowrap;position:absolute;top:60px;right:0;text-shadow:1px 1px 2px rgba(0,0,0,.1)}@media screen and (max-width:1359px){.p-showcase--cafe ._sectionHead p{font-size:1.3rem}}@media screen and (max-width:1023px){.p-showcase--cafe ._sectionHead p{font-size:1.2rem}}@media screen and (max-width:575px){.p-showcase--cafe ._sectionHead p{font-size:1.1rem;text-align:center;position:static;transform:none;margin-top:10px;justify-content:center}}.p-showcase--cafe ._sectionHead p .season-name-wrapper{display:flex;transform:rotate(2deg)}.p-showcase--cafe ._sectionHead p .season-name-wrapper span{display:inline-block;opacity:0;animation-fill-mode:forwards;transform:translateZ(0)}.p-showcase--cafe ._sectionHead p .kind-text-display{display:inline-block;margin-left:10px;font-family:Playfair Display,serif;font-size:1.2rem;color:#777;text-shadow:none;transform:none;opacity:0;animation:fade-in-kind-text .5s forwards}@media screen and (max-width:575px){.p-showcase--cafe ._sectionHead p .kind-text-display{font-size:.9rem;margin-left:5px}}.p-showcase--cafe ._sectionHead p.spring .season-name-wrapper span{animation-name:dance-spring;animation-duration:.8s;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}.p-showcase--cafe ._sectionHead p.summer .season-name-wrapper span{animation-name:dance-summer;animation-duration:.6s;animation-timing-function:ease-in-out}.p-showcase--cafe ._sectionHead p.autumn .season-name-wrapper span{animation-name:dance-autumn;animation-duration:1.2s;animation-timing-function:cubic-bezier(.76,0,.24,1)}.p-showcase--cafe ._sectionHead p.winter .season-name-wrapper span{animation-name:dance-winter;animation-duration:.8s;animation-timing-function:linear}.p-showcase--cafe__menu{padding:80px 0;position:relative;overflow:hidden}@media screen and (max-width:575px){.p-showcase--cafe__menu{padding:40px 0}}.p-showcase--cafe__menu .swiper-active-slide-bg{position:absolute;z-index:0;transition:all .5s cubic-bezier(.68,-.55,.27,1.55);pointer-events:none;opacity:0}.p-showcase--cafe__menu .mySwiper{width:100%;max-width:1200px;height:auto;padding:50px 0;margin:0 auto;position:relative;overflow:visible;z-index:1}@media screen and (max-width:575px){.p-showcase--cafe__menu .mySwiper{padding:30px 0}}.p-showcase--cafe__menu .swiper-slide{text-align:center;background:#ffffff0d;display:flex;justify-content:center;align-items:center;border-radius:15px;overflow:hidden;box-shadow:0 15px 30px #0006,inset 0 0 10px #ffffff1a;transition:all .5s cubic-bezier(.68,-.55,.27,1.55);transform-style:preserve-3d;position:relative;border:1px solid rgba(255,255,255,.1)}.p-showcase--cafe__menu .swiper-slide:before,.p-showcase--cafe__menu .swiper-slide:after{content:"";position:absolute;border-radius:15px;transition:all .5s ease}.p-showcase--cafe__menu .swiper-slide:before{inset:10px;border:1px solid rgba(255,255,255,.05);transform:translateZ(20px)}.p-showcase--cafe__menu .swiper-slide:after{top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#e74c3c33,#f1c40f33);mix-blend-mode:overlay;opacity:0;transform:translateZ(10px)}.p-showcase--cafe__menu .swiper-slide:hover{transform:scale(1.05) rotateY(10deg);box-shadow:0 25px 50px #0009,inset 0 0 20px #fff3}.p-showcase--cafe__menu .swiper-slide:hover:after{opacity:1}.p-showcase--cafe__menu .swiper-slide img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:10px;transition:all .7s cubic-bezier(.25,.46,.45,.94);filter:contrast(1.2) saturate(1.3) sepia(.3);mix-blend-mode:luminosity}.p-showcase--cafe__menu .swiper-slide:hover img{transform:scale(1.1) rotate(-2deg);filter:contrast(1.5) saturate(1.5) sepia(.1) brightness(1.1);mix-blend-mode:normal}.p-showcase--cafe__menu .swiper-button-next,.p-showcase--cafe__menu .swiper-button-prev{color:#ecf0f1;width:60px;height:60px;background-color:#2c3e50b3;border-radius:50%;box-shadow:0 5px 15px #0000004d;transition:all .4s ease-in-out;transform:scale(.8)}.p-showcase--cafe__menu .swiper-button-next.swiper-slide-active img,.p-showcase--cafe__menu .swiper-button-prev.swiper-slide-active img{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;backface-visibility:hidden;transform:translateZ(0)}.p-showcase--cafe__menu .swiper-button-next:hover,.p-showcase--cafe__menu .swiper-button-prev:hover{background-color:#3498db;color:#fff;transform:scale(1);box-shadow:0 8px 20px #3498db80}.p-showcase--cafe__menu .swiper-button-next:after,.p-showcase--cafe__menu .swiper-button-prev:after{font-size:2rem}@media screen and (max-width:575px){.p-showcase--cafe__menu .swiper-button-next,.p-showcase--cafe__menu .swiper-button-prev{display:none}}.p-showcase--cafe__menu.is-animated .swiper-slide{animation:crazySlideIn 1.2s forwards cubic-bezier(.175,.885,.32,1.275);opacity:0;transform:translateY(50px) scale(.8) rotate(10deg)}.p-showcase--cafe__menu.is-animated .swiper-slide:nth-child(1){animation-delay:.1s}.p-showcase--cafe__menu.is-animated .swiper-slide:nth-child(2){animation-delay:.2s}.p-showcase--cafe__menu.is-animated .swiper-slide:nth-child(3){animation-delay:.3s}.p-showcase--cafe__menu.is-animated .swiper-slide:nth-child(4){animation-delay:.4s}.p-showcase--cafe__menu.is-animated .swiper-slide:nth-child(5){animation-delay:.5s}.p-showcase--cafe__menu.is-animated .swiper-slide:nth-child(6){animation-delay:.6s}.p-showcase--cafe__menu.is-animated .swiper-slide:nth-child(7){animation-delay:.7s}.p-showcase--cafe__menu.is-animated .swiper-slide:nth-child(8){animation-delay:.8s}.p-showcase--cafe__menu.is-animated .swiper-slide:nth-child(9){animation-delay:.9s}@keyframes crazySlideIn{to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}.p-showcase--tourism{padding-top:80px;padding-bottom:80px;background:linear-gradient(to bottom,#e0f2f7,#c9e6f2)}.p-showcase--tourism ._sectionHead{text-align:center;margin-bottom:60px}.p-showcase--tourism ._sectionHead h2{font-family:Playfair Display,serif;font-size:4rem;color:#2196f3;margin-bottom:10px;letter-spacing:.05em}@media screen and (max-width:767px){.p-showcase--tourism ._sectionHead h2{font-size:2.8rem}}@media screen and (max-width:575px){.p-showcase--tourism ._sectionHead h2{font-size:2.1rem}}.p-showcase--tourism ._sectionHead p{font-family:"Noto Serif JP",serif;font-size:1.4rem;color:#555;line-height:1.6}@media screen and (max-width:767px){.p-showcase--tourism ._sectionHead p{font-size:1rem}}.p-showcase--tourism ._pamphlet{position:relative;display:flex;justify-content:center;align-items:center;height:100%}@media screen and (max-width:767px){.p-showcase--tourism ._pamphlet{height:60svh}}.p-showcase--tourism ._pamphlet .__oneImage{position:absolute;aspect-ratio:1300/2330;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 20px #0003;border:5px solid #fff;transition:transform .6s cubic-bezier(.23,1,.32,1),opacity .4s ease,left .6s ease,z-index 0s .3s}@media screen and (max-width:767px){.p-showcase--tourism ._pamphlet .__oneImage{width:40%;left:30%!important}}.p-showcase--tourism ._pamphlet .__oneImage img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.p-showcase--tourism ._pamphlet .__oneImage:nth-child(1){left:calc(10% + 0px);right:calc(10% + -0px);z-index:9;animation-delay:2s;transform-origin:right bottom;transform:rotate(0) translateY(0)}.p-showcase--tourism ._pamphlet .__oneImage:nth-child(2){left:calc(10% + 15px);right:calc(10% - 15px);z-index:8;animation-delay:4s;transform-origin:right bottom;transform:rotate(2deg) translateY(4px)}.p-showcase--tourism ._pamphlet .__oneImage:nth-child(3){left:calc(10% + 30px);right:calc(10% - 30px);z-index:7;animation-delay:6s;transform-origin:right bottom;transform:rotate(4deg) translateY(6px)}.p-showcase--tourism ._pamphlet .__oneImage:nth-child(4){left:calc(10% + 45px);right:calc(10% - 45px);z-index:6;animation-delay:8s;transform-origin:right bottom;transform:rotate(6deg) translateY(8px)}.p-showcase--tourism ._pamphlet .__oneImage:nth-child(5){left:calc(10% + 60px);right:calc(10% - 60px);z-index:5;animation-delay:10s;transform-origin:right bottom;transform:rotate(8deg) translateY(10px)}.p-showcase--tourism ._pamphlet .__oneImage:nth-child(6){left:calc(10% + 75px);right:calc(10% - 75px);z-index:4;animation-delay:12s;transform-origin:right bottom;transform:rotate(10deg) translateY(12px)}.p-showcase--tourism ._pamphlet .__oneImage:nth-child(7){left:calc(10% + 90px);right:calc(10% - 90px);z-index:3;animation-delay:14s;transform-origin:right bottom;transform:rotate(12deg) translateY(14px)}.p-showcase--tourism ._pamphlet .__oneImage:nth-child(8){left:calc(10% + 105px);right:calc(10% - 105px);z-index:2;animation-delay:16s;transform-origin:right bottom;transform:rotate(14deg) translateY(16px)}.p-showcase--tourism ._pamphlet .__oneImage:nth-child(9){left:calc(10% + 120px);right:calc(10% - 120px);z-index:1;animation-delay:18s;transform-origin:right bottom;transform:rotate(16deg) translateY(18px)}.p-showcase--tourism ._pamphlet .__oneImage.is-leaving{transform:translate(150%) rotate(100deg)!important;opacity:0;z-index:11!important;transition:transform .6s ease-in,opacity .4s ease}@media screen and (max-width:767px){.p-showcase--tourism ._pamphlet .__oneImage.is-leaving{transform:translate(-150%) rotate(50deg)!important}}.p-showcase--tourism__curriculum .cFlex2QS{align-items:center}@media screen and (max-width:767px){.p-showcase--tourism__curriculum .cFlex2QS{flex-direction:column}}.p-showcase--tourism__curriculum .cFlex2QS ._sub{padding:20px;border-radius:15px;transition:transform .3s ease}.p-showcase--tourism__curriculum .cFlex2QS ._sub img{display:block;width:100%;height:auto;border-radius:10px}.p-showcase--tourism__curriculum .cFlex2QS ._main h3{font-family:"Noto Serif JP",serif;font-size:2.2rem;color:#3f51b5;margin-bottom:25px;border-left:5px solid #2196f3;padding-left:15px}@media screen and (max-width:767px){.p-showcase--tourism__curriculum .cFlex2QS ._main h3{font-size:1.8rem}}@media screen and (max-width:575px){.p-showcase--tourism__curriculum .cFlex2QS ._main h3{font-size:1.4rem}}.p-showcase--tourism__curriculum .cFlex2QS ._main p{font-size:1.1rem;line-height:1.8;margin-bottom:15px;color:#444}.p-showcase--tourism__curriculum .cFlex2QS ._main ul{list-style:none;margin-left:0;padding-left:0}.p-showcase--tourism__curriculum .cFlex2QS ._main ul li{font-size:1rem;line-height:1.6;margin-bottom:10px;position:relative;padding-left:25px;color:#333}.p-showcase--tourism__curriculum .cFlex2QS ._main ul li:before{content:"✈️";position:absolute;left:0;color:#2196f3;font-size:1.2em;line-height:1}.p-showcase--tourism__curriculum .cFlex2QS ._main ul li strong{color:#007bff}.p-showcase--tourism__curriculum .cFlex2QS ._main ul li a{color:#1976d2;text-decoration:underline}@keyframes dance-spring{0%{opacity:0;transform:translateY(100%) rotate(30deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes dance-summer{0%{opacity:0;transform:translateY(20px) scale(.5)}60%{opacity:1;transform:translateY(-15px) scale(1.1)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dance-autumn{0%{opacity:0;transform:translateY(-20px) scale(.5) rotate(-180deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@keyframes dance-winter{0%{opacity:0;transform:translateY(10px)}25%{opacity:1;transform:translate(-2px) rotate(-2deg)}50%{transform:translate(2px) rotate(2deg)}75%{transform:translate(-2px) rotate(-2deg)}to{opacity:1;transform:translate(0) rotate(0)}}@keyframes spring-first-char{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes summer-first-char{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}@keyframes autumn-first-char{0%{transform:rotate(0)}25%{transform:rotate(15deg)}50%{transform:rotate(0)}75%{transform:rotate(-15deg)}to{transform:rotate(0)}}@keyframes winter-first-char{0%{transform:translate(0)}25%{transform:translate(-3px) rotate(-2deg)}50%{transform:translate(0)}75%{transform:translate(3px) rotate(2deg)}to{transform:translate(0)}}.p-showcase--cafe ._sectionHead p.spring .season-name-wrapper span.first-char{animation-name:dance-spring,spring-first-char;animation-duration:.8s,1s;animation-timing-function:cubic-bezier(.34,1.56,.64,1),ease-in-out;animation-iteration-count:1,infinite;animation-direction:normal,alternate;animation-fill-mode:forwards,forwards}.p-showcase--cafe ._sectionHead p.summer .season-name-wrapper span.first-char{animation-name:dance-summer,summer-first-char;animation-duration:.6s,.8s;animation-timing-function:ease-in-out,ease-out;animation-iteration-count:1,infinite;animation-direction:normal,normal;animation-fill-mode:forwards,forwards}.p-showcase--cafe ._sectionHead p.autumn .season-name-wrapper span.first-char{animation-name:dance-autumn,autumn-first-char;animation-duration:1.2s,1.5s;animation-timing-function:cubic-bezier(.76,0,.24,1),ease-in-out;animation-iteration-count:1,infinite;animation-direction:normal,normal;animation-fill-mode:forwards,forwards}.p-showcase--cafe ._sectionHead p.winter .season-name-wrapper span.first-char{animation-name:dance-winter,winter-first-char;animation-duration:.8s,1s;animation-timing-function:linear,ease-in-out;animation-iteration-count:1,infinite;animation-direction:normal,normal;animation-fill-mode:forwards,forwards}@keyframes fade-in-kind-text{0%{opacity:0}to{opacity:1}}@keyframes pamphletLoop{0%{transform:translate(0) rotate(0);z-index:10;opacity:1}5%{transform:translate(110%) rotate(5deg);z-index:10;opacity:1}6%{transform:translate(110%);z-index:1;opacity:0}10%{transform:translate(0);z-index:1;opacity:1}to{transform:translate(0);z-index:1}}@keyframes anime-__img1{0%{top:30px;left:50px;z-index:9;transform:rotate(8deg)}40%{top:30px;left:50px;z-index:9;transform:rotate(5deg)}50%{top:0;left:0;z-index:11;transform:rotate(0)}90%{top:0;left:0;z-index:11;transform:rotate(0)}to{top:30px;left:50px;z-index:9;transform:rotate(8deg)}}