@charset 'UTF-8';

/*
VARIABLES
================================================ */
:root {
    --light-green: #8cd89e;
    --deep-green:rgb(70, 214, 70);
    --green: #63dbd0;
    --brown: #403632;
    --light-grey: #eee;
    --white: #fff;
    --grey: #8c8c8c;
    --oswald-font: 'Oswald', sans-serif;
}

/*
GENERAL STYLING
================================================ */
body {
    color: var(--brown);
    background: url('../images/greenturf.png') no-repeat right bottom / cover fixed;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
}

/*
COMMON
================================================ */
p {
    line-height: 2.5rem;
    font-size: 1.5rem;
    /* width: 52rem; */
}
.minifont {
    font-size: 1rem;
}
@media (max-width : 768px ) {
    p {
        font-size: 1.2rem;
        line-height: 3rem;
    }
    .minifont {
        font-size: 1rem;
    }
}

img {
    max-width: 100%;
}
.title {
    font-family: var(--oswald-font);
    font-size: min(9vw, 4rem);/* 1rem=16px */
    /* margin-bottom: 2rem; */
}
.btn {
    color: var(--white);
    background: var(--brown);
    border: 1px solid var(--brown);
    text-decoration: none;
    padding: 1rem;
    display: inline-block;
    margin: 2rem 0;
    transition: .4s;
}
.btn:hover {
    color: var(--brown);
    background: var(--light-green);
}
.back-btn {
    position: fixed;
    z-index: 4;
    right: 1rem;
    bottom: 1rem;
    border-radius: 50%;
}
.fadein {
    opacity: 0;
}
a {
    text-decoration: none;
}
li { 
    list-style: none;
}
.hinba {
    color: rgb(233, 38, 38);
}
.boba {
    color: rgb(33, 33, 236);
}
.updatedate {
    position: absolute;
    top: 0%;
    left: 83%;
}
@media (max-width : 820px ) {
    .updatedate {
        left: 65%;
    }
}

h4 {
    font-size: 1.7rem;
}
@media (max-width : 768px ) {
    h4 {
        font-size: 1.5rem;
    }
}

.underbar {/*h3の棒線付き*/
    margin: 1rem 0;
    font-weight: normal;
    border-top: 1px solid var(--brown);
    border-bottom: 1px solid var(--brown);
    font-size: min(6.5vw, 2rem);
}

.bigvoice {/*強調したいp*/
    font-size: min(6vw, 1.8rem);
    line-height: 4rem;
}
@media (max-width: 768px) {
    .bigvoice {
        line-height: 2.7rem;
        margin: 0 3rem 0 3rem;
    }
}

/*
LAYOUT
================================================ */
.wrapper {
    max-width: 57rem;
    margin: auto;
}

/*
LOADING
================================================ */
#loading {
    background-color: var(--light-grey);
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
}
#loading-screen {
    background-color:  var(--light-green);
    position: fixed;
    inset:  0;
    z-index: 9998;
    translate: 0 100vh;
}
#loading p {
    font-size: 2rem;
    font-family:  var(--oswald-font);
}

/*
HEADER
================================================ */
.header{
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
}
.header-rink{
    color: var(--green);
    -webkit-text-stroke: 1px #FFF;
    text-decoration: none;
}

/*
SLIDE MENU
================================================ */
/* 開閉ボタン */
.btn-menu {
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 4;
    padding: .5rem 1rem;
    border: 1px solid var(--brown);
    border-radius: 50%;
    height: 4rem;
    width: 4rem;
    transition: .4s;
}
.btn-menu svg {
    fill: var(--brown);
    margin-top: .25rem;
    height: 2rem;
    width: 2rem;
}

/* 閉じるボタン */
#menu-close {
    border: 1px solid var(--light-green);
}
#menu-close svg {
    fill: var(--light-green);
}

/* スライドメニューパネル */
#menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 4;
    padding: 8rem 2rem 2rem;
    width: max(32vw, 20rem);
    height: 100vh;
    background-color: var(--brown);
    box-shadow: 0 0 2rem var(--brown);
    font-family: var(--oswald-font);
    translate: 100vw;
}
.menu-list {
    list-style: none;
}
.menu-list li {
    margin: 1.5rem 0;
    opacity: 0;
}
.menu-list a {
    color: var(--light-green);
    
    font-size: 2rem;
}
#menu-mask{
    background: rgba(126, 126, 126, 0.6);
    position: fixed;
    inset: 0;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
}

/*
HERO
================================================ */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero::after {
    content: '';
    width: 50%;
    height: 100vh;
    background: url('../images/horse-966521_1280.jpg') no-repeat center / cover;
    position: absolute;
    inset: 0;
}

.hero .title ,
.hero .title a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 2;
    width: 100%;
    height: 35vh;
    font-size: max(7vw, 3rem);
    line-height: 1.2;
    color: var(--green);
    -webkit-text-stroke: 2px #FFF;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 20%,
        var(--light-grey) 30%,
        var(--light-grey) 70%,
        transparent 80%,
        transparent 100%
    );
}
@media (max-width : 768px ) {
    .hero::after {
        width: 100%;
    }
}

/*
GALLERY
================================================ */

.thumb-con {
    display: grid;
    gap: 3rem;
    grid-template-columns: repeat(2, 1fr);
    margin: 1rem 0;
    padding: 0;
}
@media (max-width: 768px ){
    .thumb-con {
        gap: 1rem;
        grid-template-columns: repeat(1, 1fr);  
    }
    /* .content-title { 
        padding: 0 1.5rem;
    }*/
}


/*
CONCEPT
================================================ */
.concept {
    padding-bottom: 2rem;
    background-color: var(--light-green);
    background-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 10%,
        var(--light-grey) 50%,
        var(--light-grey) 60%,
        transparent 90%,
        transparent 100%
    );
}
.concept div {
    max-width: 66rem;
}
.concept p {
    text-align: center;
}
.concept h3 {
    font-size: min(6.5vw, 2.5rem);
}
@media (max-width: 768px ){
    .concept {
        margin: 0;
    }
    .concept h2 {
        padding-top: 1rem;
        margin: 0;
    }
    .concept p {
        margin: 0;
        padding: 0 2rem;
    }
}

/*
SHOP indexのみ適用
================================================ */
.shop {
    position: relative;
    margin-top: 8rem;
    display: flex;   
    background-color: var(--deep-green); 
    background-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 10%,
        var(--light-grey) 30%,
        var(--light-grey) 70%,
        transparent 90%,
        transparent 100%
    );
}
.shop-content {
    
    padding: 0 3rem;
    width: 90vw;
}
.shop h2 a {
    color: var(--brown);
}
.shop h3 {
    margin: 1rem ;
    padding-top: 2rem;
    font-weight: normal;
    border-top: 1px solid var(--light-grey);
}
.shop h2,
.shop p {
    border-bottom: 2px solid var(--brown);
}
.blog-under {
    margin-top: 0;
    margin-bottom: 0;
}
@media (max-width: 768px ){
    .shop {
        margin: 0;
    }
    .shop-content {
        padding: 0;
    }
    .shop h2 {
        padding-top: 1rem;
        margin: 0;
    }
    .column-under {
        margin-bottom: 2rem;
    }
    .blog-under {
        padding-bottom: 2rem;
    }
}



/*
Column. Blog
btn
================================================ */
.btn-art {
    color: var(--white);
    background: var(--brown);
    border: 1px solid var(--brown);
    text-decoration: none;
    padding: 0.2rem;
    display: inline-block;
    margin: 0.3rem 0;
    width: 25rem;
    height: auto/*2.5rem*/;
    transition: .4s;
    font-size: min(5vw, 1.5rem);
}
@media (max-width: 768px ) {
    .btn-art {
        width: 19rem;
    }
}
.btn-art:hover {
    color: var(--brown);
    background: var(--light-green);
}

   
/*
Column. Blog
shop2
================================================ */
.shop2 { 
    /* margin-top: 8rem;  */
    position: relative;
    background-color: var(--light-green);
}
.shop2 .title {
    margin: 0;
}
.shop2-content {
    background-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 10%,
        var(--light-grey) 20%,
        var(--light-grey) 80%,
        transparent 90%,
        transparent 100%
    );
    padding: 3rem 0;
    margin-top: 0;
}




@media (max-width: 768px ) {
    .shop2 {
        margin: 0;
        padding: 0 4vw;
    }
    .shop2 p { 
        padding: 0;
    }
}


.article-list{
    list-style: none;
}

/*
MODAL WINDOW 
================================================ */

#modal-open,
#modal-close {
    color: var(--white);
    background: var(--brown);
    border: 1px solid var(--brown);
    text-decoration: none;
    padding: 0.2rem;
    display: inline-block;
    margin: 0.3rem 0;
    width: 18rem;
    /* height: 2rem; */
    transition: .4s;
}
@media (max-width: 768px ) {
    #modal-close{
     width: 5rem;
    }
 }

#modal-open:hover,
#modal-close:hover {
    color: var(--brown);
    background: var(--light-green);
}
#modal-mask{
    background: rgba(0, 0, 0, .6);
    position: fixed;
    inset: 0;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
}
#modal{
    background: #fff; 
    width: 42rem;
    padding: 0;
    border-radius: 5%;
    /* padding-top: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius:  .5rem; */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: auto;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;   
}
#modal p {
    line-height: 2.1rem;
}

@media (max-width: 768px ) {
   #modal{
    width: 17rem;
   }
   #modal p {
    line-height: 2.1rem;
   }
}

/*
FOOTER
================================================ */
.footer-box {
    background-color: var(--grey);
    margin-top: 1rem;
}
.footer-main {
    height: 25vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
.footer-title {
    color: var(--green);
    -webkit-text-stroke: 1px #FFF;
    font-size: min(8.5vw, 3.5rem);
    line-height: 1;
}
.footer-text {
    font-size: min(7vw, 1.3rem);

}
@media (max-width: 768px ){
    .footer-box {
        margin-top: 2rem;
    }   
    .footer-main {
        height: 20vh;
    }
    .footer-title {
        padding: 0;
    }
    .footer-text {
        padding: 0;
    }
}

/*
AFFILIATE
================================================ */
@media (max-width: 768px ){
   
    .cm2 tr {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }

}

/*
DESKTOP SIZE
================================================ */
@media (max-width: 768px ){
/* COMMON */
    .title {
        margin-bottom: 3rem;
    }
    

/* SLIDE MENU */
    .btn-menu:hover {
        background-color: var(--light-green);
    }
    #menu-close:hover svg {
        fill: var(--brown);
    }
    .menu-list a:hover {
        transition: .4s;
        color: var(--green);
    }

/* CONCEPT*/
    .concept {
        display: flex;
    }
    .concept img {
        margin: -6rem 0;
        max-width: 38rem;
    }

/* SHOP */
    /* .shop {
        /* height: 32rem; */
    /* } */ 
    .pach { /* 記事のため */
        margin-top: -20rem;
        width: 60vh;
        left: 50%;
        translate: -50%;
    }
    .shop {
        display: block;
    }
    .shop-content {
        width: 80%;
        
    }
    .header-rink-mini {
        font-size: 1.2rem;
    }
}