@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap";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;scroll-padding-top:var(--headerHeight);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: #7a846a;--color-secondary: #b2baa8;--color-tertiary: #f8f9fa;--color-accent: #e67e22;--color-point: #EEEEE6;--color-shadow: rgba(0, 0, 0, .1);--border-color: #ccc;--color-balloon: #f2f2f2;--color-emphasis: #e6e6e6;--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 12px;border-radius:5px;z-index:3}.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;text-decoration:none}.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:0;display:block;font-size:1.2rem}}.l-footer{padding:var(--fontCriterion) 0;background-color:var(--color-logo);color:var(--colorBase);text-align:center}.uMarker{background:linear-gradient(90deg,#fcf69f,#fcf69f);background-repeat:no-repeat;background-position:left bottom;background-size:100% 35%;padding:0 3px 2px}.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}@media screen and (max-width:767px){.curriculum{--fontCriterion: 12px}}.curriculum .cLessonList{list-style:none;padding:0;margin-top:40px}.curriculum .cLessonList li{background-color:var(--colorBase);border-bottom:1px solid var(--color-tertiary);transition:background-color .3s ease;list-style:none}.curriculum .cLessonList li:first-child{border-top:1px solid var(--color-tertiary)}.curriculum .cLessonList li:hover{background-color:var(--color-tertiary)}.curriculum .cLessonList li a{position:relative;display:flex;align-items:center;padding:25px 20px;color:var(--color-basic-text);text-decoration:none}@media screen and (max-width:767px){.curriculum .cLessonList li a{flex-direction:column;align-items:flex-start;padding:15px 30px 15px 10px}}.curriculum .cLessonList li a .lesson-number{font-size:1.2rem;font-weight:700;color:var(--color-primary);margin-right:10px;flex-shrink:0}@media screen and (max-width:767px){.curriculum .cLessonList li a .lesson-number{margin-bottom:.25em;font-size:1rem}}.curriculum .cLessonList li a .lesson-title{font-size:1.6rem;font-weight:600;line-height:1.5}@media screen and (max-width:767px){.curriculum .cLessonList li a .lesson-title{font-size:1.2rem}}.curriculum .cLessonList li a:after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;border-top:2px solid var(--color-primary);border-right:2px solid var(--color-primary);transform:translateY(-50%) rotate(45deg);color:var(--color-primary)}@media screen and (max-width:767px){.curriculum .cLessonList li a:after{right:13px}}.tech-page{letter-spacing:.02em;overflow:hidden}@media screen and (max-width:767px){.tech-page{--fontCriterion: 12px}}.tech-page h1 .lesson-number{font-weight:700;color:var(--color-primary);margin-right:10px;font-size:.75em}.tech-page h2{margin-top:2em;border-left:5px solid var(--color-primary);background-color:var(--color-tertiary);padding:.7em .8em}.tech-page h3:not([class]){margin:3em calc(var(--fontCriterion) / 2) 2em;padding:.7em .5em;border-bottom:4px solid var(--color-secondary);letter-spacing:.05em}@media screen and (max-width:767px){.tech-page h3:not([class]){font-size:1rem}}.tech-page h4{padding:.4em .8em;margin:2.5em calc(var(--fontCriterion) / 2) 1.5em;border-left:4px solid var(--border-color)}.tech-page p{padding-left:calc(var(--fontCriterion) / 2);padding-right:calc(var(--fontCriterion) / 2);line-height:2;margin-bottom:1em}.tech-page p:last-child{margin-bottom:0}.tech-page small,.tech-page sup{font-size:.85em;opacity:.5}.tech-page figure{margin-bottom:1.5em}.tech-page img{width:100%}.tech-page section{position:relative}.tech-page section:last-of-type{margin-bottom:calc(var(--fontCriterion) * 3)}.tech-page section h3:first-of-type{margin-top:0}.tech-page section h4:first-of-type{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{padding:0;margin-left:calc(var(--fontCriterion) / 2);margin-right:calc(var(--fontCriterion) / 2);margin-bottom:2em}.tech-page ul:last-child{margin-bottom:0}.tech-page ul li{padding:0;margin-left:1.5em;list-style:disc;line-height:2.2}@media screen and (max-width:767px){.tech-page ul li{line-height:1.85}}.tech-page ol{margin-left:calc(var(--fontCriterion) / 2);margin-right:calc(var(--fontCriterion) / 2);margin-bottom:2em;list-style:decimal}.tech-page ol:last-child{margin-bottom:0}.tech-page ol li{margin-left:1.5em;line-height:2.2}@media screen and (max-width:767px){.tech-page ol li{line-height:1.85}}.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:.23em .55em .25em;font-size:.83em;margin:0 .2em}.tech-page pre{border-radius:5px;margin:0 calc(var(--fontCriterion) / 2) 2em;white-space:pre-wrap}.tech-page pre:last-child{margin-bottom:0}.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;line-height:1.75}.tech-page table tr{border-top:1px solid var(--border-color)}.tech-page table tr:last-child{border-bottom:1px solid var(--border-color)}.tech-page table tr th{text-align:left;background-color:var(--color-tertiary)}@media screen and (max-width:767px){.tech-page table tr th{background-color:var(--color-secondary)}}.tech-page table tr th,.tech-page table tr td{padding:1em 1.2em;vertical-align:top}@media screen and (max-width:767px){.tech-page table tr th,.tech-page table tr td{display:block;padding:.8em 1em}}.tech-page table tr th:not(:last-child),.tech-page table tr td:not(:last-child){border-right:1px solid var(--border-color)}@media screen and (max-width:767px){.tech-page table tr th:not(:last-child),.tech-page table tr td:not(:last-child){border:none}}@media screen and (max-width:767px){.tech-page table tr th:before,.tech-page table tr td:before{content:attr(data-label);font-weight:700}}@media screen and (max-width:767px){.tech-page table thead{display:none}}.tech-page table thead tr{border:none}.tech-page table thead tr th,.tech-page table thead tr td{text-align:center;background-color:var(--color-logo);color:#fff;font-weight:500;letter-spacing:.1em}.tech-page .mb-0{margin-bottom:0}.tech-page .btn{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;margin-bottom:2em;padding:.5em 1.5em;border:2px solid var(--color-accent);border-radius:5px;background-color:var(--color-accent);color:#fff;line-height:2;letter-spacing:.05em;text-decoration:none;transition:.2s}.tech-page .btn:hover{background-color:#fff;color:var(--color-accent)}.tech-page .goal{width:100%;border:2px solid var(--color-primary);border-radius:5px;margin:0 0 5%}.tech-page .goal__title{padding:.2em 0;color:var(--colorBase);background:var(--color-primary);text-align:center}.tech-page .goal__title p{margin:0;font-size:1.5em}@media screen and (max-width:767px){.tech-page .goal__title p{font-size:1.25em}}.tech-page .goal__contents{padding:1em 1.5em}@media screen and (max-width:767px){.tech-page .goal__contents{padding:.5em 1em}}.tech-page .goal__contents ul{margin:0}.tech-page .goal__contents ul li{position:relative;display:flex;gap:0 15px;padding:.5em .3em;margin:0}.tech-page .goal__contents ul li:before{content:"";position:relative;top:.65em;display:inline-block;width:16px;height:16px;border:2px solid var(--border-color);border-radius:2px;flex-shrink:0}@media screen and (max-width:767px){.tech-page .goal__contents ul li:before{top:.45em}}.tech-page .goal__contents ul li:after{content:"";position:absolute;top:1.2em;left:.55em;display:inline-block;width:17px;height:8px;border-bottom:2px solid var(--color-accent);border-left:2px solid var(--color-accent);transform:rotate(-45deg) translateY(-1.5px)}@media screen and (max-width:767px){.tech-page .goal__contents ul li:after{top:1em}}.tech-page .toc{max-width:95%;margin:0 auto 30px;padding:1.5em 2em;border:1px solid var(--border-color);border-radius:5px}@media screen and (max-width:767px){.tech-page .toc{padding:.8em 1.2em}}.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:1em}@media screen and (max-width:767px){.tech-page .toc ol{padding-left:0}}.tech-page .toc li{font-weight:600;padding:.2em 0}.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:not(:last-child){margin-bottom:2em}}.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 .flex__three:not(:last-child){margin-bottom:2em}}.tech-page .point{display:flex;align-items:flex-start;gap:0 .5em;margin:0 calc(var(--fontCriterion) / 2) 2rem;padding:1em;border-radius:5px;background-color:var(--color-point);position:relative}.tech-page .point:before{content:"";position:relative;top:.54em;display:inline-block;width:16px;height:16px;border:2px solid var(--border-color);border-radius:2px;flex-shrink:0}.tech-page .point:after{content:"";position:absolute;top:1.6em;left:1.25em;display:inline-block;width:17px;height:8px;border-bottom:2px solid var(--color-accent);border-left:2px solid var(--color-accent);transform:rotate(-45deg) translateY(-1.5px)}.tech-page .point p{margin:0}.tech-page .tab{display:flex;flex-wrap:wrap;gap:0 10px;width:calc(100% - var(--fontCriterion) / 2 * 2);overflow:hidden}.tech-page .tab>label{flex:1 1;order:-1;opacity:.5;min-width:70px;padding:.6em 1em;border-radius:5px 5px 0 0;background-color:var(--color-secondary);color:#fff;font-size:.9em;text-align:center;cursor:pointer}.tech-page .tab>label:hover{opacity:.8}.tech-page .tab input{display:none}.tech-page .tab>div{display:none;width:100%;padding:1.5em 1em;background-color:#fff;border:1px solid var(--border-color)}.tech-page .tab label:has(:checked){opacity:1}.tech-page .tab label:has(:checked)+div{display:block}.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;margin-bottom:2em;padding:.6em 2em;border:2px solid var(--color-accent);border-radius:5px;background-color:var(--color-accent);color:#fff;text-decoration:none;transition:.2s}.modal__open-label:hover{background-color:#fff;color:var(--color-accent)}.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__close-label{top:-17px;right:-4%}.modal__content{padding:33px 21px 35px;max-width:100%}.modal__content-wrap{width:90vw}}.lesson-001 .design-sample{justify-content:flex-start;gap:20px;margin-top:10px}.lesson-001 .img__sitemap{max-width:800px;margin-left:auto;margin-right:auto}.lesson-001 .icon__folder{display:inline-block;vertical-align:middle;color:#333;line-height:1;border-radius:0 .2em .2em;background:#fff;box-sizing:content-box;position:relative;padding:.7em 1em;margin:.5em 0;background-color:#add8e6;z-index:1}.lesson-001 .icon__folder:before{content:"";position:absolute;left:0;bottom:100%;width:20px;height:5px;background:#fff;border-radius:.1em .1em 0 0;background-color:#add8e6}.lesson-001 .icon__folder:after{content:"";position:absolute;bottom:100%;left:20px;width:5px;aspect-ratio:1;clip-path:polygon(0 100%,0 0,100% 100%);background-color:#add8e6;z-index:-1}.lesson-001 .icon__file{display:inline-block;padding:.3em 1em;border:1px solid var(--border-color);margin:.5em 0;border-radius:.1em}.lesson-001 .productionFlow{display:flex;align-items:flex-start;flex-direction:column;gap:20px;padding-left:1em;padding-top:1em;padding-bottom:1em;position:relative}.lesson-001 .productionFlow:before{content:"";position:absolute;width:3px;height:100%;top:0;left:1em;background-color:var(--border-color)}.lesson-001 .productionFlow__item{display:flex;align-items:center;justify-content:center;padding-left:2em;position:relative;transition:.2s all;gap:10px}@media screen and (max-width:767px){.lesson-001 .productionFlow__item{flex-direction:column;align-items:flex-start;width:100%;gap:0}}.lesson-001 .productionFlow__item-title{font-weight:700;font-size:1.2em;margin-bottom:.1em}.lesson-001 .productionFlow__item-title span{font-size:1.15em;font-weight:700;margin-right:.2em;vertical-align:bottom}.lesson-001 .productionFlow__item:before{content:"";position:absolute;top:50%;left:-.29em;width:12px;height:12px;background-color:var(--border-color);border-radius:50%;transform:translateY(-50%)}.lesson-001 .productionFlow__item:hover{color:var(--color-accent)}.lesson-001 .productionFlow__item:hover:before{background-color:var(--color-accent)}.lesson-001 .publicFlow{align-items:center}@media screen and (max-width:767px){.lesson-001 .publicFlow{gap:20px}}.lesson-001 .publicFlow .flex__item{width:12%;text-align:center}@media screen and (max-width:767px){.lesson-001 .publicFlow .flex__item{width:100%}}.lesson-001 .publicFlow .flex__item:nth-child(odd){width:25%;background-color:var(--color-balloon);border-radius:5px;padding:2em}@media screen and (max-width:767px){.lesson-001 .publicFlow .flex__item:nth-child(odd){width:100%}}.lesson-001 .publicFlow .flex__item:nth-child(odd) span{display:inline-block;background-color:var(--border-color);padding:.2em .5em;border-radius:3px;font-size:.85em;margin-top:.5em}.lesson-001 .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}@media screen and (max-width:767px){.lesson-001 .publicFlow .flex__item .arrow:before{width:40px;transform:rotate(90deg)}}.lesson-001 .relative-path__example{justify-content:flex-start;gap:40px}.lesson-001 .relative-path__example .flex__item{width:auto}.lesson-002 .result p:not(:last-child){margin-bottom:0}.lesson-002 .result.__1 p{color:red}.lesson-002 .result.__2 #highlight{color:red;font-weight:700}.lesson-002 .result.__2 .text-blue{color:#00f}.lesson-002 .result.__3 .text01,.lesson-002 .result.__3 .text02,.lesson-002 .result.__4 .element01 p{color:red}.lesson-002 .box-model{position:relative;padding:40px}.lesson-002 .box-model p{position:absolute;top:1%;left:40px}.lesson-002 .box-model.__margin{background-color:#ffd6ad}.lesson-002 .box-model.__border{background-color:#ffffc6;border:2px solid var(--color-basic-text)}.lesson-002 .box-model.__padding{background-color:#e0ffc1}.lesson-002 .box-model.__content{background-color:#cce5ff}.lesson-002 .box{margin:60px;padding:40px;border:2px solid #333;border-radius:10px;background-color:#ffffc6}.lesson-002 .element__block p,.lesson-002 .element__block div{background-color:#ccc;padding:10px 5px}.lesson-002 .element__inline a,.lesson-002 .element__inline span{box-sizing:content-box;padding:10px;background-color:#ddd}.lesson-002 .inline-box{display:inline-block;background:#ddd;padding:10px}.lesson-002 .button{display:inline-block;width:200px;padding:12px;margin-bottom:20px;background-color:#e67e22;color:#fff;text-decoration:none;font-weight:700;text-align:center;border-radius:8px}.lesson-002 .button:hover{background-color:#e6a373}.lesson-002 .button:after{content:" →";margin-left:10px}.lesson-003 .sample-one{display:flex;align-items:center}.lesson-003 .sample-one img{width:30px}.lesson-003 .sample-two{display:flex;justify-content:space-between}.lesson-003 .sample-two__item{width:49%}.lesson-003 .sample-three{display:flex;justify-content:center;gap:15px}.lesson-003 .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}.lesson-003 .sample-three button:hover{background-color:var(--color-accent);border-color:var(--color-accent);color:var(--colorBase)}.lesson-003 .flex{display:flex;border:5px solid var(--color-balloon);padding:20px;gap:20px}.lesson-003 .justify{display:flex;border:2px solid var(--border-color)}.lesson-003 .justify.start{justify-content:flex-start}.lesson-003 .justify.end{justify-content:flex-end}.lesson-003 .justify.center{justify-content:center}.lesson-003 .justify.between{justify-content:space-between}.lesson-003 .justify.around{justify-content:space-around}.lesson-003 .align{display:flex;border:2px solid var(--border-color)}.lesson-003 .align.center{align-items:center}.lesson-003 .align.start{align-items:flex-start}.lesson-003 .align.end{align-items:flex-end}.lesson-003 .align.stretch{align-items:stretch}.lesson-003 .align div{padding:10px;border:1px solid;background-color:var(--color-balloon);width:24%}.lesson-003 .align.wrap{flex-wrap:wrap}.lesson-003 .two-column{display:flex;justify-content:space-between}.lesson-003 .two-column__item{width:49%}.lesson-003 .two-column__image{border:1px solid}.lesson-003 .two-column__image.fle{flex:2}.lesson-003 .two-column__image.wid{width:40%}.lesson-003 .two-column__text{border:1px solid}.lesson-003 .two-column__text.fle{flex:8}.lesson-003 .two-column__text.wid{width:60%}.lesson-003 .three-column{display:flex;gap:30px}.lesson-003 .three-column .card{flex:1;background:#fff;box-shadow:0 0 10px #ddd}.lesson-003 .three-column .card__textarea{padding:20px}.lesson-003 .three-column .card__textarea p{padding:0;line-height:inherit}.lesson-003 .three-column .card__title{font-size:20px;margin-bottom:8px}.lesson-003 .header.sample{display:flex;justify-content:space-between;align-items:center;width:calc(100% - var(--fontCriterion) / 2 * 2);padding:20px;border-radius:10px;box-shadow:0 0 10px #ddd}.lesson-003 .header.sample .logo{font-size:20px;font-weight:700;letter-spacing:.1em}@media screen and (max-width:767px){.lesson-003 .header.sample .logo{font-size:18px}}.lesson-003 .header.sample .nav__menu{display:flex;gap:20px;padding:0;margin-bottom:0}@media screen and (max-width:767px){.lesson-003 .header.sample .nav__menu{gap:0px}}.lesson-003 .header.sample .nav__menu li{list-style:none}@media screen and (max-width:767px){.lesson-003 .header.sample .nav__menu li{font-size:14px}}.lesson-004 .pc-layout{display:flex;justify-content:space-between}.lesson-004 .pc-layout__item{width:49%}.lesson-004 .sp-layout{max-width:375px;margin:0 auto}.lesson-004 .header.sample{display:flex;justify-content:space-between;align-items:center;width:100%;padding:20px;border-radius:10px;box-shadow:0 0 10px #ddd}.lesson-004 .header.sample .logo{font-size:20px;font-weight:700;letter-spacing:.1em}.lesson-004 .header.sample .nav__menu{display:flex;gap:20px;padding:0;margin-bottom:0}.lesson-004 .header.sample .nav__menu li{list-style:none}.lesson-004 .header.sample .hamburgerbtn{display:flex;flex-direction:column;justify-content:space-between;padding:11px 8px;width:40px;height:40px;border-radius:5px;background-color:var(--color-accent)}.lesson-004 .header.sample .hamburgerbtn span{display:block;background-color:#fff;width:100%;height:2px}.lesson-004 .pc-text{font-size:120px;line-height:1;font-weight:700}.lesson-004 .sp-text{font-size:60px;line-height:1;font-weight:700}.lesson-004 .two-column{display:flex;justify-content:space-between;flex-wrap:wrap}.lesson-004 .two-column__item{width:49%}@media screen and (max-width:767px){.lesson-004 .two-column__item{width:100%}}.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 30px;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-006 .font{background-color:var(--color-balloon);padding:1em}.lesson-006 .font p{margin-bottom:.5em}.lesson-006 .font__ok{font-family:Zen Kaku Gothic New,sans-serif;font-weight:400;font-style:normal}.lesson-006 .font__ng{font-family:Kaisei Decol,serif;font-weight:400;font-style:normal}.lesson-006 .sawarabi-mincho{font-family:Sawarabi Mincho,serif;font-weight:400;font-style:normal}.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-color:var(--color-balloon);padding:20px}.lesson-007 .nav li{margin-bottom:10px;list-style:none}.lesson-007 .nav a{text-decoration:none}.lesson-007 .nav.open{display:block}.lesson-007 .hamburger{padding:5px 10px 10px;border:none;border-radius:3px;background-color:var(--color-logo);color:#fff;font-size:24px;line-height:1;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}.lesson-009 .btn{display:flex;max-width:300px;width:100%;border-radius:100px;transition:.3s}.lesson-009 .btn.center{margin:0 auto}.lesson-009 .btn-sample{display:flex;justify-content:center;align-items:center;width:250px;padding:.9em 2em;margin-bottom:20px;border-radius:25px;background-color:var(--color-accent);color:#fff;font-size:1em;text-decoration:none;transition:.3s}.lesson-009 .btn-sample:after{content:"";width:8px;height:8px;margin-left:10px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);transition:.3s}.lesson-009 .btn-sample:hover{opacity:.8}.lesson-009 .btn-sample:hover:after{transform:translate(5px) rotate(45deg)}.lesson-009 .btn-lift{transition:.3s}.lesson-009 .btn-lift:after{display:none}.lesson-009 .btn-lift:hover{transform:translateY(-4px);box-shadow:0 8px 15px #0000001a}.lesson-009 .card-zoom{width:100%;max-width:500px;overflow:hidden}.lesson-009 .card-zoom img{transition:transform .5s ease}.lesson-009 .card-zoom:hover img{transform:scale(1.1)}.lesson-009 .nav-wrap{justify-content:flex-start;gap:40px}.lesson-009 .nav-link{position:relative;text-decoration:none}.lesson-009 .nav-link:after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background-color:#e67e22;transform:scaleX(0);transition:transform .3s ease;transform-origin:right}.lesson-009 .nav-link:hover:after{transform:scaleX(1);transform-origin:left}.lesson-009 .fade-up{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}.lesson-009 .fade-up.is-show{opacity:1;transform:translateY(0)}@keyframes floating{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.lesson-009 .btn-attention{animation:floating 3s ease-in-out infinite}.lesson-009 .btn-attention.delay{animation-delay:.25s}.lesson-009 .btn-attention.slow{animation:floating 5s ease-in-out infinite}.lesson-009 .txt{display:flex;overflow:hidden;margin-bottom:2em}.lesson-009 .txt p{color:#5f9ea0;font-size:24px;font-weight:700;letter-spacing:.06em;margin:0;transform:translateY(2em);animation:textanimation 1s forwards}.lesson-009 .txt.bad p:nth-child(1){animation-delay:1s}.lesson-009 .txt.bad p:nth-child(2){animation-delay:2s}.lesson-009 .txt.bad p:nth-child(3){animation-delay:3s}.lesson-009 .txt.bad p:nth-child(4){animation-delay:4s}.lesson-009 .txt.bad p:nth-child(5){animation-delay:5s}.lesson-009 .txt.bad p:nth-child(6){animation-delay:6s}.lesson-009 .txt.bad p:nth-child(7){animation-delay:7s}.lesson-009 .txt.bad p:nth-child(8){animation-delay:8s}.lesson-009 .txt.bad p:nth-child(9){animation-delay:9s}.lesson-009 .txt.bad p:nth-child(10){animation-delay:10s}.lesson-009 .txt.bad p:nth-child(11){animation-delay:11s}.lesson-009 .txt.bad p:nth-child(12){animation-delay:12s}.lesson-009 .txt.good p:nth-child(1){animation-delay:.2s}.lesson-009 .txt.good p:nth-child(2){animation-delay:.4s}.lesson-009 .txt.good p:nth-child(3){animation-delay:.6s}.lesson-009 .txt.good p:nth-child(4){animation-delay:.8s}.lesson-009 .txt.good p:nth-child(5){animation-delay:1s}.lesson-009 .txt.good p:nth-child(6){animation-delay:1.2s}.lesson-009 .txt.good p:nth-child(7){animation-delay:1.4s}.lesson-009 .txt.good p:nth-child(8){animation-delay:1.6s}.lesson-009 .txt.good p:nth-child(9){animation-delay:1.8s}.lesson-009 .txt.good p:nth-child(10){animation-delay:2s}.lesson-009 .txt.good p:nth-child(11){animation-delay:2.2s}.lesson-009 .txt.good p:nth-child(12){animation-delay:2.4s}@keyframes textanimation{0%{transform:translateY(2em)}to{transform:translateY(0)}}.lesson-009 .sway-txt{animation:swayanimation 1s infinite}@keyframes swayanimation{0%{transform:translate(2em)}50%{transform:translate(0)}to{transform:translate(2em)}}.lesson-009 .slide-txt{animation:slideanimation 1s forwards;opacity:0}@keyframes slideanimation{0%{transform:translate(2em)}to{transform:translate(0);opacity:1}}.lesson-012 .publicFlow{text-align:center;align-items:center}@media screen and (max-width:767px){.lesson-012 .publicFlow{gap:1rem}}@media screen and (max-width:767px){.lesson-012 .publicFlow.sp-reverse{flex-direction:column-reverse}}.lesson-012 .publicFlow__wrap{background-color:var(--color-balloon);padding:2rem}@media screen and (max-width:767px){.lesson-012 .publicFlow__wrap{padding:1.2rem 1rem}}.lesson-012 .publicFlow__item{width:20%}@media screen and (max-width:767px){.lesson-012 .publicFlow__item{width:100%}}.lesson-012 .publicFlow__item:nth-child(odd) p{display:inline-block;background-color:var(--border-color);padding:0 .7em;border-radius:3px;font-size:.85em;margin-top:.5em}.lesson-012 .publicFlow__item figure{max-width:100px;margin:0 auto}@media screen and (max-width:767px){.lesson-012 .publicFlow__item figure{max-width:70px}}.lesson-012 .publicFlow__item .arrow{display:inline-block;width:80px;height:30px;background:var(--border-color);clip-path:polygon(0 31%,63.2% 31%,63.2% 0,100% 50%,63.2% 100%,63.2% 69%,0 69%)}@media screen and (max-width:767px){.lesson-012 .publicFlow__item .arrow{width:40px;margin-top:.5em;transform:rotate(90deg)}}.lesson-012 .publicFlow__item .arrow.reverse{transform:rotate(180deg)}@media screen and (max-width:767px){.lesson-012 .publicFlow__item .arrow.reverse{transform:rotate(90deg)}}.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)}}