@charset "utf-8";



:root {
    /* color */
    --primary-white: #FDFDFD;
    --primary-black: #303030;
    --primary-karasi: #C79F28;
    --primary-green: #277446;
    --btn-brown: #91735E;
    --vivid-brown: #662B00;
    --light-brown: #A58B7B;
    --primary-orange: #C74D28;
    --primary-navy: #1A3D84;
    --background-beige: #F9F4E8;
    --background-gray: #EDEBE7;

    /* font */
    --font-title: "Kiwi Maru";
    --font-txt: "Zen Maru Gothic";
    --text-sp: 1.5rem;

    /* padding,width */

    --contentsWidth-sp: 87.2%;
    /* 327/375 */
    --contentsPadding-sp: 6.4%;
    /* 24/375 */

    --paddingTopBottom-sp: 48px;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: "Zen Maru Gothic", "Kiwi Maru", "Yuji Boku";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    color: var(--primary-black, #303030);
    background-color: var(--primary-white, #FDFDFD);
    font-size:1.2rem;
}

img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* 体験コース、会員コース、イベントの画像サイズ */
.item-image {
    max-width:327px;
    aspect-ratio: 327/212;
    
}

/* 土と親しむコンテンツ、体験の流れの画像サイズ */
.item-image--thin {
    aspect-ratio: 321/164;
    max-width:321px;
}

.indent-one {
    margin-top: 16px;
}

.indent-two {
    margin-top: 32px;
}

.indent-three{
    margin-top:48px;
}

.indent-four{
    margin-top:64px;
}

.indent-five{
    margin-top:80px;
}

h1{
    font-size:2.4rem;
    font-family: var(--font-title);
}

h2 {
    font-family: var(--font-title);
    font-size: 2rem;
}

.wrapper{
    max-width:1920px;
    margin:0 auto;
}

.section-title{
    text-align:center;

}

h3{
    font-family: var(--font-title);
    font-size: 2rem;
}


p {
    font-family: var(--font-txt);
    font-size:var(--text-sp);

}

dt {
    font-weight: bold;
}

.bold{
    font-weight: bold;
}

rt {
    font-size: 1rem;
    
}

.txt {
    font-size: var(--text-sp);
    line-height: 1.6;

}

.txt-s {
    font-size: 1.3rem;
}

.navy{
    color:#1A3D84;
    font-weight: bold;
}

.green{
    color:var(--primary-green);
    font-weight: bold;
}

.border{
    border-bottom: solid 1px #1A3D84;
}

.vivid-brown{
    color: var(--vivid-brown);
    font-weight: bold;
}

/* SPでもPCでも横並びを使用する場合 */
.flex {
    display: flex;
    justify-content: center;
}

.primary-paddiing {
    padding:48px 24px;

}

.brSp{
    display:block;
}

.vertical-rl{
    writing-mode: vertical-rl;
    letter-spacing: 0.3em;
    font-weight: bold;
    text-orientation: upright;
    font-feature-settings: "vrt2";
    
}

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

    h1{
        font-size:4.8rem;
    }

    h2 {
        font-size:4rem;
    }

    h3{
        font-size:2.4rem;
    }

    .brSp{
        display:none;
    }

    .txt{
        font-size:1.6rem;
    }

    p{
        font-size:1.6rem;
    }
    .primary-paddiing{
        padding:64px 0;
    }
  


   
}

/* =============
header
==============*/

.header__logo {
    max-width: 115px;
    width: 100%;
    z-index: 50;
}

.header__logo .active{
    width:100%;
    z-index:50;
}


.front-header {
    width: 100%;
    height:auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

@media screen and (min-width:1920px) {
    .front-header{
        justify-content: space-around;
    }
    
}



.fixed {
    background-color: rgba(255, 255, 255, 0.623);
}


.front-header.fixed .header__logo {
    width: 60%;

}

.header__topic--pc{
    display:none;
}


/* =============
btn
==============*/

.btn-viewmore,
.btn--faq {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    line-height: 2;
    border-radius: 4px;
    border: 1px solid #000;
}

.btn-contact:hover .yajirusi-white,
.btn-viewmore:hover .yajirusi,
.btn-cta:hover .yajirusi-white{
    transform: translateX(3px);
}

.btn-reserve {
    width: 90px;
    aspect-ratio: 90/86;
    position: fixed;
    bottom: 15px;
    right: 10px;
    z-index: 50;
}

.btn-reserve:hover{
    transform: rotate(16deg);
    }

    .topBtn:hover{
        transform:translateY(-5px);
    }

.btn-viewmore__about,
.btn-viewmore__trial{
    width: 166px;
}

/* 体験予約はこちらから、お問い合わせで入会、送信 */
.btn-cta{
    display: flex;
    width: 275px;
    aspect-ratio: 275/42;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    font-size: 1.5rem;
background: var(--primary--karasi, #C79F28);
color:var(--primary-white);
}


.btn-contact{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    line-height: 2;
    color:var(--primary-white);
    border-radius: 4px;
    border:solid 1px var(--primary-white);
}

.btn-contact,
.btn-question,
.btn-viewmore--member{
    width:194px;
    aspect-ratio: 194/48;
}

.yajirusi {
    width: 14px;
    height: 14px;
    margin-left: 8px;
    transition: all .5s;
}

.yajirusi-white{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" fill="none"><path d="M11.7071 8.70711C12.0976 8.31658 12.0976 7.68342 11.7071 7.29289L5.34315 0.928932C4.95262 0.538408 4.31946 0.538408 3.92893 0.928932C3.53841 1.31946 3.53841 1.95262 3.92893 2.34315L9.58579 8L3.92893 13.6569C3.53841 14.0474 3.53841 14.6805 3.92893 15.0711C4.31946 15.4616 4.95262 15.4616 5.34315 15.0711L11.7071 8.70711ZM11 7H10V9H11V7Z" fill="%23fdfdfd"/></svg>');
    background-repeat: no-repeat;
    width:14px;
    height:14px;
    margin-left:8px;
    transition:all .5s;
}



.mark {
    width:70px;
    height: 70px;
    background-image: url(../images/dodo_png/mark.svg);
    background-position: center;
    background-size: cover;
    position: relative;
}

@media screen and (min-width:768px) {
    .btn-viewmore {
        font-size: 1.6rem;
    }
    .btn-reserve {
        width: 145px;
        aspect-ratio: 145/134;
        position: fixed;
    }
    
}

@media screen and (min-width:1920px) {
   
    .btn-reserve{
        right:20%;
    }
  
    
}

/* nav初期表示 */
.nav {
    background-image: url(../images/dodo_png/front-fv.png);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.4s;
    z-index: 10;
}



.nav.active {
    transform: translateX(0);
}

.nav__list {
    margin-left: 48px;
    margin-top: 120px;
}

.nav__item {
    font-size: 2.0rem;
    color: var(--vivid-brown);
    font-family: var(--font-title);
    margin-top: 40px;
}

.nav__item:last-child{
    margin-top:24px;
}

.nav__item:nth-of-type(4){
    margin-bottom:40px;
}


.navigation__item--sub{
    font-size:1.8rem;
    color: var(--vivid-brown);
    font-family: var(--font-title);
    margin-bottom: 24px;
}


.nav__item:hover,
.navigation__item--sub:hover{
    opacity: 0.7;
}

.first{
    position:relative;
    padding-top:1.5rem;
}

.first::before{
    position:absolute;
    content: '';
    width:2em;
    height:1px;
    background-color: var(--vivid-brown);
    top:0;
    left:0;
}

.hamburger-menu {
    position: relative;
    z-index: 50;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-image: url(../images/dodo_png/btn-humberger.svg);
    top: 10px;
    right:0;
}

.hamburger-menu span {
    position: absolute;
    background-color: var(--primary-white);
    width: 22px;
    height: 2px;
    border-radius: 1px;
    transition: all 0.4s ease-in-out;
}


.hamburger-menu span:nth-of-type(1) {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.hamburger-menu span:nth-of-type(2) {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.hamburger-menu.active span:nth-of-type(1) {
    transform: translateY(4px) rotate(-45deg);
    left: 30%;
}

.hamburger-menu.active span:nth-of-type(2) {
    transform: translateY(-4px) rotate(45deg);
    left: 30%;
}

.sns {
    width: 40px;
    height: 40px;
}

/*======================
.form
====================== */

input[type=text] {
    background-color: #EDEBE7;
    padding: 8px 16px;
    border-radius: 10px;
    width:100%;
    font-size: 1.4rem;
    
}

textarea {
    background-color: #EDEBE7;
    padding: 16px;
    border-radius: 10px;
    width:100%;
    font-size:1.4rem;
}

label{
    font-size:1.4rem;
}

select,
option{
    font-size:1.6rem;
}



@media screen and (min-width:768px) {
    label{
        font-size:1.5rem;
    }
    
}


/*======================
.footer
====================== */
.footer{
    background-color:#102755 ;
    color:var(--primary-white);
    padding:16px 48px;
}
.footer__logo{
    width:91px;
    aspect-ratio: 91/84;;
}


.return{
  text-align: center;
  display: block;
  
}
.topBtn{
    margin-top:30px;
    width:100px;
    aspect-ratio: 124/74;

}

.footer__item{
    font-size:1.4rem;
    margin-top:8px;
    color:var(--primary-white);
}

.footer__item--privacy{
    font-size:1.1rem;
}

.footer-right a:hover{
    color:#FFFAD0;
}

.footer-right{
    display:none;
}
small{
    font-size:1.1rem;
}
@media screen and (min-width:768px) {

   .footer{
    padding-bottom:64px;
   }

    .footer-right{
        display: block;
        padding:40px 72px;
    }
    
    .footer__flex{
        display: flex;
        justify-content: space-between;
    }
    
    .footer-menu__item{
        font-size: 1.5rem;
        margin-right:50px;
        margin-top: 16px;
    }
    .footer-menu{
        align-items: center;
    }
    
    /* .footer-menu__item:first-child{
        margin-top:10px;
    } */

    .footer-menu__item a{
        display:inline-block;
        cursor: pointer;
    }
    
    footer .btn-contact{
        margin-top:32px;
    }

    .return{
        margin-left: auto;
        width:143px;
        display: block;
        margin-top:-120px;
        position:fixed;
        z-index: 50;
        bottom:10px;
        right:140px;
    }
    /* .return{
        margin-left: auto;
        width:143px;
        display: block;
        margin-top:-120px;
        position:fixed;
        z-index: 50;
        bottom:150px;
        right:10px;
    } */
    .topBtn{
        width:124px;
        
    }

    .reserve-haniwa{
        position:fixed;
        bottom:250px;
        right:20px;
        width:142px;
        aspect-ratio: 142/113;
    }
        
}
    

/*======================
.access
====================== */
.access{
    padding:32px var(--contentsPadding-sp);
    background-image: url(../images/dodo_png/access.png);
    
}

.access__flex{
    margin-top:24px;
}
.access__map{
    margin-top:24px;
    width: 327px;
    aspect-ratio:327/217;

}
.access__list{
    margin-top:24px;
}

.front-section__lead--access{
    margin-right:auto;
    justify-content: flex-start;
    gap:16px;
    margin-top:16px;
}

.access__txt{
    width:64.2%;
}

.access__topic{
    margin-top:16px;
 
}

.access__title{
    text-align: left;
}

.mark-visit{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none"><path d="M99.388 55.2286C90.7451 98.7831 58.6035 96.2912 48.7812 99.2242C19.7786 104.841 6.44238e-05 79.1921 0 47.1783C-5.51306e-05 19.7824 31.7719 2.15391e-05 54.5006 0C71.0798 -1.57115e-05 104.961 27.1462 99.388 55.2286Z" fill="%23277446"/></svg>');
}
.mark-visit::after{
    content: "いく";
    color:var(--primary-white);
    position:absolute;
    top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
}


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

    .access{
        padding:64px 0;
    }
    .access__flex{
        display:flex;
        justify-content: center;
        gap:40px;
        align-items:end;
    }
    .access__map{
        margin-top:40px;
        width:579px;
        aspect-ratio: 579/385;
    }

    .access__list{
        width:280px;
        aspect-ratio: 280/336;
    }

    .access__txt{
        width:42%;
    }

    .front-section__lead--access{
        margin:0 auto;
        padding:40px 0 0 18.6%;
    }
}

/*======================
.student-works
====================== */

.student-works{
    background-image: url(../images/dodo_png/front-works.png);
   padding:40px 0;
   }
   
   .student-works__top{
       width:100%;
       position:relative;
       
   }
   
   .student-works__top::after{
       content: "";
       background-image: url(../images/dodo_png/tokei.png);
       position: absolute;
       width:24.8%;
       aspect-ratio: 93/89;
       background-size: cover;
       top:-60px;
       right:24px;
   }
   
   .front-section__lead--works{
       margin-top:24px;
       gap:16px;
   }
   
   .front__catch--works{
       margin:56px auto 0;
       writing-mode: vertical-rl;

   }
   
   .mark-use{
       background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none"><path d="M99.388 55.2286C90.7451 98.7831 58.6035 96.2912 48.7812 99.2242C19.7786 104.841 6.44238e-05 79.1921 0 47.1783C-5.51306e-05 19.7824 31.7719 2.15391e-05 54.5006 0C71.0798 -1.57115e-05 104.961 27.1462 99.388 55.2286Z" fill="%231A3D84"/></svg>');
   }
   .mark-use::after{
       content: "つかう";
       color:var(--primary-white);
       position:absolute;
       top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   color: #fff;
   text-wrap: nowrap;
   }
   
   /* slick slider */
   .slick-slider{
       margin-top:40px;
       overflow: hidden; 
   }
   
   /* 高さを固定する記述 */
   .slick-track{
       position:relative;
       left:0;
       top:0;
       display:block;
       margin-left:auto;
       margin-right:auto;
   }
   
   .slick-track:before{
       content:"";
       display:table;
   }
   
   .slick-slide>div{
       height:100%;
   }
   /* 高さ固定記述ここまで */
   
   .slider__item{
       margin-left:24px;
   }
   
   .odd{
       padding-top:80px;
   }
   
   .ham{
       padding-top:30px;
   }

   .must{
    color:var(--primary-orange);
    font-size:1.3rem;
    margin-right:8px;
   }

   .tategaki{
    margin:0 auto;
   }
   
   
   @media screen and (min-width:768px) {
       .student-works{
          padding:70px 0;
       }
   
       .student-works__top::after{
           width:17.4%;
           max-width:251px;
           aspect-ratio: 251/240;
           left:65%;
           top:-160px;
           transform: translateX(-50%);
       }
   
       .front__catch--works{
           margin:190px auto 0;
          
       }
   
       
       /* slick slider */
   .slick-slider{
       margin-top:108px;
   }
       
   }

   
.thanks{
    padding:120px 6.4% 64px;
    background-image: url(../images/dodo_png/about__firstView.png);
}

.thanks__txt{
    text-align:center;
    max-width:800px;
    margin: 0 auto;
}

.thanks img{
    width:94px;
    margin:0 auto;
    margin-top:40px;
    display: block;
}