@charset "UTF-8";



/*  reset
-----------------------------------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    background: transparent;
}
body {
    line-height: 1;
    color: #000;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
/*
ul, li {
  list-style: none;
}
*/
ul[class] li {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ins {
    background-color: #ff9;
    color: #474747;
    text-decoration: none;
}
mark {
    background-color: #ff9;
    color: #474747;
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}
input, select {
    vertical-align: middle;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
::-ms-expand {
    display: none;
}
img {
    vertical-align: top;
    width:100%;
    height:auto;
}

/*  basic
-----------------------------------------------------------------------------*/
*,*::before,*::after {
    box-sizing: border-box;
}
body {
    /*    letter-spacing: .04em;*/
}
a ,a:visited ,a:hover {
    color: #000;
    text-decoration: none;
}
.clearfix:after {
    height: 0;
    display: block;
    clear: both;
    content: " ";
}
/* style */
html,
body {
    width: 100%;
}
/* support iOS */
html{
    height: -webkit-fill-available;
}
body{
    min-height: 100vh;
    min-height: -webkit-fill-available;
}
html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
}
body{
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
}
.myfont{
    font-family: 'EB Garamond', 'YuMincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Shippori Mincho', 'MS PMincho', serif;
    font-family: 'Arial', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
    font-family: "Noto Sans JP", sans-serif;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}
.noto-sans .jp-uniquifier {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;/* Thin */
    font-weight: 200;/* ExtraLight */
    font-weight: 300;/* Light */
    font-weight: 400;/* Regular */
    font-weight: 500;/* Medium */
    font-weight: 600;/* SemiBold */
    font-weight: 700;/* Bold */
    font-weight: 800;/* ExtraBold */
    font-weight: 900;/* Black */
    font-style: normal;
}

@media only screen and (min-width:769px) {
    .brpc{display:inline;}
    .brsp{display:none;}
}
@media only screen and (max-width:768px) {
    .brpc{display:none;}
    .brsp{display:inline;}
}

@media only screen and (min-width:769px) {
    .hide-sp{display:block;}
    .hide-pc{display:none;}
}
@media only screen and (max-width:768px) {
    .hide-sp{display:none;}
    .hide-pc{display:block;}
}

/* common
-------------------------------------------------------------*/
body {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #000;
    font-family: "Open Sans", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, 'Roboto', sans-serif;
}
.wrapper {
    width: 100%;
    position: relative;
    z-index:1;
/*

    background-image: url(../img/bg_sauna_.png);
    background-position:50% 0%;
    background-size: 1280px auto;
    background-repeat:no-repeat;

 */
}
.firstview{
    width:100vw;
    height:100vh;
    max-width:1280px;
    max-height:800px;
    margin:0 auto;
    position: relative;
    z-index:1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-main{
    width:100%;
    max-width:183px;
}

@media only screen and (max-width:1280px) {
    .logo-main{
        max-width:240px;
    }
}

/* footer
-------------------------------------------------------------*/
.myfooter{
    width:100%;
    max-width:1000px;
    min-height:270px;
    margin:0 auto;
    padding:60px 0;
    position: relative;
    z-index:1;
}
.logo-footer {
    width: 240px;
    margin-bottom:120px;
}
.content-footer {
    width:100%;
    margin:0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.icon-instagram{
    width:100%;
    max-width: 180px;
}
.icon-instagram p{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
}
.icon-instagram .icon-image{
    width:100%;
    max-width: 30px;
    position:relative;
}
.icon-instagram .icon-image img{
    width:100%;
    max-width: 100%;
    height:auto;
}
.icon-instagram .icon-image img:nth-of-type(2){
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}
.icon-instagram .sauna-ikitai{
    display:block;
    font-size:1.5rem;
    font-weight:500;
    letter-spacing: .12em;
    line-height: 1.2;
    color: #1F1F1F;
}
.copyright-footer{

    font-size:1.2rem;
    font-weight:500;
    letter-spacing: .04em;
    line-height: 1.2;
    color: #1F1F1F;
}
@media (hover: hover) and (pointer: fine) {
    .icon---image img{
        transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    }
    .icon---image:hover img{
        transform: scale(1.1);
    }
    .icon-instagram .sauna-ikitai{
        transition: color 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    }
    .icon-instagram .sauna-ikitai:hover{
        color: #EA5854;
        color: #83CCCB;
    }
    .icon-instagram .icon-image img{
        transition: opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    }
    .icon-instagram .icon-image:hover img:nth-of-type(1){
        opacity:0;
    }
    .icon-instagram .icon-image:hover img:nth-of-type(2){
        opacity:1;
    }
}

@media only screen and (max-width:1280px) {
    .myfooter{
        width:86%;
        max-width:1000px;
        min-height:240px;
        margin:0 auto;
        padding:40px 0 30px;
    }
    .logo-footer {
        width: 160px;
        margin:0 auto 120px;
    }
    .content-footer {
        width:86%;
        max-width:1000px;
        margin:0 auto;
        flex-direction:column ;
        align-items: flex-end;
        justify-content: flex-end;
        gap:20px;
    }
    .icon-instagram{
        width:auto;
        max-width: 100%;
    }
    .icon-instagram p{
        flex-direction:column ;
        align-items: flex-end;
        gap:20px;
    }
    .icon-instagram .icon-image{
        width:100%;
        max-width: 30px;
    }
    .icon-instagram .sauna-ikitai{
        font-size:1.3rem;
    }
    .copyright-footer{
        font-size:1.1rem;
    }
}

/* logo fixed
------------------------------------------------------------------*/
.logo-fixed {
    position: fixed;
    top: 36px;
    left: 36px;
    width: 60px;
    display: block;
    z-index: 100;
}
@media (hover: hover) and (pointer: fine) {
    .logo-fixed img{
        transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    }
    .logo-fixed:hover img{
        transform: scale(1.1);
    }
}

/* nav fixed
------------------------------------------------------------------*/
.nav-fixed {
    position: fixed;
    top: 190px;
    left: 36px;
    display: block;
    z-index: 80;
}
.title-nav-fixed{
    font-size:2rem;
    font-weight:600;
    letter-spacing: .04em;
    line-height: 1.2;
    color: #FFF;
    margin-bottom:32px;
}
.list-nav-fixed{}
.list-nav-fixed li{
    margin-bottom:20px;
    padding-left:25px;
    position:relative;
}
.list-nav-fixed li:before{
    width:15px;
    height:15px;
    display: inline-block;
    content: "";
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index:1;
    transform: translate(0%, -50%);
}
.list-nav-fixed li a{
    font-size:1.6rem;
    font-weight:500;
    letter-spacing: .04em;
    line-height: 1.2;
    color: #FFF;
}
@media only screen and (max-width:1000px) {
    .nav-fixed {
        position: absolute;
        top: 170px;
        left: 7%;
        width:86%;
        max-width:390px;
    }
}
@media (hover: hover) and (pointer: fine) {
    .list-nav-fixed li a{
        transition: color 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    }
    .list-nav-fixed li:nth-of-type(2n) a:hover{
        color:#1f1f1f;
    }
    .list-nav-fixed li:nth-of-type(2n-1) a:hover{
        color:#1f1f1f;
    }
}
/* trigger-overlay
------------------------------------------------------------------*/
.trigger-overlay {
    position: fixed;
    top: 36px;
    right: 33px;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transform: rotate(0deg);
    transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
.trigger-overlay img{
    position: relative;
    transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
.trigger-overlay:before {
    width: 36px;
    height: 36px;
    display: inline-block;
    content: "";
    background-image: url(../img/button_toggled.png);
    background-position:50% 50%;
    background-size: 36px 36px;
    background-repeat:no-repeat;
    transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}
.trigger-overlay.is-pulled:before {
    transform: rotate(450deg);
    opacity:1;
}
.trigger-overlay.is-pulled img{
    transform: rotate(360deg);
}

@media only screen and (max-width:1000px) {
    .trigger-overlay {
        top: 20px;
        right: 20px;
        width: 32px;
        height: 32px;
    }
    .trigger-overlay:before {
        width: 32px;
        height: 32px;
        background-size: 32px 32px;
    }
    .logo-fixed {
        top: 20px;
        left: 20px;
        width: 42px;
    }
}

/**/
.div-border{border-right:1px solid red;border-bottom:1px solid red;}
/**/

/* section
-------------------------------------------------------------*/
.mysection{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    position:relative;
}

/* section relax
-------------------------------------------------------------*/
.section-relax{
    width:100%;
    margin:0 auto;
}
.content-relax{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:0;
}
.wrap-img-relax {
    width:100%;
    margin:0 auto 96px;
    padding:24px 0;
}
.img-relax {
    width:500px;
    height:750px;
    margin:0 auto;
}
.wrap-sticky-relax {
    width:100%;
    margin:0 auto 96px;
    padding:24px 0;
}
.sticky-relax {
    width:500px;
    height:750px;
    height:1500px;
    margin:0 auto;
    position:relative;
}
.sticky-relax .img-relax {
    width:500px;
    height:750px;
    margin:0;
    position:sticky;
    top:0;
    top:80px;
    clip-path: inset(50px 50px 50px 50px);
}
.title-relax{
  /*  font-size:3.7rem;
    font-weight:500;
    letter-spacing: .0em;
    line-height: 1.4;
    color: #1F1F1F;*/
    margin-bottom:54px;
    width:320px;
}
.text-relax{
    }
.text-relax p{
    font-size:1.7rem;
    font-weight:400;
    letter-spacing: .08em;
    line-height: 2.17;
    margin-bottom:2em;
}
.wrap-animation-relax{
    width:100%;
    padding-bottom:0px;
    margin-top:-18%;
    margin-bottom:-12%;
    position:relative;
}
.animation-relax{
    width:640px;
    transform: scale(0.8);
    transform-origin: bottom left;
    transform-origin: top left;
/*    position:absolute;
    bottom:188px;
    bottom:96px;
    left:0px;*/
}
.js-animation circle{
    transition: transform 1s linear;
}
.js-animation #Ellipse_1{
    transform:translate(241px ,138px);
}
.js-animation #Ellipse_8{
    transform:translate(186px ,452px);
}
.js-animation #Ellipse_10{
    transform:translate(48px ,162px);
}
.js-animation #Ellipse_4{
    transform:translate(566px ,274px);
}
.js-animation #Ellipse_2{
    transform:translate(424px ,233px);
}
.js-animation #Ellipse_12{
    transform:translate(538px ,442px);
}
.js-animation #Ellipse_9{
    transform:translate(20px ,424px);
}
.js-animation #Ellipse_5{
    transform:translate(233px ,11px);
}
.js-animation #Ellipse_3{
    transform:translate(501px ,107px);
}
.js-animation #Ellipse_11{
    transform:translate(438px ,396px);
}
.js-animation #Ellipse_6{
    transform:translate(112px ,289px);
}
.js-animation #Ellipse_7{
    transform:translate(313px ,573px);
}
.js-animation.inSight #Ellipse_1{
    transform:translate(131px ,225px);
}
.js-animation.inSight #Ellipse_8{
    transform:translate(373px ,425px);
}
.js-animation.inSight #Ellipse_10{
    transform:translate(58px ,369px);
}
.js-animation.inSight #Ellipse_4{
    transform:translate(428px ,107px);
}
.js-animation.inSight #Ellipse_2{
    transform:translate(265px ,210px);
}
.js-animation.inSight #Ellipse_12{
    transform:translate(527px ,294px);
}
.js-animation.inSight #Ellipse_9{
    transform:translate(237px ,521px);
}
.js-animation.inSight #Ellipse_5{
    transform:translate(58px ,148px);
}
.js-animation.inSight #Ellipse_3{
    transform:translate(307px ,64px);
}
.js-animation.inSight #Ellipse_11{
    transform:translate(379px ,266px);
}
.js-animation.inSight #Ellipse_6{
    transform:translate(222px ,350px);
}
.js-animation.inSight #Ellipse_7{
    transform:translate(455px ,465px);
}
.wrap-content-relax{
    width:100%;
    position:relative;
}
.wrap-column-relax{
    width:100%;
    margin-bottom:0px;
 /*   padding-bottom:390px;*/
    position:relative;
    display: flex;
}
.wrap-photo-relax{
    width:100%;
    height:500px;
    margin-bottom:160px;
    position:relative;
}
.img-column-relax{
    width:600px;
    padding-top:180px;
    position:relative;
}
.text-column-relax{
    width:40%;
    max-width:400px;
    padding-top:0px;
    position:relative;
}
.wrap-img-relax.js-animation {
}
.img-relax {
    position:relative;
    width:500px;
    height:750px;
}
.cell---img-relax {
    width:200px;
    height:300px;
    overflow:hidden;
    position: absolute;
    bottom:0;
    left:50%;
    transform: translate(-50%, 0);
}
.inSight .cell-img-relax {
    width:500px;
    height:750px;
    transition: width ease 0.8s ,height ease 0.8s;
}
.cell-img---relax img{
    transform: scale(1.33333);
}
.cell-img-relax img{
    transform: scale(1);
}
.inSight .cell-img-relax img{
    transform: scale(1);
    transition: transform ease 0.8s;
}
@media only screen and (max-width:1280px) {
    .content-relax{
        width:100%;
        max-width:1000px;
        margin:0 auto;
        padding:0;
    }
    .wrap-img-relax {
        width:100%;
        margin:0 auto 96px;
        padding:24px 0;
    }
    .img-relax {
        width:260px;
        height:390px;
        margin:0 auto;
    }
    .wrap-sticky-relax {
        width:100%;
        margin:0 auto 72px;
        padding:0;
    }
    .sticky-relax {
        width:260px;
        height:390px;
        height:780px;
        margin:0 auto;
    }
    .sticky-relax .img-relax {
        width:260px;
        height:390px;
        margin:0;
        position:sticky;
        top:0;
        top:72px;
        clip-path: inset(50px 50px 50px 50px);
    }
    .title-relax{
     /*   font-size:3.3rem;*/
        margin-bottom:44px;
        width:240px;
    }
    .text-relax{
    }
    .text-relax p{
        font-size:1.5rem;
        margin-bottom:2em;
    }
    .wrap-animation-relax{
        width:100%;
        max-width:390px;
        height:540px;
        margin:0 auto;
        padding-top:72px;
        padding-bottom:72px;
        position:relative;
        overflow:hidden;
    }
    .animation-relax{
        width:640px;
        transform: scale(0.6);
        transform-origin: top left;
        position:static;
    }
    .js-animation circle{
    }
    .wrap-content-relax{
        width:100%;
        position:relative;
    }
    .wrap-column-relax{
        width:100%;
        max-width:390px;
        margin:0 auto;

        flex-direction: column;
    }
    .wrap-photo-relax{
        width:100%;
        height:500px;
        margin-bottom:160px;
        position:relative;
    }
    .img-column-relax{
        width:330px;
        padding-top:20px;
        position:relative;
    }
    .text-column-relax{
        width:100%;
        max-width:260px;
        margin:0 auto;
        padding-top:0px;
        position:relative;
    }
}

/* section floormap
-------------------------------------------------------------*/
.section-floormap{
    width:100%;
    margin:0 auto;
}
.content-floormap{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:0 0 40px;
}
.fig-floormap {
    width:100%;
    margin:0 0 160px;
    display: flex;
    flex-wrap: nowrap;
    gap:77px;
}
.fig-floormap:last-of-type {
    margin-bottom:0;
}
.fig-floormap dt{
    font-size:6.5rem;
    font-weight:700;
    letter-spacing: .04em;
    line-height: 1.2;
    color: #1F1F1F;
}
.fig-floormap dd{
    width:800px;
}
.wrap-animation-floormap{
    width:100%;
    padding-bottom:70px;
    position:relative;
}
.animation-floormap{
    width:840px;
    margin:0 auto;
}

@media only screen and (max-width:1280px) {
    .content-floormap{
        width:100%;
        max-width:1000px;
        margin:0 auto;
        padding:0;
    }
    .figure-floormap {
        width:100%;
        max-width:400px;
        margin:0 auto;
    }
}

/* section moimoi
-------------------------------------------------------------*/
.section-moimoi{
    width:100%;
    margin:0 auto;
    padding:0;
    /*  overflow:hidden;*/
}
.content-moimoi{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding-top:200px;
}
.title-moimoi{
    width:100%;
    max-width:1000px;
    margin:0 auto 56px;
}
.title-moimoi h2{
    /*font-size:5.0rem;
    font-weight:700;
    letter-spacing: .0em;
    line-height: 1.4;
    color: #1F1F1F;*/
    margin-bottom:37px;
}
.title-moimoi h2 img{
    width:180px;
}
.title-moimoi h3{
    font-size:2.4rem;
    font-weight:700;
    letter-spacing: .04em;
    line-height: 1.4;
    color: #1F1F1F;
    margin-bottom:0px;
}
.text-moimoi{
    width:100%;
    max-width:1000px;
    margin:0 auto 56px;
}
.text-moimoi p{
    width:400px;
    font-size:1.7rem;
    font-weight:400;
    letter-spacing: .08em;
    line-height: 2.17;
    margin-bottom:2em;
}
.wrap-img-moimoi {
    width:100%;
    margin:0 0 80px;
    padding:0;
}
.img-moimoi {
    width:900px;
    height:600px;
    overflow:hidden;
    position:relative;
}
.cell-img--moimoi {
    width:120px;
    height:180px;
    overflow:hidden;
    position: absolute;
    top:50%;
    left:20%;
    transform: translate(0%, -50%);
}
.wrap-img-moimoi.inSight .cell-img--moimoi {
    width:900px;
    height:600px;
    left:0;
    transition: width ease 0.8s ,height ease 0.8s,left ease 0.8s;
}
.sticky-moimoi .wrap-img-moimoi {
    width:100%;
    margin:0 0 96px;
    padding:24px 0;
}
.sticky-moimoi .img-moimoi {
    width:900px;
    height:600px;
    margin:0 ;
}
.wrap-sticky-moimoi {
    width:100%;
    margin:0 auto 96px;
    padding:24px 0;
}
.sticky-moimoi {
    width:900px;
    height:600px;
    height:1200px;
    margin:0;
    position:relative;
}
.sticky-moimoi .img-moimoi {
    width:900px;
    height:600px;
    margin:0;
    position:sticky;
    top:0;
    top:80px;
    clip-path: inset(50px 50px 50px 50px);
}
.cell-img--moimoi img{
    transform: scale(1.3);
}
.wrap-img-moimoi.inSight .cell-img--moimoi img{
    transform: scale(1);
    transition: transform ease 0.8s;
}
.column-img-moimoi {
    width:100%;
    max-width:1000px;
    height:480px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
}
.column-img-moimoi-01 {
    width:380px;
    height:304px;
    background-color: #b2b2b2;
    align-self: flex-end;
}
.column-img-moimoi-02 {
    width:500px;
    height:400px;
    background-color: #b2b2b2;
    transform: translate(0, -108px);
}
.wrap-animation-moimoi{
    width:100%;
    padding-bottom:70px;
    overflow:hidden;
}
.animation-moimoi{
    width:840px;
    margin:0 auto;
    position:relative;
}
.animation-moimoi:after{
    width:1000px;
    height:800px;
    display: block;
    content: "";
    width: 110%;
    height: 110%;
    position: absolute;
    top: 0;
    left: 0;
    top: -5%;
    left: -5%;
    background-color: #fff;
    z-index:4;
    transition: transform ease 1.2s;
}
.inSight .animation-moimoi:after{
    transform: translate(0, -110%);
    transition: transform ease 1.4s;
}
@media only screen and (max-width:1280px) {
    .content-moimoi{
        padding-top:80px;
    }
    .title-moimoi{
        width:86%;
        max-width:390px;
        margin:0 auto 48px;
    }
    .title-moimoi h2{
        /* font-size:4.0rem;*/
        margin-bottom:34px;
    }
    .title-moimoi h2 img{
        width:140px;
    }
    .title-moimoi h3{
        font-size:1.9rem;
        margin-bottom:0px;
    }
    .text-moimoi{
        width:86%;
        max-width:390px;
        margin:0 auto 48px;
    }
    .text-moimoi p{
        width:100%;
        font-size:1.5rem;
        margin-bottom:0;
    }
    .wrap-img-moimoi {
        width:100%;
        margin:0 0 50px;
        padding:0;
    }
    .img-moimoi {
        width:100%;
        max-width:390px;
        height:260px;
        overflow:hidden;
        position:relative;
    }
    .sticky-moimoi .wrap-img-moimoi {
        width:100%;
        margin:0 0 96px;
        padding:24px 0;
    }
    .sticky-moimoi .img-moimoi {
        width:100%;
        max-width:390px;
        height:260px;
        margin:0 ;
    }
    .wrap-sticky-moimoi {
        width:100%;
        margin:0 auto 50px;
        padding: 0;
    }
    .sticky-moimoi {
        width:100%;
        max-width:390px;
        height:260px;
        height:520px;
        margin:0 auto;
        position:relative;
    }
    .sticky-moimoi .img-moimoi {
        width:100%;
        max-width:390px;
        height:260px;
        margin:0;
        position:sticky;
        top:0;
        top:72px;
        clip-path: inset(50px 50px 50px 50px);
    }
    .column-img-moimoi {
        width:86%;
        max-width:390px;
        height:auto;
        margin:0 auto;
        flex-direction: column;
        gap:40px;
    }
    .column-img-moimoi-01 {
        width:220px;
        height:auto;
        align-self: flex-end;
        transform: translate(-20px, 0);
    }
    .column-img-moimoi-02 {
        width:170px;
        height:auto;
        transform: translate(0, 0);
    }
    .wrap-animation-moimoi{
        width:100%;
        padding-bottom:32px;
        overflow:hidden;
    }
    .animation-moimoi{
        width:300px;
        margin:0 auto;
        position:relative;
    }
    .animation-moimoi:after{
        width:1000px;
        height:800px;
        display: block;
        content: "";
        width: 110%;
        height: 110%;
        position: absolute;
        top: 0;
        left: 0;
        top: -5%;
        left: -5%;
        background-color: #fff;
        z-index:4;
        transition: transform ease 0.8s;
    }
    .inSight .animation-moimoi:after{
        transform: translate(0, -110%);
        transition: transform ease 0.8s;
    }
}

/* section mokki
-------------------------------------------------------------*/
.section-mokki{
    width:100%;
    margin:0 auto;
    padding:0;
   /* overflow:hidden;*/
}
.content-mokki{
    width:100%;
    max-width:1280px;
    margin:0 auto;
}
.wrap-img-mokki {
    width:100%;
    max-width:1280px;
    margin:0 0 100px;
    padding:0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.img--mokki {
    width:900px;
    height:600px;
    background-color: #b2b2b2;
    background-color: transparent;
    overflow:hidden;
    position:relative;
}
.cell-img--mokki {
    width:120px;
    height:180px;
    overflow:hidden;
    position: absolute;
    top:50%;
    right:20%;
    transform: translate(0%, -50%);
}
.wrap-img-mokki.bgCover {
    position:relative;
}
.wrap-img-mokki.bgCover:before{
    width:100vw;
    height:100%;
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    background-color: #fff;
    transform: translate(-50%,0%);
}
.cell-img--mokki img{
    transform: scale(1.3);
}
.wrap-img-mokki.inSight .cell-img-mokki img{
    transform: scale(1);
    transition: transform ease 0.8s;
}
.sticky-mokki .wrap-img-mokki {
    width:100%;
    margin:0 0 96px;
    padding:24px 0;
}
.sticky-mokki .img-mokki {
    width:900px;
    height:600px;
    margin:0 ;
}
.wrap-sticky-mokki {
    width:100%;
    margin:0 auto 96px;
    padding:24px 0;
}
.sticky-mokki {
    width:900px;
    height:600px;
    height:1200px;
    margin:0;
    position:relative;
}
.sticky-mokki .img-mokki {
    width:900px;
    height:600px;
    margin:0;
    position:sticky;
    top:0;
    top:80px;
    clip-path: inset(50px 50px 50px 50px);
}
.title-mokki{
    width:100%;
    max-width:240px;
    margin:0;
    position: relative;
    z-index:5;
}
.title-mokki h2{
   /* font-size:5.0rem;
    font-weight:700;
    letter-spacing: .0em;
    line-height: 1.4;
    color: #1F1F1F;*/
    margin-bottom:37px;
}
.title-mokki h2 img{
    width:144px;
}
.title-mokki h3{
    font-size:2.4rem;
    font-weight:700;
    letter-spacing: .04em;
    line-height: 1.4;
    color: #1F1F1F;
    margin-bottom:0px;
}
.wrap-column-mokki {
    width:100%;
    max-width:1000px;
    margin:0 auto 120px;
    margin:0 auto;
    padding:0;
    display: flex;
}
.text-mokki{
    width:40%;
    max-width:400px;
    width:400px;
    margin:0 0;
}
.text-mokki p{
    font-size:1.7rem;
    font-weight:400;
    letter-spacing: .08em;
    letter-spacing: .11em;
    line-height: 2.17;
}
.column-img-mokki {
    width:60%;
    max-width:600px;
    margin:0;
    display: flex;
    flex-direction: column;
}
.column-img-mokki-01 {
    width:380px;
    height:304px;
    background-color: #b2b2b2;
    margin-top:60px;
    align-self: flex-end;
}
.column-img-mokki-02 {
    width:450px;
    height:360px;
    background-color: #b2b2b2;
    margin-top:100px;
}
.wrap-animation-mokki{
    width:100%;
    padding-top:100px;
    padding-bottom:120px;
    position:relative;
    overflow:hidden;
}
.animation-mokki{
    width:1000px;
    margin:0 auto;
    display: flex;
}
.animation-mokki-left{
    width:500px;
}
.animation-mokki-right{
    width:500px;
}
.wrap-animation-mokki.inSight{
}
.inSight .animation-mokki{
}
.animation-mokki-left{
    transform: translate(-400px, 400px);
    transition: transform linear 0.8s;
}
.animation-mokki-right{
    transform: translate(400px, 400px);
    transition: transform linear 0.8s;
}
.inSight .animation-mokki-left{
    transform: translate(0px, 0px);
}
.inSight .animation-mokki-right{
    transform: translate(0px, 0px);
}

@media only screen and (max-width:1280px) {
    .content-mokki{
        width:100%;
        max-width:1280px;
        margin:0 auto;
    }
    .wrap-img-mokki {
        width:100%;
        max-width:390px;
        margin:0 auto 50px;
        flex-direction: column-reverse;
        gap:50px;
    }
    .wrap-img-mokki.bgCover {
        position:relative;
    }
    .wrap-img-mokki.bgCover:before{
        width:100vw;
        height:100%;
        display: inline-block;
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        background-color: #fff;
        transform: translate(-50%,0%);
    }
    .sticky-mokki .wrap-img-mokki {
        width:100%;
        margin:0 0 96px;
        padding:24px 0;
    }
    .sticky-mokki .img-mokki {
        width:100%;
        max-width:390px;
        height:260px;
        margin:0 auto;
    }
    .wrap-sticky-mokki {
        width:100%;
        margin:0 auto;
        padding:0;
    }
    .sticky-mokki {
        width:100%;
        max-width:390px;
        height:260px;
        height:520px;
        margin:0;
        position:relative;
    }
    .sticky-mokki .img-mokki {
        width:100%;
        max-width:390px;
        height:260px;
        margin:0;
        position:sticky;
        top:0;
        top:72px;
        clip-path: inset(50px 50px 50px 50px);
    }
    .title-mokki{
        width:100%;
        max-width:390px;
        width:86%;
        max-width:390px;
        margin:0 auto;
        z-index:5;
    }
    .title-mokki h2{
      /*  font-size:4.0rem;*/
        margin-bottom:34px;
    }
    .title-mokki h2 img{
        width:112px;
    }
    .title-mokki h3{
        font-size:1.9rem;
        margin-bottom:0px;
    }
    .wrap-column-mokki {
        width:86%;
        max-width:390px;
        margin:0 auto;
        padding:0;
        flex-direction: column;
        gap: 50px;
    }
    .text-mokki{
        width:40%;
        max-width:400px;
        width:100%;
        margin:0 0;
    }
    .text-mokki p{
        font-size:1.5rem;
        font-weight:400;
        letter-spacing: .08em;
        letter-spacing: .11em;
        line-height: 2.17;
    }
    .column-img-mokki {
        width:100%;
        max-width:330px;
        margin:0 auto;
        flex-direction: column;
        gap: 40px;
    }
    .column-img-mokki-01 {
        width:170px;
        height:auto;
        margin-top:0px;
        align-self: flex-end;
        margin-right:10px;
    }
    .column-img-mokki-02 {
        width:200px;
        height:auto;
        margin-top:0px;
        margin-left:40px;
    }
    .wrap-animation-mokki{
        width:100%;
        max-width:390px;
        margin:0 auto;
        padding-top:70px;
        padding-bottom:30px;
    }
    .animation-mokki{
        width:100%;
        justify-content: center;
    }
    .animation-mokki-left{
        width:165px;
    }
    .animation-mokki-right{
        width:165px;
    }
    .wrap-animation-mokki.inSight{
    }
    .inSight .animation-mokki{
    }
    .animation-mokki-left{
        transform: translate(-195px, 195px);
        transition: transform linear 0.8s;
    }
    .animation-mokki-right{
        transform: translate(195px, 195px);
        transition: transform linear 0.8s;
    }
    .inSight .animation-mokki-left{
        transform: translate(0px, 0px);
    }
    .inSight .animation-mokki-right{
        transform: translate(0px, 0px);
    }

    }


/* section tuoksu
-------------------------------------------------------------*/
.section-tuoksu{
    width:100%;
    margin:0 auto;
    padding:0;
    /*  overflow:hidden;*/
}
.content-tuoksu{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding-top:16px;
}
.title-tuoksu{
    width:100%;
    max-width:600px;
    margin:0 auto 83px;
}
.title-tuoksu h2{
    margin-bottom:39px;
}
.title-tuoksu h2 img{
    width:165px;
}
.text-tuoksu{
    width:100%;
    max-width:600px;
    margin:0 auto;
}
.text-tuoksu p{
    width:400px;
    font-size:1.7rem;
    font-weight:400;
    letter-spacing: .08em;
    line-height: 2.17;
    margin-bottom:0;
}
.wrap-img-tuoksu {
    width:100%;
    margin:0 0 80px;
    padding:0;
}
.img-tuoksu {
    width:520px;
    height:650px;
    overflow:hidden;
    position:relative;
}
.sticky-tuoksu .wrap-img-tuoksu {
    width:100%;
    margin:0 0 96px;
    padding:24px 0;
}
.sticky-tuoksu .img-tuoksu {
    width:520px;
    height:650px;
    margin:0 ;
}
.wrap-sticky-tuoksu {
    width:100%;
    margin:0 auto;
    padding:0;
}
.sticky-tuoksu {
    width:520px;
    height:650px;
    height:1300px;
    margin:0;
    position:relative;
}
.sticky-tuoksu .img-tuoksu {
    width:520px;
    height:650px;
    margin:0;
    position:sticky;
    top:0;
    top:80px;
    clip-path: inset(50px 50px 50px 50px);
}

.wrap-animation-tuoksu{
    width:100%;
    overflow:hidden;
}
.animation-tuoksu{
    width:260px;
    margin:0 0 0 86px;
    position:relative;
}

@media only screen and (min-width:1281px) {
    .wrap-flex-tuoksu{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        width:100%;
        max-width:1000px;
        margin:0 auto;
    }
    .wrap-animation-tuoksu{
        width:48%;
        max-width:480px;
        padding-bottom:256px;
        overflow:hidden;
    }
    .wrap-sticky-tuoksu {
        width:52%;
        max-width:520px;
        margin:0;
        padding:0;
    }
    .title-tuoksu{
        margin-top:-120px;
    }
}
@media only screen and (max-width:1280px) {
    .content-tuoksu{
        padding-top:40px;
    }
    .title-tuoksu{
        width:86%;
        max-width:390px;
        margin:0 auto 48px;
    }
    .title-tuoksu h2{
        /* font-size:4.0rem;*/
        margin-bottom:34px;
    }
    .title-tuoksu h2 img{
        width:140px;
    }
    .title-tuoksu h3{
        font-size:1.9rem;
        margin-bottom:0px;
    }
    .text-tuoksu{
        width:86%;
        max-width:390px;
        margin:0 auto 48px;
    }
    .text-tuoksu p{
        width:100%;
        font-size:1.5rem;
        margin-bottom:0;
    }
    .wrap-img-tuoksu {
        width:100%;
        margin:0 0 50px;
        padding:0;
    }
    .img-tuoksu {
        overflow:hidden;
        position:relative;
    }
    .sticky-tuoksu .wrap-img-tuoksu {
        width:100%;
        margin:0 0 96px;
        padding:24px 0;
    }
    .sticky-tuoksu .img-tuoksu {
        width:100%;
        max-width:260px;
        height:325px;
        margin:0 ;
    }
    .wrap-sticky-tuoksu {
        width:86%;
        max-width:390px;
        margin:-40px auto 50px;
        padding: 0;
    }
    .sticky-tuoksu {
        width:100%;
        max-width:260px;
        height:325px;
        height:650px;
        margin:0 ;
        position:relative;
    }
    .sticky-tuoksu .img-tuoksu {
        width:100%;
        max-width:260px;
        height:325px;
        margin:0;
        position:sticky;
        top:0;
        top:72px;
        clip-path: inset(50px 50px 50px 50px);
    }
    .wrap-animation-tuoksu{
        overflow:hidden;
        width: 86%;
        max-width: 390px;
        margin: 0 auto;
        padding: 0;
        display: flex;
        justify-content: flex-end;
    }
    .animation-tuoksu{
        width:130px;
        margin:0;
    }
}

/* background meri pieni aiti
-------------------------------------------------------------*/
.bg-meri-pieni-aiti{
    width:100%;
    margin:0 auto;
    padding-top:0;
    padding-top:462px;
    padding-top:592px;
    position:relative;
}
.bg-meri-pieni-aiti:after{
    width:100%;
    height:1064px;
    display: inline-block;
    content: "";
    background-image: url(../img/bg_meri_wave.png);
    background-position:50% 0%;
    background-size: 295px auto;
    background-repeat:repeat-x;
    position: absolute;
    top: 120px;
    left: 0;
    z-index:4;
}
.bg-meri-pieni-aiti:before{
    width:100%;
    height:40px;
    display: inline-block;
    content: "";
    background-image: url(../img/bg_meri_dot.png);
    background-position:50% 0%;
    background-size: 295px auto;
    background-repeat:repeat-x;
    position: absolute;
    top: 120px;
    left: 0;
    z-index:4;
}
.bg-meri-pieni-aiti:after{
    transform: translate(0, 320px);
    transition: transform ease 1.2s;
}
.bg-meri-pieni-aiti:before{
    transform: translate(0, 400px);
    transition: transform ease 1.2s;
}
.inSight.bg-meri-pieni-aiti:after{
    transform: translate(0, 0);
}
.inSight.bg-meri-pieni-aiti:before{
    transform: translate(0, 0);
}
/**/
.wrap-meri-pieni-aiti{
    width:100%;
    margin:0 auto;
    background-color:#83CCCB;
    position:relative;
    z-index:6;
/*    margin-top:-10vh;*/
}
.wrap-bg-meri{
    width:100%;
    margin:0 auto;
    background-color:#efefef;
    background-color:transparent;
    background: linear-gradient(180deg, transparent 0%, transparent 90%, #83CCCB 90%, #83CCCB 100%);
    position:relative;
    z-index:5;
/*    margin-top:-10vh;*/
}
.sticky-bg-meri {
    width:100%;
    height:1000px;
    height:120vh;
    margin:0;
    position:relative;
}
.bg-meri {
    width:100%;
    height:500px;
    height:100vh;
    margin:0;
    background-color:#dfdfdf;
    background-color:transparent;
    position:sticky;
    top:0;
    background-image: url(../img/bg_meri_wave.png);
    background-position:50% 90%;
    background-size: 295px auto;
    background-repeat:repeat-x;
}
.dot-meri {
    width:100%;
    height:40px;
    display: inline-block;
    background-image: url(../img/bg_meri_dot.png);
    background-position:50% 0%;
    background-size: 295px auto;
    background-repeat:repeat-x;
    position:absolute;
    left:0;
    top:100%;
}
.dot-meri {
    transform: translate(0, 200px);
   /* transition: transform linear 1.2s;*/
}
.dot-meri.dotted-meri {
    transform: translate(0, 0);
}
@media only screen and (max-width:1280px) {
    .bg-meri-pieni-aiti{
        padding-top:256px;
        padding-top:400px;
    }
    .bg-meri-pieni-aiti:after{
        height:512px;
        background-size: 112px auto;
        top: 120px;
    }
    .bg-meri-pieni-aiti:before{
        height:15px;
        background-size: 112px auto;
    }
    .bg-meri-pieni-aiti:after{
        transform: translate(0, 240px);
        transition: transform ease .99s;
    }
    .bg-meri-pieni-aiti:before{
        transform: translate(0, 280px);
        transition: transform ease .99s;
    }
    .inSight.bg-meri-pieni-aiti:after{
        transform: translate(0, 0);
    }
    .inSight.bg-meri-pieni-aiti:before{
        transform: translate(0, 0);
    }
    .wrap-meri-pieni-aiti{
        width:100%;
        margin:0 auto;
        background-color:#83CCCB;
        position:relative;
        z-index:5;
    }
}

/* section meri
-------------------------------------------------------------*/
.section-meri{
    width:100%;
    margin:0 auto;
    padding:0;
}
.content-meri{
    width:100%;
    max-width:1000px;
    margin:0 auto;
}
.wrap-img-meri {
    width:100%;
    max-width:1000px;
    margin:0 0 100px;
    padding:0;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: space-between;
}
.img-meri {
    width:810px;
    height:540px;
    background-color: #b2b2b2;
}
.img-meri {
    width:810px;
    height:540px;
    overflow:hidden;
    position:relative;
    background-color:transparent;
}
.cell-img--meri {
    width:120px;
    height:180px;
    overflow:hidden;
    position: absolute;
    top:50%;
    left:20%;
    transform: translate(0%, -50%);
}
.wrap-img-meri.inSight .cell-img-meri {
    width:810px;
    height:540px;
    left:0;
    transition: width ease 0.8s ,height ease 0.8s,left ease 0.8s;
}
.cell-img--meri img{
    transform: scale(1.3);
}
.wrap-img-meri.inSight .cell-img-meri img{
    transform: scale(1);
    transition: transform ease 0.8s;
}
.sticky-meri .wrap-img-meri {
    width:100%;
    margin:0 0 96px;
    padding:24px 0;
}
.sticky-meri .img-meri {
    width:810px;
    height:540px;
    margin:0 ;
}
.wrap-sticky-meri {
    width:100%;
    margin:0 0;
    padding:0 0;
}
.sticky-meri {
    width:810px;
    height:540px;
    height:1080px;
    margin:0;
    position:relative;
}
.sticky-meri .img-meri {
    width:810px;
    height:540px;
    margin:0;
    position:sticky;
    top:0;
    top:80px;
    clip-path: inset(50px 50px 50px 50px);
}
.title-meri{
    margin:0;
}
.title-meri h2{
    /*font-size:5.0rem;
    font-weight:700;
    letter-spacing: .0em;
    line-height: 1.4;
    color: #1F1F1F;*/
    margin-bottom:22px;
    margin-bottom:37px;
}
.title-meri h2 img{
    width:109px;
}
.title-meri h3{
    font-size:2.4rem;
    font-weight:700;
    letter-spacing: .04em;
    line-height: 1.4;
    color: #1F1F1F;
    margin-bottom:0px;
}
.text-meri{
    width:100%;
    max-width:1000px;
    margin:0 auto 24px;
    display: flex;
    justify-content: flex-end;
}
.text-meri p{
    width:400px;
    font-size:1.7rem;
    font-weight:400;
    letter-spacing: .08em;
    letter-spacing: .11em;
    line-height: 2.17;
    margin-bottom:0;
}
.column-img-meri {
    width:100%;
    max-width:1000px;
    margin:0 auto;
    display: flex;
    justify-content: space-around;
}
.column-img-meri-01 {
    width:340px;
    height:272px;
    background-color: #b2b2b2;
}
.column-img-meri-02 {
    width:480px;
    height:384px;
    background-color: #b2b2b2;
    margin-top:124px;
}
@media only screen and (max-width:1280px) {
    .content-meri{
        width:100%;
        max-width:1000px;
        margin:0 auto;
        padding-bottom:40px;
    }
    .wrap-img-meri {
        width:100%;
        max-width:390px;
        margin:0 auto 50px;
        padding:0;
        flex-direction: column-reverse;
        align-items: flex-end;
        justify-content: space-between;
        gap:50px;
    }
    .img-meri {
        width:100%;
        max-width:390px;
        height:260px;
    }
    .img-meri {
        width:100%;
        max-width:390px;
        height:260px;
        overflow:hidden;
        position:relative;
        background-color:transparent;
    }
    .sticky-meri .wrap-img-meri {
        width:100%;
        margin:0 0 96px;
        padding:24px 0;
    }
    .sticky-meri .img-meri {
        width:100%;
        max-width:390px;
        height:260px;
        margin:0 ;
    }
    .wrap-sticky-meri {
        width:100%;
        margin:0 0;
        padding:0 0;
    }
    .sticky-meri {
        width:100%;
        max-width:390px;
        height:260px;
        height:520px;
        margin:0;
        position:relative;
    }
    .sticky-meri .img-meri {
        width:100%;
        max-width:390px;
        height:260px;
        margin:0;
        position:sticky;
        top:0;
        top:72px;
        clip-path: inset(50px 50px 50px 50px);
    }
    .title-meri{
        margin:0;
        width:86%;
        max-width:390px;
        margin:0 auto;
    }
    .title-meri h2{
        /*font-size:4.0rem;*/
        margin-bottom:34px;
    }
    .title-meri h2 img{
        width:85px;
    }
    .title-meri h3{
        font-size:1.9rem;
        margin-bottom:0px;
    }
    .text-meri{
        width:86%;
        max-width:390px;
        margin:0 auto 50px;
        display: block;
    }
    .text-meri p{
        width:100%;
        font-size:1.5rem;
    }
    .column-img-meri {
        width:86%;
        max-width:390px;
        margin:0 auto;
        flex-direction: column;
        justify-content: flex-start;
        gap:30px;
    }
    .column-img-meri-01 {
        width:150px;
        height:auto;
    }
    .column-img-meri-02 {
        width:200px;
        height:auto;
        margin-top:0;
        align-self: flex-end;
    }

    }

/* section pieni
-------------------------------------------------------------*/
.section-pieni{
    width:100%;
    margin:0 auto;
    padding:0;
}
.content-pieni{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:550px 0 206px;
    padding:550px 0 0;
    position:relative;
}
.wrap-img-pieni {
    width:100%;
    max-width:1000px;
    margin:0 0 100px;
    padding:0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position:relative;
    z-index:1;
}
.img--pieni {
    width:520px;
    height:650px;
    background-color: #b2b2b2;
}
.img--pieni {
    width:520px;
    height:650px;
    overflow:hidden;
    position:relative;
    background-color:transparent;
}
.cell-img--pieni {
    width:120px;
    height:180px;
    overflow:hidden;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.content-pieni.inSight .cell-img--pieni {
    width:520px;
    height:650px;
    transition: width ease 0.8s 0.8s ,height ease 0.8s 0.8s;
}
.cell-img--pieni img{
    transform: scale(1.3);
}
.content-pieni.inSight .cell-img--pieni img{
    transform: scale(1);
    transition: transform ease 0.8s 0.8s;
}
.sticky-pieni .wrap-img-pieni {
    width:100%;
    margin:0 0 96px;
    padding:24px 0;
}
.sticky-pieni .img-pieni {
    width:520px;
    height:650px;
    margin:0 ;
}
.wrap-sticky-pieni {
    width:100%;
    margin:0 0;
    padding:0 0;
}
.sticky-pieni {
    width:520px;
    height:650px;
    height:1300px;
    margin:0;
    position:relative;
}
.sticky-pieni .img-pieni {
    width:520px;
    height:650px;
    margin:0;
    position:sticky;
    top:0;
    top:80px;
    clip-path: inset(50px 50px 50px 50px);
}
.title-pieni{
    width:100%;
    max-width:480px;
    padding:296px 0 0 100px;
}
.title-pieni h2{
    /*font-size:5.0rem;
    font-weight:700;
    letter-spacing: .0em;
    line-height: 1.4;
    color: #1F1F1F;*/
    margin-bottom:24px;
}
.title-pieni h2 img{
    width:112px;
}
.title-pieni h3{
    font-size:2.4rem;
    font-weight:700;
    letter-spacing: .04em;
    line-height: 1.4;
    color: #1F1F1F;
    margin-bottom:0px;
}
.wrap-column-pieni {
    width:100%;
    max-width:1000px;
    margin:0 auto 120px;
    padding:0;
    display: flex;
}
.text-pieni{
    width:100%;
    margin:0;
    padding:0 0 0 100px;
}
.text-pieni p{
    width:400px;
    font-size:1.7rem;
    font-weight:400;
    letter-spacing: .08em;
    line-height: 2.17;
}
.wrap-animation-pieni{
    width:456px;
    height:755px;
    position:absolute;
    top:80px;
    left:43px;
    overflow:hidden;
}
.animation-pieni{
    width:456px;
}
.animation-pieni:after{
    width:100%;
    height:100%;
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: #83CCCB;
}
.animation-pieni:after{
    transform: translate(0, 0);
    transition: transform linear 1.2s;
}
.content-pieni.inSight .animation-pieni:after{
    transform: translate(0, 100%);
}
@media only screen and (max-width:1280px) {

    .content-pieni{
        width:100%;
        max-width:1000px;
        margin:0 auto;
        padding:550px 0 206px;
        padding:0;
        position:relative;
    }
    .wrap-img-pieni {
        width:100%;
        max-width:1000px;
        margin:0 auto 50px;
        padding:0;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: flex-end;
        position:relative;
        z-index:1;
    }
    .sticky-pieni .wrap-img-pieni {
        width:100%;
        margin:0 0 96px;
        padding:24px 0;
    }
    .sticky-pieni .img-pieni {
        width:260px;
        height:325px;
        margin:0 ;
    }
    .wrap-sticky-pieni {
        width:100%;
        max-width:390px;
        margin:0 auto 50px;
        padding:0;
        display: flex;
        justify-content: flex-end;
    }
    .sticky-pieni {
        width:260px;
        height:325px;
        height:650px;
        margin:0;
        position:relative;
    }
    .sticky-pieni .img-pieni {
        width:260px;
        height:325px;
        margin:0;
        position:sticky;
        top:0;
        top:72px;
        clip-path: inset(50px 50px 50px 50px);
    }
    .title-pieni{
        width:86%;
        max-width:330px;
        margin:0 auto 0px;
        padding:0;
    }
    .title-pieni h2{
      /*  font-size:4.0rem;*/
        margin-bottom:34px;
    }
    .title-pieni h2 img{
      width:87px;
    }
    .title-pieni h3{
        font-size:1.9rem;
        margin-bottom:0px;
    }
    .wrap-column-pieni {
        width:100%;
        max-width:1000px;
        margin:0 auto 120px;
        padding:0;
        flex-direction: column-reverse;
        gap:50px;
    }
    .text-pieni{
        width:100%;
        margin:0;
        padding:0 0 0 100px;

        width:86%;
        max-width:330px;
        margin:0 auto 0px;
        padding:0px;
    }
    .text-pieni p{
        width:100%;
        font-size:1.5rem;
    }
    .wrap-animation-pieni{
        width:200px;
        height:332px;
        width:86%;
        max-width:330px;
        height:auto;
        margin:0 auto 30px;
        position:relative;
        top:0px;
        left:0px;
        overflow:hidden;
    }
    .animation-pieni{
        width:200px;
    }
    .animation-pieni:after{
        width:100%;
        height:100%;
        display: inline-block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background-color: #83CCCB;
    }
    .animation-pieni:after{
        transform: translate(0, 0);
        transition: transform ease 1s;
    }
    .content-pieni.inSight .animation-pieni:after{
        transform: translate(0, 100%);
    }

    }

/* section aiti
-------------------------------------------------------------*/
.section-aiti{
    width:100%;
    margin:0 auto;
    padding:0;
}
.content-aiti{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0;
    padding:206px 0 0;
    position:relative;
 /*   overflow: hidden;*/
}
.wrap-img-aiti {
    width:100%;
    max-width:1280px;
    margin:0 0 80px;
    padding:0;
    margin:0;
    padding:0 0 80px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.img--aiti {
    width:660px;
    height:440px;
    margin:150px 0 0;
    background-color: #b2b2b2;
}
.img--aiti {
    width:660px;
    height:440px;
    overflow:hidden;
    position:relative;
    background-color:transparent;
}
.cell-img--aiti {
    width:120px;
    height:180px;
    overflow:hidden;
    position: absolute;
    top:50%;
    left:20%;
    transform: translate(0%, -50%);
}
.wrap-img-aiti.inSight .cell-img--aiti {
    width:660px;
    height:440px;
    left:0;
    transition: width ease 0.8s ,height ease 0.8s,left ease 0.8s;
}
.sticky-aiti .wrap-img-aiti {
    width:100%;
    margin:0 0 96px;
    padding:24px 0;
}
.sticky-aiti .img-aiti {
    width:660px;
    height:440px;
    margin:0 ;
}
.wrap-sticky-aiti {
    width:100%;
    margin:0 0;
    padding:0 0;
}
.sticky-aiti {
    width:660px;
    height:440px;
    height:880px;
    margin:0;
    position:relative;
}
.sticky-aiti .img-aiti {
    width:660px;
    height:440px;
    margin:0;
    position:sticky;
    top:0;
    top:80px;
    clip-path: inset(50px 50px 50px 50px);
}
.cell-img--aiti img{
    transform: scale(1.3);
}
.wrap-img-aiti.inSight .cell-img-aiti img{
    transform: scale(1);
    transition: transform ease 0.8s;
}
.wrap-title-aiti{
    width:40%;
    max-width:490px;
    margin:0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.title-aiti{
    margin:0 0 60px;
    padding:0;
}
.title-aiti h2{
   /* font-size:5.0rem;
    font-weight:700;
    letter-spacing: .0em;
    line-height: 1.4;
    color: #1F1F1F;*/
    margin-bottom:32px;
}
.title-aiti h2 img{
    width:76px;
}
.title-aiti h3{
    font-size:2.4rem;
    font-weight:700;
    letter-spacing: .04em;
    line-height: 1.4;
    color: #1F1F1F;
    margin-bottom:0px;
}
.text-aiti{
    width:350px;
    margin:0;
    padding:0 0 0 0px;
}
.text-aiti p{
    font-size:1.7rem;
    font-weight:400;
    letter-spacing: .08em;
    line-height: 2.17;
}
.wrap-animation-aiti{
    width:600px;
    height:600px;
    margin:0 0 90px 200px;
}
.animation-aiti{
    width:600px;
    transform:rotate(0deg) scale(0.7);
    transition: transform ease 1.1s .2s ;
}
.wrap-animation-aiti.inSight .animation-aiti{
    transform:rotate(180deg) scale(1);
}
.wrap-fanshape-aiti {
    width:300px;
    height:300px;
    top:0;
    right:200px;
    position:absolute;
    padding-top:calc(50vh - 300px);
    margin-top:calc(-50vh + 300px);
}
.fanshape {
    width: 300px;
    height: 300px;
    background-image: conic-gradient(#EA5854 90deg, #EA5854 90deg);
    clip-path: circle();
    transform: scale(1, -1) rotate(90deg);
}
.shapeee {
    width: 300px;
    height: 300px;
    background-image: conic-gradient(black 45deg, white 45deg);
    clip-path: circle();
    display: grid;
    place-items: center;
}
.shapeee::before {
    width: 300px;
    height: 300px;
    background-image: conic-gradient(#EA5854 90deg, #ffffff 90deg);
    clip-path: circle();
    transform: scale(1, -1) rotate(90deg);
}

@media only screen and (max-width:1280px) {
    .content-aiti{
        width:100%;
        max-width:1280px;
        margin:0 auto;
        padding:0;
        padding:48px 0 0;
        position:relative;
        /*   overflow: hidden;*/
    }
    .wrap-img-aiti {
        width:100%;
        max-width:1000px;
        margin:0 auto;
        padding:0;
        flex-direction: column-reverse;
        justify-content: space-between;
        gap: 50px;
    }
    .sticky-aiti .wrap-img-aiti {
        width:100%;
        margin:0 0 96px;
        padding:24px 0;
    }
    .sticky-aiti .img-aiti {
        width:330px;
        height:220px;
        margin:0 ;
    }
    .wrap-sticky-aiti {
        width:100%;
        max-width:400px;
        margin:0 auto;
        padding:0 0;
    }
    .sticky-aiti {
        width:330px;
        height:220px;
        height:440px;
    }
    .sticky-aiti .img-aiti {
        width:330px;
        height:220px;
        margin:0;
        position:sticky;
        top:0;
        top:72px;
        clip-path: inset(50px 50px 50px 50px);
    }
    .wrap-title-aiti{
        width:86%;
        max-width:330px;
        margin:0 auto 0px;
        padding-bottom:40px;
    }
    .title-aiti{
        margin:0 0 48px;
        padding:0;
    }
    .title-aiti h2{
       /* font-size:4.0rem;*/
        margin-bottom:34px;
    }
    .title-aiti h2 img{
        width:59px;
    }
    .title-aiti h3{
        font-size:1.9rem;
        margin-bottom:0px;
    }
    .text-aiti{
        width:100%;
        max-width:400px;
        margin:0 auto ;
    }
    .text-aiti p{
        font-size:1.5rem;
    }
    .wrap-animation-aiti{
        width:86%;
        max-width:330px;
        height:auto;
        margin:0 auto 30px;
    }
    .animation-aiti{
        width:224px;
        margin-left:100px;
        transform:rotate(0deg) scale(0.72);
        transition: transform ease 1s;
    }
    .wrap-animation-aiti.inSight .animation-aiti{
        transform:rotate(180deg) scale(1);
    }
    .wrap-fanshape-aiti {
        width:150px;
        height:150px;
        top:0;
        right:0px;
        position:relative;
        display: flex;
        justify-content: flex-start;
        width:86%;
        max-width:330px;
        height:auto;
        margin:0 auto 48px;
    }
    .fanshape {
        width: 150px;
        height: 150px;
    }
    .shapeee::before {
        width: 150px;
        height: 150px;
    }
}

/* section uni
-------------------------------------------------------------*/
.section-uni{
    width:100%;
    margin:0 auto;
    padding:0;
    padding:220px 0 0px;
    position:relative;
}
.content-uni{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:360px 0 120px;
    padding:120px 0 120px;
}
.section-uni:before{
    width:100vw;
    height:780px;
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: #83CCCB;
    transform: translate(0, -2px);
    transition: transform linear 1.4s;
}
.inSight.section-uni:before{
    transform: translate(0, -780px);
}
.wrap-img-uni {
    width:100%;
    max-width:1280px;
    margin:0 0 92px;
    padding:0;
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 100px;
}
.sticky-uni .wrap-img-uni {
    width:100%;
    margin:0 0 96px;
    padding:24px 0;
}
.sticky-uni .img-uni {
    width:600px;
    height:750px;
    margin:0 ;
}
.wrap-sticky-uni {
    width:100%;
    margin:0 0;
    padding:0 0;
}
.sticky-uni {
    width:600px;
    height:750px;
    height:1500px;
    margin:0;
    position:relative;
}
.sticky-uni .img-uni {
    width:600px;
    height:750px;
    margin:0;
    position:sticky;
    top:0;
    top:80px;
    clip-path: inset(50px 50px 50px 50px);
}
.img--uni {
    width:600px;
    height:750px;
    background-color: #b2b2b2;
}
.img--uni {
    width:600px;
    height:750px;
    overflow:hidden;
    position:relative;
    background-color:transparent;
}
.cell-img--uni {
    width:120px;
    height:180px;
    overflow:hidden;
    position: absolute;
    top:50%;
    left:30%;
    transform: translate(0%, -50%);
}
.wrap-img-uni.inSight .cell-img--uni {
    width:600px;
    height:750px;
    left:0;
    transition: width ease 0.8s ,height ease 0.8s,left ease 0.8s;
}
.cell-img--uni img{
    transform: scale(1.3);
}
.wrap-img-uni.inSight .cell-img--uni img{
    transform: scale(1);
    transition: transform ease 0.8s;
}
.title-uni{
    width:100%;
    max-width:300px;
    margin:0 0 64px;
}
.title-uni h2{
   /* font-size:5.0rem;
    font-weight:700;
    letter-spacing: .0em;
    line-height: 1.4;
    color: #1F1F1F;*/
    margin-bottom:32px;
}
.title-uni h2 img{
    width:67px;
}
.title-uni h3{
    font-size:2.4rem;
    font-weight:700;
    letter-spacing: .04em;
    line-height: 1.4;
    color: #1F1F1F;
    margin-bottom:0px;
}
.wrap-column-uni {
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:0;
    display: flex;
    justify-content: space-between;
}
.text-uni{
    width:40%;
    max-width:400px;
    width:400px;
    margin:0 0;
}
.text-uni p{
    font-size:1.7rem;
    font-weight:400;
    letter-spacing: .08em;
    line-height: 2.17;
}
.column-img-uni-01 {
    width:450px;
    height:360px;
    background-color: #b2b2b2;
    margin-top:84px;
    align-self: flex-end;
}
.wrap-animation-uni{
    width:100%;
    margin-bottom:140px;
    position:relative;
}
.animation-uni{
    width:940px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
}
.cell-animation-uni{
    width:246px;
    /*height:269px;*/
    margin:0;
    transition: transform linear 1.2s;
    position:relative;
}
.cell-animation-uni img:nth-of-type(2){
    position:absolute;
    top:0;
    left:0;
    transition: transform linear 1.2s;
}
.inSight .cell-animation-uni:nth-of-type(1){
    transform: rotate(6deg);
}
.inSight .cell-animation-uni:nth-of-type(2){
    transform: rotate(15deg);
}
.inSight .cell-animation-uni:nth-of-type(3){
    transform: rotate(8deg);
}
.inSight .cell-animation-uni:nth-of-type(1) img:nth-of-type(2){
    transform: rotate(2deg) translate(0, 3px);
}
.inSight .cell-animation-uni:nth-of-type(2) img:nth-of-type(2){
    transform: rotate(2deg) translate(-14px, 24px);
}
.inSight .cell-animation-uni:nth-of-type(3) img:nth-of-type(2){
    transform: rotate(2deg) translate(-8px, 20px);
}

@media only screen and (max-width:1280px) {
    .content-uni{
        width:100%;
        max-width:1000px;
        margin:0 auto;
        padding:360px 0 120px;
        padding:120px 0 120px;
    }
    .section-uni:before{
        width:100vw;
        height:780px;
        display: inline-block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background-color: #83CCCB;
        transform: translate(0, -64px);
        transition: transform ease 1s;
        transition: transform linear 1.6s;
    }
    .inSight.section-uni:before{
        transform: translate(0, -780px);
    }
    .wrap-img-uni {
        width:86%;
        max-width:330px;
        margin:0 auto 50px;
        flex-direction: column-reverse;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 50px;
    }
    .sticky-uni .wrap-img-uni {
        width:265px;
        margin:0;
        padding:0;
    }
    .sticky-uni .img-uni {
        width:265px;
        height:325px;
    }
    .wrap-sticky-uni {
        width:100%;
        margin:0 0;
        padding:0 0;
        display: flex;
        justify-content: flex-end;
    }
    .sticky-uni {
        width:265px;
        height:325px;
        height:650px;
    }
    .sticky-uni .img-uni {
        width:265px;
        height:325px;
        margin:0;
        position:sticky;
        top:0;
        top:72px;
        clip-path: inset(50px 50px 50px 50px);
    }
    .title-uni{
        width:100%;
        max-width:330px;
        margin:0 auto;
    }
    .title-uni h2{
       /* font-size:4.0rem;*/
        margin-bottom:34px;
    }
    .title-uni h2 img{
        width:52px;
    }
    .title-uni h3{
        font-size:1.9rem;
        margin-bottom:0px;
    }
    .wrap-column-uni {
        width:86%;
        max-width:330px;
        margin:0 auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 50px;
    }
    .text-uni{
        width:100%;
        margin:0 auto;
    }
    .text-uni p{
        font-size:1.5rem;
    }
    .column-img-uni-01 {
        width:230px;
        height:184px;
        margin-top:0;
        align-self: flex-start;
    }
    .wrap-animation-uni{
        margin-bottom:120px;
    }
    .animation-uni{
        width:330px;
    }
    .cell-animation-uni{
        width:82px;
    }
    .inSight .cell-animation-uni:nth-of-type(1) img:nth-of-type(2){
        transform: rotate(2deg) translate(-1px, 2px);
    }
    .inSight .cell-animation-uni:nth-of-type(2) img:nth-of-type(2){
        transform: rotate(2deg) translate(-5px, 9px);
    }
    .inSight .cell-animation-uni:nth-of-type(3) img:nth-of-type(2){
        transform: rotate(2deg) translate(-6px, 10px);
    }
}

/* section tuuli
-------------------------------------------------------------*/
.section-tuuli{
    width:100%;
    margin:0 auto;
    padding:0;
}
.content-tuuli{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 0 120px;
}
.wrap-img-tuuli {
    width:100%;
    max-width:1280px;
    margin:0 0 100px;
    padding:0;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 120px;
}
.img--tuuli {
    width:900px;
    height:600px;
    background-color: #b2b2b2;
}
.img--tuuli {
    width:900px;
    height:600px;
    overflow:hidden;
    position:relative;
    background-color:transparent;
}
.cell-img--tuuli {
    width:120px;
    height:180px;
    overflow:hidden;
    position: absolute;
    top:50%;
    left:20%;
    transform: translate(0%, -50%);
}
.wrap-img-tuuli.inSight .cell-img-tuuli {
    width:900px;
    height:600px;
    left:0;
    transition: width ease 0.8s ,height ease 0.8s,left ease 0.8s;
}
.cell-img--tuuli img{
    transform: scale(1.3);
}
.wrap-img-tuuli.inSight .cell-img-tuuli img{
    transform: scale(1);
    transition: transform ease 0.8s;
}
.sticky-tuuli .wrap-img-tuuli {
    width:100%;
    margin:0 0 96px;
    padding:24px 0;
}
.sticky-tuuli .img-tuuli {
    width:900px;
    height:600px;
    margin:0 ;
}
.wrap-sticky-tuuli {
    width:100%;
    margin:0 0;
    padding:0 0;
}
.sticky-tuuli {
    width:900px;
    height:600px;
    height:1200px;
    margin:0;
    position:relative;
}
.sticky-tuuli .img-tuuli {
    width:900px;
    height:600px;
    margin:0;
    position:sticky;
    top:0;
    top:80px;
    clip-path: inset(50px 50px 50px 50px);
}
.title-tuuli{
    width:30%;
    max-width:200px;
    padding-top:210px;
}
.title-tuuli h2{
   /* font-size:5.0rem;
    font-weight:700;
    letter-spacing: .0em;
    line-height: 1.4;
    color: #1F1F1F;*/
    margin-bottom:37px;
}
.title-tuuli h2 img{
    width:107px;
}
.title-tuuli h3{
    font-size:2.4rem;
    font-weight:700;
    letter-spacing: .04em;
    line-height: 1.4;
    color: #1F1F1F;
    margin-bottom:0px;
}
.wrap-column-tuuli {
    width:100%;
    max-width:1000px;
    margin:0 auto 80px;
    padding:0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.text-tuuli{
    width:40%;
    max-width:400px;
    width:400px;
    margin:0 0;
}
.text-tuuli p{
    font-size:1.7rem;
    font-weight:400;
    letter-spacing: .08em;
    line-height: 2.17;
}
.column-img-tuuli-01 {
    width:380px;
    height:304px;
    margin-top:64px;
    margin-left:86px;
    /*
    transform: translate(86px, 64px);
    */
}
.column-img-tuuli-02 {
    width:430px;
    height:344px;
    margin-left:510px;
}
.wrap-animation-tuuli{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    margin-bottom:80px;
    position:relative;
}
.animation-tuuli{
    width:100%;
    max-width:1000px;
    margin:0 auto;
}
.js-lag circle{
    transition: transform 0.9s cubic-bezier(0.42, 0, 0.58, 1);
}
.js-lag #Ellipse_133{
    transform:translate(271px ,117px);
}
.js-lag #Ellipse_134{
    transform:translate(562px ,300px);
}
.js-lag #Ellipse_135{
    transform:translate(619px ,324px);
}
.js-lag #Ellipse_127{
    transform:translate(794px ,300px);
}
.js-lag #Ellipse_136{
    transform:translate(546px ,391px);
}
.js-lag #Ellipse_137{
    transform:translate(669px ,162px);
}
.js-lag #Ellipse_138{
    transform:translate(293px ,52px);
}
.js-lag #Ellipse_139{
    transform:translate(509px ,6px);
}
.js-lag #Ellipse_140{
    transform:translate(440px ,65px);
}
.js-lag #Ellipse_141{
    transform:translate(343px ,12px);
}
.js-lag #Ellipse_142{
    transform:translate(491px ,104px);
}
.js-lag #Ellipse_143{
    transform:translate(316px ,139px);
}
.js-lag #Ellipse_144{
    transform:translate(165px ,226px);
}
.js-lag #Ellipse_145{
    transform:translate(440px ,213px);
}
.js-lag #Ellipse_146{
    transform:translate(417px ,264px);
}
.js-lag #Ellipse_147{
    transform:translate(425px ,354px);
}
.js-lag #Ellipse_148{
    transform:translate(476px ,163px);
}
.js-lag #Ellipse_149{
    transform:translate(418px ,126px);
}
.js-lag #Ellipse_150{
    transform:translate(367px ,263px);
}
.js-lag #Ellipse_151{
    transform:translate(370px ,324px);
}
.js-lag #Ellipse_152{
    transform:translate(296px ,361px);
}
.js-lag #Ellipse_153{
    transform:translate(513px ,213px);
}
.js-lag #Ellipse_154{
    transform:translate(499px ,317px);
}
.js-lag #Ellipse_155{
    transform:translate(563px ,141px);
}
.js-lag #Ellipse_156{
    transform:translate(513px ,265px);
}
.js-lag #Ellipse_157{
    transform:translate(563px ,191px);
}
.js-lag #Ellipse_128{
    transform:translate(660px ,287px);
}
.js-lag #Ellipse_129{
    transform:translate(827px ,254px);
}
.js-lag #Ellipse_158{
    transform:translate(656px ,52px);
}
.js-lag #Ellipse_159{
    transform:translate(371px ,154px);
}
.js-lag #Ellipse_160{
    transform:translate(224px ,89px);
}
.js-lag #Ellipse_161{
    transform:translate(58px ,247px);
}
.js-lag #Ellipse_162{
    transform:translate(546px ,80px);
}
.js-lag #Ellipse_130{
    transform:translate(657px ,226px);
}
.js-lag #Ellipse_163{
    transform:translate(721px ,126px);
}
.js-lag #Ellipse_164{
    transform:translate(827px ,89px);
}
.js-lag #Ellipse_165{
    transform:translate(308px ,250px);
}
.js-lag #Ellipse_166{
    transform:translate(455px ,301px);
}
.js-lag #Ellipse_167{
    transform:translate(606px ,228px);
}
.js-lag #Ellipse_131{
    transform:translate(743px ,250px);
}
.js-lag #Ellipse_168{
    transform:translate(780px ,176px);
}
.js-lag #Ellipse_132{
    transform:translate(868px ,217px);
}
.js-lag #Ellipse_169{
    transform:translate(164px ,141px);
}
.js-lag #Ellipse_170{
    transform:translate(114px ,117px);
}
.js-lag #Ellipse_171{
    transform:translate(606px ,89px);
}
.js-lag #Ellipse_172{
    transform:translate(380px ,49px);
}
.js-lag #Ellipse_173{
    transform:translate(330px ,191px);
}
.js-lag #Ellipse_174{
    transform:translate(224px ,213px);
}
.js-lag #Ellipse_175{
    transform:translate(261px ,300px);
}
.js-lag #Ellipse_176{
    transform:translate(163px ,317px);
}
.js-lag.inSight #Ellipse_133{
    transform:translate(283px ,139px);
}
.js-lag.inSight #Ellipse_134{
    transform:translate(562px ,300px);
}
.js-lag.inSight #Ellipse_135{
    transform:translate(619px ,324px);
}
.js-lag.inSight #Ellipse_127{
    transform:translate(800px ,284px);
}
.js-lag.inSight #Ellipse_136{
    transform:translate(546px ,391px);
}
.js-lag.inSight #Ellipse_137{
    transform:translate(680px ,143px);
}
.js-lag.inSight #Ellipse_138{
    transform:translate(311px ,78px);
}
.js-lag.inSight #Ellipse_139{
    transform:translate(536px ,12px);
}
.js-lag.inSight #Ellipse_140{
    transform:translate(440px ,65px);
}
.js-lag.inSight #Ellipse_141{
    transform:translate(343px ,12px);
}
.js-lag.inSight #Ellipse_142{
    transform:translate(500px ,90px);
}
.js-lag.inSight #Ellipse_143{
    transform:translate(316px ,139px);
}
.js-lag.inSight #Ellipse_144{
    transform:translate(178px ,247px);
}
.js-lag.inSight #Ellipse_145{
    transform:translate(440px ,200px);
}
.js-lag.inSight #Ellipse_146{
    transform:translate(426px ,263px);
}
.js-lag.inSight #Ellipse_147{
    transform:translate(426px ,374px);
}
.js-lag.inSight #Ellipse_148{
    transform:translate(476px ,163px);
}
.js-lag.inSight #Ellipse_149{
    transform:translate(427px ,102px);
}
.js-lag.inSight #Ellipse_150{
    transform:translate(388px ,263px);
}
.js-lag.inSight #Ellipse_151{
    transform:translate(400px ,337px);
}
.js-lag.inSight #Ellipse_152{
    transform:translate(296px ,361px);
}
.js-lag.inSight #Ellipse_153{
    transform:translate(513px ,213px);
}
.js-lag.inSight #Ellipse_154{
    transform:translate(499px ,317px);
}
.js-lag.inSight #Ellipse_155{
    transform:translate(572px ,140px);
}
.js-lag.inSight #Ellipse_156{
    transform:translate(513px ,265px);
}
.js-lag.inSight #Ellipse_157{
    transform:translate(563px ,191px);
}
.js-lag.inSight #Ellipse_128{
    transform:translate(660px ,287px);
}
.js-lag.inSight #Ellipse_129{
    transform:translate(827px ,254px);
}
.js-lag.inSight #Ellipse_158{
    transform:translate(656px ,52px);
}
.js-lag.inSight #Ellipse_159{
    transform:translate(400px ,143px);
}
.js-lag.inSight #Ellipse_160{
    transform:translate(227px ,78px);
}
.js-lag.inSight #Ellipse_161{
    transform:translate(72px ,243px);
}
.js-lag.inSight #Ellipse_162{
    transform:translate(555px ,78px);
}
.js-lag.inSight #Ellipse_130{
    transform:translate(665px ,217px);
}
.js-lag.inSight #Ellipse_163{
    transform:translate(736px ,138px);
}
.js-lag.inSight #Ellipse_164{
    transform:translate(838px ,89px);
}
.js-lag.inSight #Ellipse_165{
    transform:translate(327px ,254px);
}
.js-lag.inSight #Ellipse_166{
    transform:translate(469px ,317px);
}
.js-lag.inSight #Ellipse_167{
    transform:translate(606px ,228px);
}
.js-lag.inSight #Ellipse_131{
    transform:translate(753px ,237px);
}
.js-lag.inSight #Ellipse_168{
    transform:translate(809px ,163px);
}
.js-lag.inSight #Ellipse_132{
    transform:translate(883px ,200px);
}
.js-lag.inSight #Ellipse_169{
    transform:translate(187px ,126px);
}
.js-lag.inSight #Ellipse_170{
    transform:translate(104px ,152px);
}
.js-lag.inSight #Ellipse_171{
    transform:translate(628px ,80px);
}
.js-lag.inSight #Ellipse_172{
    transform:translate(400px ,28px);
}
.js-lag.inSight #Ellipse_173{
    transform:translate(330px ,191px);
}
.js-lag.inSight #Ellipse_174{
    transform:translate(224px ,213px);
}
.js-lag.inSight #Ellipse_175{
    transform:translate(283px ,300px);
}
.js-lag.inSight #Ellipse_176{
    transform:translate(187px ,300px);
}
.js-lag.inSight.is-delay #Ellipse_133{
    transform:translate(283px ,139px);
}
.js-lag.inSight.is-delay #Ellipse_134{
    transform:translate(600px ,291px);
}
.js-lag.inSight.is-delay #Ellipse_135{
    transform:translate(659px ,328px);
}
.js-lag.inSight.is-delay #Ellipse_127{
    transform:translate(825px ,309px);
}
.js-lag.inSight.is-delay #Ellipse_136{
    transform:translate(574px ,398px);
}
.js-lag.inSight.is-delay #Ellipse_137{
    transform:translate(680px ,143px);
}
.js-lag.inSight.is-delay #Ellipse_138{
    transform:translate(311px ,78px);
}
.js-lag.inSight.is-delay #Ellipse_139{
    transform:translate(536px ,12px);
}
.js-lag.inSight.is-delay #Ellipse_140{
    transform:translate(439px ,41px);
}
.js-lag.inSight.is-delay #Ellipse_141{
    transform:translate(357px ,6px);
}
.js-lag.inSight.is-delay #Ellipse_142{
    transform:translate(512px ,89px);
}
.js-lag.inSight.is-delay #Ellipse_143{
    transform:translate(357px ,115px);
}
.js-lag.inSight.is-delay #Ellipse_144{
    transform:translate(165px ,226px);
}
.js-lag.inSight.is-delay #Ellipse_145{
    transform:translate(458px ,206px);
}
.js-lag.inSight.is-delay #Ellipse_146{
    transform:translate(439px ,247px);
}
.js-lag.inSight.is-delay #Ellipse_147{
    transform:translate(455px ,375px);
}
.js-lag.inSight.is-delay #Ellipse_148{
    transform:translate(526px ,136px);
}
.js-lag.inSight.is-delay #Ellipse_149{
    transform:translate(427px ,102px);
}
.js-lag.inSight.is-delay #Ellipse_150{
    transform:translate(388px ,263px);
}
.js-lag.inSight.is-delay #Ellipse_151{
    transform:translate(426px ,346px);
}
.js-lag.inSight.is-delay #Ellipse_152{
    transform:translate(326px ,374px);
}
.js-lag.inSight.is-delay #Ellipse_153{
    transform:translate(526px ,214px);
}
.js-lag.inSight.is-delay #Ellipse_154{
    transform:translate(526px ,337px);
}
.js-lag.inSight.is-delay #Ellipse_155{
    transform:translate(572px ,140px);
}
.js-lag.inSight.is-delay #Ellipse_156{
    transform:translate(500px ,289px);
}
.js-lag.inSight.is-delay #Ellipse_157{
    transform:translate(600px ,173px);
}
.js-lag.inSight.is-delay #Ellipse_128{
    transform:translate(660px ,287px);
}
.js-lag.inSight.is-delay #Ellipse_129{
    transform:translate(835px ,235px);
}
.js-lag.inSight.is-delay #Ellipse_158{
    transform:translate(664px ,41px);
}
.js-lag.inSight.is-delay #Ellipse_159{
    transform:translate(416px ,152px);
}
.js-lag.inSight.is-delay #Ellipse_160{
    transform:translate(238px ,101px);
}
.js-lag.inSight.is-delay #Ellipse_161{
    transform:translate(105px ,254px);
}
.js-lag.inSight.is-delay #Ellipse_162{
    transform:translate(564px ,66px);
}
.js-lag.inSight.is-delay #Ellipse_130{
    transform:translate(714px ,206px);
}
.js-lag.inSight.is-delay #Ellipse_163{
    transform:translate(745px ,69px);
}
.js-lag.inSight.is-delay #Ellipse_164{
    transform:translate(816px ,103px);
}
.js-lag.inSight.is-delay #Ellipse_165{
    transform:translate(344px ,254px);
}
.js-lag.inSight.is-delay #Ellipse_166{
    transform:translate(493px ,311px);
}
.js-lag.inSight.is-delay #Ellipse_167{
    transform:translate(640px ,210px);
}
.js-lag.inSight.is-delay #Ellipse_131{
    transform:translate(742px ,265px);
}
.js-lag.inSight.is-delay #Ellipse_168{
    transform:translate(816px ,163px);
}
.js-lag.inSight.is-delay #Ellipse_132{
    transform:translate(908px ,191px);
}
.js-lag.inSight.is-delay #Ellipse_169{
    transform:translate(209px ,126px);
}
.js-lag.inSight.is-delay #Ellipse_170{
    transform:translate(142px ,132px);
}
.js-lag.inSight.is-delay #Ellipse_171{
    transform:translate(628px ,80px);
}
.js-lag.inSight.is-delay #Ellipse_172{
    transform:translate(400px ,28px);
}
.js-lag.inSight.is-delay #Ellipse_173{
    transform:translate(311px ,198px);
}
.js-lag.inSight.is-delay #Ellipse_174{
    transform:translate(242px ,217px);
}
.js-lag.inSight.is-delay #Ellipse_175{
    transform:translate(305px ,302px);
}
.js-lag.inSight.is-delay #Ellipse_176{
    transform:translate(209px ,307px);
}
@media only screen and (min-width:1281px) {
    .wrap-animation-tuuli{
        margin-top:calc(-50vh + 480px);
        padding-top:calc(50vh - 480px);
    }
}
@media only screen and (max-width:1280px) {
    .wrap-animation-tuuli{
        margin-top:calc(-50vh + 190px + 120px);
        padding-top:calc(50vh - 190px - 120px);
    }
}
@media only screen and (max-width:1280px) {
    .content-tuuli{
        width:100%;
        max-width:1280px;
        margin:0 auto;
        padding:0 0 50px;
    }
    .wrap-img-tuuli {
        width:100%;
        max-width:1280px;
        margin:0 0 50px;
        padding:0;
        align-items: center;
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 50px;
    }
    .sticky-tuuli .wrap-img-tuuli {
        width:100%;
        margin:0 0 96px;
        padding:24px 0;
    }
    .sticky-tuuli .img-tuuli {
        width:100%;
        max-width:390px;
        height:260px;
        margin:0 ;
    }
    .wrap-sticky-tuuli {
        width:100%;
        margin:0 0;
        padding:0 0;
    }
    .sticky-tuuli {
        width:100%;
        max-width:390px;
        height:260px;
        height:520px;
        margin:0 auto;
    }
    .sticky-tuuli .img-tuuli {
        width:100%;
        max-width:390px;
        height:260px;
    }
    .title-tuuli{
        width:100%;
        max-width:100%;
        width:86%;
        max-width:390px;
        margin:0 auto;
        padding-top:0px;
    }
    .title-tuuli h2{
      /*  font-size:4.0rem;*/
        margin-bottom:34px;
    }
    .title-tuuli h2 img{
        width:84px;
    }
    .title-tuuli h3{
        font-size:1.9rem;

        margin-bottom:0px;
    }
    .wrap-column-tuuli {
        width:86%;
        max-width:390px;
        margin:0 auto 30px;
        padding:0;
        flex-direction: column;
        justify-content: flex-start;
    }
    .text-tuuli{
        width:40%;
        max-width:400px;
        width:100%;
        margin:0 0 50px;
    }
    .text-tuuli p{
        font-size:1.5rem;

        letter-spacing: .08em;
        line-height: 2.17;
    }
    .column-img-tuuli-01 {
        width:175px;
        height:141px;
        margin-top:0;
        margin-left:0;
    }
    .column-img-tuuli-02 {
        width:86%;
        max-width:390px;
        height:auto;
        margin:0 auto 0px;
        display: flex;
        justify-content: flex-end;
    }
    .column-img-tuuli-02 img{
        width:198px;
        height:158px;
        margin-left:0px;
    }
    .wrap-animation-tuuli{
        width:100%;
        max-width:400px;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:40px;
        position:relative;
        overflow:hidden;
    }
    .animation-tuuli{
        width:100%;
        max-width:400px;
        margin:0 auto;
    }
    .animation-tuuli{
        width:100%;
        position:static;
    }
    .animation-tuuli{
        width:100%;
        height:auto;
    }
}

/* section keittio
-------------------------------------------------------------*/
.section-keittio{
    width:100%;
    margin:0 auto;
    padding:0;
}
.content-keittio{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:110px 0 63px;
}
.wrap-img-keittio {
    width:100%;
    max-width:1280px;
    margin:0 0 88px;
    padding:0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.img--keittio {
    width:690px;
    height:460px;
    background-color: #b2b2b2;
}
.img--keittio {
    width:690px;
    height:460px;
    overflow:hidden;
    position:relative;
    background-color:transparent;
}
.cell-img--keittio {
    width:120px;
    height:180px;
    overflow:hidden;
    position: absolute;
    top:50%;
    right:20%;
    transform: translate(0%, -50%);
}
.wrap-img-keittio.inSight .cell-img-keittio {
    width:690px;
    height:460px;
    right:0;
    transition: width ease 0.8s ,height ease 0.8s,right ease 0.8s;
}
.cell-img--keittio img{
    transform: scale(1.3);
}
.wrap-img-keittio.inSight .cell-img-keittio img{
    transform: scale(1);
    transition: transform ease 0.8s;
}
.sticky-keittio .wrap-img-keittio {
    width:100%;
    margin:0 0 96px;
    padding:24px 0;
}
.sticky-keittio .img-keittio {
    width:690px;
    height:460px;
    margin:0 ;
}
.wrap-sticky-keittio {
    width:69%;
    margin:0 0;
    padding:0 0;
}
.sticky-keittio {
    width:690px;
    height:460px;
    height:920px;
    margin:0;
    position:relative;
}
.sticky-keittio .img-keittio {
    width:690px;
    height:460px;
    margin:0;
    position:sticky;
    top:0;
    top:80px;
    clip-path: inset(50px 50px 50px 50px);
}
.title-keittio{
    width:30%;
    max-width:300px;
    margin:0;
}
.title-keittio h2{
  /*  font-size:5.0rem;
    font-weight:700;
    letter-spacing: .0em;
    line-height: 1.4;
    color: #1F1F1F;*/
    margin-bottom:38px;
}
.title-keittio h2 img{
    width:157px;
}
.title-keittio h3{
    font-size:2.4rem;
    font-weight:700;
    letter-spacing: .04em;
    line-height: 1.4;
    color: #1F1F1F;
    margin-bottom:0px;
}
.wrap-column-keittio {
    width:100%;
    max-width:1000px;
    margin:0 auto;
}
.text-keittio{
    width:50%;
    max-width:500px;
    margin:0 0 0 100px;
}
.text-keittio p{
    font-size:1.7rem;
    font-weight:400;
    letter-spacing: .08em;
    letter-spacing: .11em;
    line-height: 2.17;
}
.wrap-animation-keittio{
    width:100%;
    margin-bottom:110px;
    position:relative;
}
.animation-keittio{
    width:1000px;
    width:320px;
    margin:0 auto;
    overflow: hidden;
    position: relative;
}
.animation-keittio:after{
    width:1048px;
    height:64px;
    display: inline-block;
    content: "";
    background-image: url(../img/img_animation_keittio_wave.png);
    background-position:0 0;
    background-size: 1048px 64px;
    background-repeat:repeat-x;
    position: absolute;
    bottom: 18px;
    left: 0;
    z-index:4;
}
.animation-keittio:after{
    transform: translate(-84px, 0);
    transition: transform linear 3s;
}
.inSight .animation-keittio:after{
    transform: translate(-536px, 0);
}

@media only screen and (max-width:1280px) {
    .content-keittio{
        max-width:390px;
        padding:50px 0 48px;
    }
    .wrap-img-keittio {
        max-width:390px;
        margin:0 auto 44px;
        padding:0;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: flex-start;
    }
    .sticky-keittio .wrap-img-keittio {
        width:100%;
        margin:0 0 96px;
        padding:24px 0;
    }
    .sticky-keittio .img-keittio {
        width:330px;
        height:220px;
        margin:0 ;
    }
    .wrap-sticky-keittio {
        width:100%;
        margin:0 0 50px;
        padding:0 0;
        display: flex;
        justify-content: flex-end;
    }
    .sticky-keittio {
        width:330px;
        height:220px;
        height:440px;
        margin:0;
        position:relative;
    }
    .sticky-keittio .img-keittio {
        width:330px;
        height:220px;
        margin:0;
        position:sticky;
        top:0;
        top:72px;
        clip-path: inset(50px 50px 50px 50px);
    }
    .title-keittio{
        width:100%;
        max-width:390px;
        width:86%;
        max-width:390px;
        margin:0 auto ;
    }
    .title-keittio h2{
      /*  font-size:4.0rem;
        font-weight:700;
        letter-spacing: .0em;
        line-height: 1.4;
        color: #1F1F1F;*/
        margin-bottom:34px;
    }
    .title-keittio h2 img{
        width:122px;
    }
    .title-keittio h3{
        font-size:1.9rem;
        font-weight:700;
        letter-spacing: .04em;
        line-height: 1.4;
        color: #1F1F1F;
        margin-bottom:0px;
    }
    .wrap-column-keittio {
        width:100%;
        max-width:1000px;
        margin:0 auto;
    }
    .text-keittio{
        width:100%;
        max-width:390px;
        width:86%;
        max-width:390px;
        margin:0 auto;
    }
    .text-keittio p{
        font-size:1.5rem;
        font-weight:400;
        letter-spacing: .08em;
        letter-spacing: .11em;
        line-height: 2.17;
    }
    .wrap-animation-keittio{
        margin-bottom:70px;
    }
    .animation-keittio{
        width:220px;
    }
    .animation-keittio:after{
        width:820px;
        height:44px;
        display: inline-block;
        content: "";
        background-image: url(../img/img_animation_keittio_wave.png);
        background-position:0 0;
        background-size: 820px 44px;
        background-repeat:repeat-x;
        position: absolute;
        bottom: 14px;
        left: 0;
        z-index:4;
    }
    .animation-keittio:after{
        transform: translate(-84px, 0);
        transition: transform linear 3s;
    }
    .inSight .animation-keittio:after{
        transform: translate(-480px, 0);
    }
}

/* section info
-------------------------------------------------------------*/
.section-info{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:0;
}
.content-info{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:0;
}
.title-info{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    margin-bottom:24px;
    margin-bottom:2px;
}
.title-info h2{
/*    font-size:2.8rem;
    font-weight:500;
    letter-spacing: .0em;
    line-height: 1.2;
    color: #1F1F1F;*/
    padding-right:1em;
}
.title-info h2 img{
    width:322px;
}
.title-info h3{
    font-size:4.0rem;
    font-weight:500;
    letter-spacing: .1em;
    line-height: 1.2;
    color: #1F1F1F;
}
.nav-info{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin-bottom:200px;
}
.nav-info li{
    overflow: hidden;
    width:240px;
    aspect-ratio: 1/1;
    border-radius: 50%;
}
.nav-info li a{
    display: block;
    width:100%;
    height:100%;
    background-color: #EA5854;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:2.4rem;
    font-weight:700;
    letter-spacing: 0.08em;
    line-height: 1.8;
    color: #fff;
    text-align: center;
}
.nav-info li:nth-of-type(1) a{
    background-color: #EA5854;
}
.nav-info li:nth-of-type(2) a{
    background-color: #83CCCB;
}
.nav-info li:nth-of-type(3) a{
    background-color: #88842A;
}
.content-nav-info{
    width:70%;
    max-width:700px;
    margin:0 0 0 auto;
}
.nav-info-fixed{
    position: fixed;
    bottom: 36px;
    left: -10px;
    display: block;
    z-index: 91;
    overflow: hidden;
    width:130px;
    aspect-ratio: 1/1;
    border-radius: 50%;
}
.nav-info-fixed a{
    display: block;
    width:100%;
    height:100%;
    background-color: #88842A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:1.8rem;
    font-weight:700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    color: #fff;
    text-align: center;
}
.frame-calendar{
    width:100%;
    max-width:700px;
    border:1px solid #1F1F1F;
    border:1px solid transparent;
    margin:0 auto 160px;
    position:relative;
}
.frame-calendar iframe{
    width:100%;
  /*  aspect-ratio: 7/6;*/
    height:470px;
}
.wrap-map{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:0 0 100px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
}
.cell-gglmaps{
    width:60%;
}
.cell-gglmaps iframe{
    width:100%;
    aspect-ratio: 4/3;
    vertical-align: bottom;
}
.cell-around{
    width:36%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.info-around{
    font-size:1.9rem;
    font-weight:400;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: #1F1F1F;
}
.info-around dt,.info-around dd{
    margin-bottom:0.4em;
}
.map-around{
}
@media (hover: hover) and (pointer: fine) {
    .nav-info li,
    .nav-info li a,
    .nav-info-fixed,
    .nav-info-fixed a{
        transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    }
    .nav-info li:hover,
    .nav-info li a:hover,
    .nav-info-fixed:hover,
    .nav-info-fixed a:hover{
        transform: scale(1.05);
    }
}
@media only screen and (max-width:1280px) {
    .content-info{
        width:100%;
        max-width:1000px;
        margin:0 auto;
        padding:0;
    }
    .title-info{
        margin-bottom:20px;
        margin-bottom:0px;
    }
    .title-info h2{
      /*  font-size:1.7rem;*/
    }
    .title-info h2 img{
        width:152px;
    }
    .title-info h3{
        font-size:1.8rem;
        letter-spacing: .04em;
    }
    .nav-info{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: space-around;

        width:100%;
        max-width:390px;
        margin:0 auto 80px;
    }
    .nav-info li{
        width:130px;
    }
    .nav-info li a{
        font-size:1.6rem;
    }
    .nav-info li:nth-of-type(1) {
        align-self: flex-start;
        transform: translate(30px, 20px);
    }
    .nav-info li:nth-of-type(2){
        align-self: center;
        transform: translate(0, 0);
    }
    .nav-info li:nth-of-type(3){
        align-self: flex-end;
        transform: translate(-30px, -20px);
    }
    .content-nav-info{
        width:70%;
        max-width:700px;
        margin:0 0 0 auto;
    }
    .nav-info-fixed{
    }
    .nav-info-fixed a{
        font-size:1.7rem;
    }
    .frame-calendar{
        width:86%;
        max-width:400px;
        margin:0 auto 80px;
    }
    .frame-calendar iframe{
        height:600px;
    }
    .wrap-map{
        width:100%;
        max-width:400px;
        margin:0 auto;
        padding:0 0 40px;
        flex-direction: column;
        justify-content: flex-start;
    }
    .cell-gglmaps{
        width:100%;
        margin-bottom:30px;
    }
    .cell-around{
        width:86%;
        max-width:400px;
        margin:0 auto;
    }
    .info-around{
        font-size:1.5rem;
        margin-bottom:30px;
        margin-bottom:0px;
    }
    .info-around dt,.info-around dd{
        margin-bottom:0.4em;
    }
    .map-around{
    }
}
@media only screen and (max-width:390px) {
    .frame-calendar iframe{
    height:640px;
}
}
@media only screen and (max-width:960px) {
    .nav-info-fixed{
        bottom: 20px;
        width:100px;
    }
    .nav-info-fixed a{
        font-size:1.6rem;
    }
}

/* section carousel
-------------------------------------------------------------*/
.section-carousel{
    width:100%;
    margin:0 auto;
}
.content-carousel{
    width:100%;
    margin:0 0 180px;
    padding:0;
    overflow:hidden;
    text-align: center;
}
.content--carousel img{
    width:1750px;
    margin:0;
}
.slick-carousel{
    width:100%;
    max-height:350px;
    margin:0 0 180px;
    overflow:hidden;
    position:relative;
    z-index:1;
}
.item-carousel{width:350px;transform: translate(-100px, 0)}
/*
.item-carousel:nth-of-type(2n+1){background-color: #00a8fa;}
.item-carousel:nth-of-type(2n){background-color: #a900ff;}
.item-carousel img{opacity: 0.5;}
*/
@media only screen and (max-width:768px) {

}
@media only screen and (max-width:1280px) {
    .slick-carousel{
        max-height:160px;
        margin:0 0 130px;
    }
    .item-carousel{
        width:160px;
        transform: translate(-10px, 0)
    }
}

/* guide page
-------------------------------------------------------------*/
.wrapper {
    width: 100%;
}
.bg-color {
    width: 100%;
    background-color: transparent;
    transition: background-color 0.99s ease;
    padding-top:140px;
}
.bg-flow .bg-color{
    background-color: #EA5854;
    transition: background-color 0.8s ease;
}
.bg-price .bg-color{
    background-color: #83CCCB;
    transition: background-color 0.8s ease;
}
.bg-notice .bg-color{
    background-color: #88842A;
    transition: background-color 0.8s ease;
}
.bg-info .bg-color{
    background-color: #fff;
    transition: background-color 0.8s ease;
}

/* section flow
-------------------------------------------------------------*/
.section-flow{
    width:100%;
    max-width:1000px;
    margin:0 auto 140px;
    display: flex;
    justify-content: flex-end;
}
.content-flow{
    width:70%;
    max-width:700px;
    margin:0;
    padding:60px 60px 60px 80px;
    background-color:#fff;
}
.title-flow{
    font-size:3.6rem;
    font-weight:700;
    letter-spacing: .04em;
    line-height: 1.2;
    color: #EA5854;
    text-align:center;
    text-indent:1em;
    font-family: "Noto Sans JP", sans-serif;
    margin-bottom:60px;
}
.list-flow{
    margin-bottom:48px;
    padding-left:40px;
    padding-top:4px;
    position:relative;
}
.list-flow:last-of-type{
    margin-bottom:0px;
}
.list-flow:before{
    width:17px;
    height:30px;
    display: inline-block;
    content: "";
    background-position:0 0%;
    background-size: contain;
    background-repeat:no-repeat;
    position: absolute;
    top: 0px;
    left: 0;
    z-index:1;
}
.list-flow:nth-of-type(1):before{
    background-image: url(../img/num-list-flow-01.png);
}
.list-flow:nth-of-type(2):before{
    background-image: url(../img/num-list-flow-02.png);
}
.list-flow:nth-of-type(3):before{
    background-image: url(../img/num-list-flow-03.png);
}
.list-flow dt{
    font-size:2.4rem;
    font-weight:500;
    line-height: 1.2;
    color: #EA5854;
    margin-bottom:0.5em;
}
.list-flow dd{
    font-size:1.7rem;
    font-weight:400;
    line-height: 1.88;
    color: #1f1f1f;
}
.list-flow dd a{
    text-decoration:underline;
}
@media (hover: hover) and (pointer: fine) {
    .list-flow dd a{
        transition: color 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    }
    .list-flow dd a:hover{
        color:#EA5854;
    }
}
/* section price
-------------------------------------------------------------*/
.section-price{
    width:100%;
    max-width:1000px;
    margin:0 auto 140px;
    display: flex;
    justify-content: flex-end;
}
.content-price{
    width:70%;
    max-width:700px;
    margin:0;
    padding:60px 80px;
    background-color:#fff;
}
.title-price{
    font-size:3.6rem;
    font-weight:700;
    letter-spacing: .04em;
    line-height: 1.2;
    color: #83CCCB;
    text-align:center;
    font-family: "Noto Sans JP", sans-serif;
    margin-bottom:60px;
}
.list-price{
    margin-bottom:65px;
}
.list-price:last-of-type{
    margin-bottom:0;
}
.list-price dt{
    font-size:2.4rem;
    font-weight:500;
    line-height: 1.2;
    color: #83CCCB;
    color: #1f1f1f;
    margin-bottom:0.99em;
    padding-left:2em;
    position:relative;
}
.list-price dt:before{
    width:30px;
    height:30px;
    display: inline-block;
    content: "";
    background-color: #83CCCB;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index:1;
    transform: translate(0%, -50%);
}
.list-price dd{
    font-size:1.7rem;
    font-weight:400;
    line-height: 1.88;
    color: #1f1f1f;
}
.list-price dd table{
    width:100%;
    border-collapse: collapse;
    border-left: 2px solid #83CCCB;
    border-top: 2px solid #83CCCB;
}
.list-price dd table th{
    width:54%;
    padding:10px 14px;
    border-bottom: 2px solid #83CCCB;
    border-right: 2px solid #83CCCB;
    background-color: #E0FCFB;
    text-align:left;
    font-weight:400;
    line-height: 1.6;
    color: #1f1f1f;
}
.list-price dd table td{
    width:auto;
    min-width:120px;
    padding:10px 14px;
    border-bottom: 2px solid #83CCCB;
    border-right: 2px solid #83CCCB;
    background-color: #fff;
    text-align:center;
    font-weight:400;
    line-height: 1.6;
    color: #1f1f1f;
}
.list-price dd table th span{
    font-size:1.5rem;
    display: block;
}
.list-price dd table th i{
    font-style: normal;
    padding-left:1em;
}
.list-price dd table td span{
    display: block;
}
.item-price-note{
    font-size:1.5rem;
    font-weight:400;
    line-height: 1.5;
    color: #1f1f1f;
    padding-top:0.5em;
}

/* section notice
-------------------------------------------------------------*/
.section-notice{
    width:100%;
    max-width:1000px;
    margin:0 auto 140px;
    display: flex;
    justify-content: flex-end;
}
.content-notice{
    width:70%;
    max-width:700px;
    margin:0;
    padding:60px 30px;
    background-color:#fff;
}
.title-notice{
    font-size:3.6rem;
    font-weight:700;
    letter-spacing: .04em;
    line-height: 1.2;
    color: #88842A;
    text-align:center;
    font-family: "Noto Sans JP", sans-serif;
    margin-bottom:60px;
}
.list-notice{
    margin-bottom:80px;
    text-align: center;
}
.list-notice:last-of-type{
    margin-bottom:0px;
}
.list-notice dt{
    font-size:2.4rem;
    font-weight:500;
    line-height: 1.2;
    color: #1f1f1f;
    margin-bottom:20px;
}
.list-notice dd{
    font-size:1.7rem;
    font-weight:400;
    line-height: 2.2;
    color: #1f1f1f;
}
.list-notice dt .icon-notice{
    width:170px;
    margin:auto;
    margin-bottom:40px;
}

@media only screen and (max-width:1000px) {
    .bg-color {
        padding-top:423px;
    }
    .section-flow{
        width:86%;
        max-width:1000px;
        margin:0 auto 80px;
        display: block;
    }
    .content-flow{
        width:100%;
        max-width:860px;
        padding:40px 20px 40px 20px;
    }
    .title-flow{
        font-size:2.3rem;
        text-indent:0;
        margin-bottom:40px;
    }
    .list-flow{
        margin-bottom:40px;
        padding-left:0px;
        padding-top:0;
    }
    .list-flow:before{
        width:15px;
        height:26px;
    }
    .list-flow dt{
        font-size:1.9rem;
        padding-left:1.4em;
        padding-top:0.2em;
    }
    .list-flow dd{
        font-size:1.5rem;
    }
    .section-price{
        width:86%;
        max-width:1000px;
        margin:0 auto 80px;
        display: block;
    }
    .content-price{
        width:100%;
        max-width:860px;
        padding:40px 20px 40px 20px;
    }
    .title-price{
        font-size:2.3rem;
        text-indent:0;
        margin-bottom:40px;
    }
    .list-price{
        margin-bottom:40px;
    }
    .section-notice{
        width:86%;
        max-width:1000px;
        margin:0 auto 80px;
        display: block;
    }
    .content-notice{
        width:100%;
        max-width:860px;
        padding:40px 20px 40px 20px;
    }
    .list-price dt{
        font-size:1.9rem;
    }
    .list-price dt:before{
        width:20px;
        height:20px;
    }
    .list-price dd{
        font-size:1.5rem;
    }
    .list-price dd table{
    }
    .list-price dd table th{
        width:54%;
        width:60%;
        padding:8px 12px;
    }
    .list-price dd table td{
        padding:8px 12px;
    }
    .list-price dd table th span{
        font-size:1.5rem;
        display: block;
    }
    .list-price dd table th i{
        font-style: normal;
        padding-left:1em;
    }
    .list-price dd table td span{
        display: block;
    }
    .item-price-note{
        font-size:1.5rem;
        font-weight:400;
        line-height: 1.5;
        color: #1f1f1f;
        padding-top:0.5em;
    }
    .title-notice{
        font-size:2.3rem;
        text-indent:0;
        margin-bottom:40px;
    }
    .list-notice{
        margin-bottom:60px;
    }
    .list-notice dt{
        font-size:1.9rem;
    }
    .list-notice dd{
        font-size:1.5rem;
    }
    .list-notice dt .icon-notice{
        width:170px;
        margin-bottom:20px;
    }
    .content-nav-info{
        width:100%;
        max-width:1000px;
        margin:0 auto;
    }
    .content-nav-info .nav-info li:nth-of-type(1) {
        align-self: center;
        transform: translate(0,0);
    }
}

@media only screen and (min-width:640px) {
    .list-price dd table .tr-sp {
        display: none;
    }
    .list-price dd table .th-sp {
        display: none;
    }
}

@media only screen and (max-width:639px) {
    .list-price dd table .tr-sp {
        width: 100%;
    }
    .list-price dd table th.th-sp {
        width: 100%;
        padding: 10px 14px;
    }
    .list-price dd table th.th-pc {
        display: none;
    }
}

/*  drawerMenu
-------------------------------------------------------------*/
.wrap-drawerMenu {
    position: fixed;
    top:0;
    right: -100%;
    right:0;
    top: -100%;
    top: -100lvh;
    width: 48%;
    width: 712px;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    overflow:hidden;
    transition: top 0.8s ease-out ,opacity 0.1s cubic-bezier(0.42, 0, 0.58, 1) ;
    z-index: 90;
    opacity: 1;
}
.content-drawerMenu {
    width: 750px;
    height: 750px;
    display: flex;
    justify-content: flex-end;
    position: relative;
    background-image: url(../img/bg_drawermenu.png);
    background-position:100% 100%;
    background-size: 1240px auto;
    background-repeat:no-repeat;
}
.content---drawerMenu:before {
    width: 1500px;
    height: 1500px;
    background-color:#e8e8e8;
    display: inline-block;
    content: "";
    position: absolute;
    bottom:0;
    bottom:100px;
    right:0;
    transform-origin: bottom right;
    transform: rotate(45deg);
    z-index:-1;
}
.cell-drawerMenu {
    width: 300px;
    height: 300px;
    position:relative;
}
.cell---drawerMenu {
    width: 300px;
    height: 300px;
    position:relative;
}
.list-drawerMenu {
    padding:36px 0 0;
}
.list-drawerMenu li {
    width: 100%;
    height: auto;
    margin-bottom:20px;
}
.list-drawerMenu li a{
    width: 100%;
    height: auto;
    text-align:left;
    font-size:1.6rem;
    font-weight:500;
    color:#1f1f1f;
}
.link-instagram {
    width: 30px;
    height: 30px;
    position:relative;
    position:absolute;
    bottom:0;
    left:50%;
    transform: translate(50%, -100%);
}
.link-instagram a{
display: block;
}
.list---drawerMenu li a{
    width: 30px;
    height: 30px;
}
.link-instagram .icon-image img:nth-of-type(2){
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}
@media (hover: hover) and (pointer: fine) {
    .list-drawerMenu li a{
        transition: color 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    }
    .list-drawerMenu li:nth-of-type(2n) a:hover{
        color:#83CCCB;
    }
    .list-drawerMenu li:nth-of-type(2n-1) a:hover{
        color:#EA5854;
    }
    .link-instagram .icon-image img{
        transition: opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    }
    .link-instagram .icon-image:hover img:nth-of-type(1){
        opacity:0;
    }
    .link-instagram .icon-image:hover img:nth-of-type(2){
        opacity:1;
    }
}
.overlayed .wrap-drawerMenu{
    top: 0;
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .trigger-overlay,
    .snsIcon img,
    .snsFooter img{
        transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    }
    .trigger-overlay:hover,
    .snsIcon:hover img,
    .snsFooter:hover img{
        transform: scale(1.1);
    }
}

@media only screen and (max-width:520px) {
    .content-drawerMenu {
        width:100%;
        background-size: 620px auto;
    }
    .cell-drawerMenu {
        width:77%;
        width:100%;
        max-width: 300px;
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .content-drawerMenu:before {
        width: 100%;
        height: 200px;
        background-color:#e8e8e8;
        display: inline-block;
        content: "";
        position: absolute;
        top:0;left:0;
        z-index:-1;
    }
    .link-instagram {
        width: 30px;
        width: 105px;
        height: 30px;
        position:static;
        transform: translate(0%, 50%);
    }
    .link-instagram a{
        width: 30px;
        height: 30px;
    }
    .list-drawerMenu {
        padding:56px 0 0;
    }

}

/*  hover effect
-------------------------------------------------------------*/
@media (hover: hover) and (pointer: fine) {
}

/*  responsive style
-------------------------------------------------------------*/
@media only screen and (max-width:768px) {
}
@media only screen and (min-width:769px) {
}
@media only screen and (min-width:1280px) {
}
@media only screen and (min-width:769px) {
}