@charset "UTF-8";
:root{
    --topColor:#2b2a2a;
    --textColor:#000;
    --btnColor:#72521a;
    --hoverColor: #3f2c11;
    --shadowColor:#c3b073;
    
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: url(..//image/gbPc.jpg);
}
html{
    font-size: 10px;
}
body,footer{
    font-size: 1.6em;
    line-height: 1.5;
    font-family: "Kiwi Maru", serif;
    color: var(--textColor);
}
img{
    max-width: 100%;
} 
a{ text-decoration: none;
    color: var(--textColor);
}
.eng{
    font-family: "Comfortaa", sans-serif;
}
.inner{
    justify-content: center;
    margin: 7em 10em;
}
.innerTitle{ 
    display: flex;
    justify-content: center;
    margin-bottom: 3em;
}

.innerTitle h2{
    text-align: center;
    font-size: 2em;
    margin: 0 2em;
    
}
.innerTitle::before{
    content: '';
    background: url(..//image/line.png) no-repeat;
    background-position: center;
    flex-grow: 1;
} 
.innerTitle::after{
    content: '';
    background: url(..//image/line.png) no-repeat;
    background-position: center;
    flex-grow: 1;
}
li{
    list-style: none;
}
#Hbg,
#Hbg+label {
    display: none;
}

/***HEADER**/
@media (min-width:481px) {
    .pc {
        display: block !important;
    }
    .sp{
        display: none !important;
    }
   .slick01{
        height: 100vh;
        position: relative;
    }
    .slick01 img{
        background-size: cover;
    }
    .slick01 div{
        height: 100%;
    }
    .slick01 img{
        width: 100%;
        height: 100%;
    }
    header .yoko {
        position: fixed;
        top: 0;
    }
    /**スクロール前**/
    header .tate{
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 35%;
        background-color: rgba(255, 255, 255, 0.5);
        top: 0;
        right: 0;
        height: 100%;
    }
    header .logo img{
        width: 10em;
    }
    header .tate ul{
        display: flex;
        margin-top: 2em;
        flex-direction: column;
        gap: 1.5em;
        font-size: 2.5em;
        list-style: none;
        text-align: center;
        margin: 0;
    }
    header ul li a{
        color: var(--btnColor);
    }
    header ul li a:hover{
        color: var(--hoverColor);
    }     
}
header .yoko{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
    z-index: 100;
    padding: 1.5em 1.65em;
    background-image:linear-gradient(0deg,transparent,#fff,80% ,#fff) ;
    transition: 0.5s;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    align-items: center;
}
header .yoko {
    animation: fadeIn 0.3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
header .yoko .logo img{
    width: 10em;
}
header .yoko ul{
    display: flex;
    gap: 1em;
    font-size: 1.5em;
    list-style: none;
}
header .yoko ul li a{
    color: var(--textColor);
}
header .yoko ul li a:hover{
    color: var(--btnColor);
}

.btn{
    background-color: var(--btnColor);
    color: #fff;
    border-radius: 1000px;
    display: block;
    justify-content: center;
    margin: 0 auto;  
    margin-top: 2em;  
    text-align: center;
    width: 10em;
    line-height: 2.5em;
    font-size: 1.2em;
    transition: 0.5s
}
.btn:hover {
    background-color: var(--hoverColor);
    color: #fff !important;
}
/***NEWS***/
.newsText a{
    font-size: 1.5em;
}
.newsText a:hover{
    color: var(--hoverColor);
}
.newsText{
    background-color: #fffdbb;
    padding: 1.5em 3em;
    border-radius: 2em;
    box-shadow: 4px 4px 12px -2px var(--shadowColor);
}

/***CONCEPT***/

.conceptImg{
    width: 90%;
    margin: 0 auto;
    box-shadow: 2em 2em  #c0ab3f, -2em -2em #c3b073;
} 
.concept>.pc {
    width: 90%;
    margin: 0 auto;
    box-shadow: 2em 2em  #c0ab3f, -2em -2em #c3b073;
    /* vertical-align: bottom; */
}
.conceptText{
    margin-top: 7em;
    text-align: center;
}
.conceptText h3{
    font-size: 2em;
    margin-bottom: 1.5em;
}
.conceptText h3 br{
    display: none;
}
.conceptText p{
    font-size: 1.2em;
    padding-bottom: 1em;
    line-height: 2em;
}

/***MENU***/
.menuList{
    display: flex;
    width: 100%;
    margin: 0 auto;
    list-style: none;
    gap: 3em 3em;
}
.menuList li dl{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.menuImg{
    display: block;
    position: relative;
    width: 100%;
}
.menuImg::after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid var(--btnColor);
    top: 5%;
    left: 5%;
}

.menuList li dl dd:has(img){
    order: -1;
    margin-bottom: 2em;
    width: 100%;
}
.menuList li dl dd{
    font-size: 0.8em;
    color: #736357;
}
/***MAP***/
.contactInner {
    display: flex;
    justify-content: center;
}
.contactInner img{
    width: 50%;
    object-fit: cover;
}
.contactInner .mapText{
    width: 45%;
    margin-left: auto;
}
.contactInner .mapText table{
    margin-bottom: 1em;
    /* font-size: 1.2em; */
}
.contactInner .mapText th{
    vertical-align: top;
    width: 5em;
}
.contactInner .mapText td{
    margin-left: 1em;
}
.contactInner .mapText iframe{
    width: 100%;
}
/***FOOTER***/
footer .logo img{
    width: 10em;
}
footer .footerLink{
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
    padding-top: 1em;
    align-items: center;
    border-top: 1px solid var(--hoverColor);
}
footer .footerLink ul{
    list-style: none;
    width: 270px;
    display: flex;
    justify-content: space-between;
    gap:2em 1.5em;
    }
footer .footerLink ul li{
    display: block;
    width: 80px;
    font-size: .6em;
}
footer .footerLink ul li a{
    color: #000;
    text-align: center;
}
.footer small{
    display: block;
    background-color: var(--btnColor);
    color: #fff;
    text-align: center;
    padding: 0.5em 0;
    font-size: .5em;
}
/***768px〜960px以下***/
@media (max-width: 960px) {

#Hbg+label {
    display: flex;
    align-items: center;
    width: 3em;
    aspect-ratio: 4/3;
    position: absolute;
    top: 2.25em;
    right: 1em;
}
#Hbg+label span,
#Hbg+label::before,
#Hbg+label::after{
    content: "";
    display: block;
    background: var(--textColor);
    width: 100%;
    height: 4px;
    transition: .5s;
}
#Hbg+label::before,
#Hbg+label::after{
position: absolute;
}
#Hbg+label::before{
    top: 0;
}
#Hbg+label::after{
    bottom: 0;
}
#Hbg:checked+label span {
    background: transparent;
    /* opacity: 0; (上と同じで透明にする指定)*/
}
#Hbg:checked+label::before{
    top: calc(50% - 2px);
    rotate: 45deg;
}
#Hbg:checked+label::after{
    bottom: calc(50% - 2px);
    rotate: -45deg;
}
.tate {
    display: none !important;
}
header .yoko nav ul {
    gap: 1.25em;
    font-size: 2em;
    padding: 1.5em 0;
    background: var(--hoverColor);
    opacity: .7;
    flex-flow: column;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 80%;
    left: 100%;
    transition: .5s;
}
header .yoko nav ul li a {
    color: #fff;
}
#Hbg:checked~ul {
    left: 0;
}
main {
    padding: 0 5%;
}      
.menuList {
    grid-template-columns: repeat(2,1fr);
    gap: .5em 1.5em;
}
.menuList li dl dd:has(img) {
    margin-bottom: 1.5em;
}
.menu .menuPhoto::after {
	top: 6px;
	left: 6px;
}
.menu dt {
	font-size: .95em;
}

header .nav{
    justify-content: space-between;
}
header .nav ul {
   gap:1em;
   font-size: 1.5em;
}
.btn{
    margin-top: 1.5em;      
    text-align: center;
    width: 10em;
    line-height: 2em;
    font-size: 1em;
    transition: 0.5s
}
.inner{
    justify-content: center;
    margin: 5em 4em;
}
.innerTitl {
    margin-bottom: 1em;
}
.innerTitle h2{
    text-align: center;
    font-size: 1.5em;
    margin: 0 1em;
}
.newsText a{
    font-size: 1em;
}
.pc{
    display: block !important;
    box-shadow: 1em 1em  #c0ab3f,-1em -1em #c3b073;
}
.sp{
    display: none !important;
}
.conceptText h3{
    font-size: 1.5em;
    margin-bottom: 1.5em;
}
.conceptText p{
    font-size: 1em;
    padding-bottom: 1em;
}
.menuList li dl dt{
    font-size: 0.8em;
}
.contactInner img {
    width: 50%;
}
.contactInner .mapText table{
    margin-bottom: 0.5em;
    font-size: 0.8em;
}
.contactInner .mapText th{
    vertical-align: top;
    width: 5em;
}
.contactInner .mapText iframe{
    width: 100%;
    height: 65%;
    bottom: 0;
}
footer .footerLink{
    max-width: 1000px;
    padding-top: 0.5em;
}
footer .logo img{
    width: 5em;
}
footer .footerLink ul{
    width: 120px;
    gap:1.5em 1em;
    }
footer .footerLink ul li{
    width: 50px;
    font-size: .4em;
}
}
/***375px〜428px以下***/
@media (max-width: 430px){
    .pc {
        display: none !important;
    }
    .sp{
        display: block !important;
    }
body{
    background: url(../image/gbSp.jpg);
}
 .header .top .img {
    background:no-repeat center bottom/cover;
    height: 100vh;
    display: flex;
    position: static;
 } */
footer .footerLink{
    max-width: 500px;
    padding-top: 0.2em;
}
footer .logo img{
    width: 3em;
}
body>header div nav ul {
    top:25%;
}
footer .footerLink ul{
    justify-content: center;
    gap:0em 0.5em;
    }
footer .footerLink ul li{
    width: 50px;
    font-size: .3em;
    text-align: center;
}
footer ul li img{
    height: 3em;
}
.btn {
    font-size: .8rm;
}
.inner{
    justify-content: center;
    margin: 3em 2em;
}
.newsText a{
    font-size: 0.9em;
}
.newsText{
    padding: 1em 1em;
    border-radius: 1em;
    box-shadow: 2px 4px 12px -2px var(--shadowColor);
}
.innerTitle h2{
    font-size: 1.2em;
}
.concept>.pc{
    box-shadow: none;
}
.concept>.inner>.conceptImg>.sp{
    width: 70%;
    margin-right: auto;
    box-shadow: -0.3em -0.3em  #c0ab3f;
}
.concept{
    display: flex;
    flex-wrap: nowrap;
    position: relative;
}
.conceptText{
    margin-top: 2em;
}
.conceptText h3 br{
    display: block;
}
.conceptText h3{
    position: absolute;
    writing-mode: vertical-rl;
    text-align: left;
    text-indent: -7em;
    top: 10em;
    right: 2em;
    font-size:1em;
    font-weight: 100;
}
.conceptText p{
    font-size: 0.85em;
    text-align: start;
    line-height: 1.25em;
}
.menuList{
    display: flex;
    width: 100%;
    margin: 0 auto;
    list-style: none;
    gap: 3em 3em;
}
.menuPc{
    display: none;
} 
.contactInner{
    display: block;
}
.contactInner img{
    width: 100%;
}
.contactInner .mapText{
    width: 100%;
    line-height: 1.25em;
    margin: 2em auto;
    font-size: 0.85em;
}
.contactInner .mapText iframe{
    width: 100%;
    height: 20em;
    margin-top: 1.5em;
}
}