/* 
Theme Name: COMISE
Author: tokka
Author URI: https://tokka.co.jp/
Version: 1.0
*/
@charset "UTF-8";
/* CSS Document */
/* ------------------------------------- /
/   共通
/* ------------------------------------- */
.pc {
    display: block !important;
}
.sp {
    display: none !important;
}
@media (max-width: 800px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
}
html {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
}
body {
    width: 100%;
    height: 100%;
    line-height: 1.5;
    margin: 0;
    font-size: 1.6rem;
    color: #222222;
    font-family: "Zen Old Mincho", serif;
    font-style: normal;
}
a {
    text-decoration: none;
    color: unset;
}
h1 {
    margin: 0;
}
ul {
    list-style: none;
    padding-inline-start: 0;
}
h2 {
    font-size: clamp(3.5rem, 0.286rem + 6.43vw, 8rem);
    color: #FFB26F;
    line-height: 1.1875;
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1rem;
}
p {
    font-size: clamp(1.5rem, 1rem + 0.71vw, 2rem);
    line-height: 2.8;
    letter-spacing: 0.2rem;
}
.inner{
    width: 73%;
    max-width: 1400px;
    margin: 0 auto;
}
@media (max-width: 1200px){
    .inner{
        width: 88.5%;
    }
}
@media (max-width: 800px){
    p {
        line-height: 2.5;
    }
}
/* ------------------------------------- /
/  header
/* ------------------------------------- */
header h1 {
    position: relative;
}
header h1 > span {
    position: absolute;
    left: -1000px;
}
header img {
    width: 100%;
}
header .header_sp {
    display: none;
}
@media (max-width: 600px){
    header .header_pc {
        display: none;
    }
    header .header_sp {
        display: block;
    }
}
/* ------------------------------------- /
/  about
/* ------------------------------------- */
.about__wrapper {
    text-align: center;
    background-image: url('../img/about_bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 90%;
    margin: 0 auto;
}
.about__wrapper h2 {
    margin-top: 150px;
    margin-bottom: 60px;
}
.about__wrapper h3 {
    margin-bottom: 60px;
    font-size: clamp(2.4rem, 1.429rem + 2.14vw, 4rem);
    line-height: 1.45;
    font-weight: 700;
}
.about__wrapper p {
    font-weight: 600;
}
.about__wrapper a {
    display: flex;
    margin: 80px auto 0;
    justify-content: center;
    align-items: center;
    gap: 13px;
    border: 1px #008394 solid;
    border-radius: 5px;
    color: #008394;
    width: 400px;
    height: 90px;
    font-size: clamp(1.7rem, 1.486rem + 0.43vw, 2rem);
    font-weight: 700;
}
.about__wrapper a:hover {
    background-color: #008394;
    color: white;
}
.about__wrapper a > img {
    width: 32px;
    height: 32px;
}
.about__wrapper a > img.hover {
    display: none;
}
.about__wrapper a:hover > img.hover {
    display: block;
}
.about__wrapper a:hover > img:not(.hover) {
    display: none;
}
.about__wrapper .about__bm__img__container {
    display: none;
}

@media (max-width: 1200px){
    .about__wrapper h2 {
        margin-top: 100px;
        margin-bottom: 50px;
    }
}
@media (max-width: 800px){
    .about__wrapper {
        background-image: unset;
        width: unset;
    }
    .about__wrapper h2 {
        margin-top: 50px;
        margin-bottom: 30px;
    }
    .about__wrapper  h3 {
        margin-bottom: 30px;
    }
    .about__wrapper a {
        width: 300px;
        height: 80px;
        margin-top: 30px;
    }
    .about__wrapper a > img {
        width: 26px;
        height: 26px;
    }
    .about__wrapper p {
        text-align: left;
    }
    .about__wrapper .about__bm__img__container {
        margin-top: 40px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .about__wrapper .about__bm__img__container > img {
        width: 50%;
        transform: rotate(-4deg);
        max-width: 150px;
    }
}
/* ------------------------------------- /
/  pickup
/* ------------------------------------- */
.pickup_wrapper {
    position: relative;
    margin-top: 130px;
}
.pickup_wrapper::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 63%;
    top: 30%;
    background-color: #FFF5EB;
    z-index: -1;
}
.pickup_wrapper > h2 {
    display: none;
}
.pickup_wrapper div.inner {
    position: relative;
    height: 62vw;
    max-height: 1190px;
}
.pickup_wrapper  div.inner img {
    position: absolute;
}
.pickup_wrapper div.inner > ul > li > span {
    color: transparent;
    position: absolute;
    left: -1000px;
}
.pickup_wrapper div.inner > ul > li > img {
    position: absolute;
}
.pickup_wrapper div.inner > ul > li:nth-of-type(1) > img {
    width: 57%;
    right: -5%;
    top: 0;
}
.pickup_wrapper div.inner > ul > li:nth-of-type(2) > img {
    width: 44%;
    left: -3%;
    top: 19%;
}
.pickup_wrapper div.inner > ul > li:nth-of-type(3) > img {
    width: 53%;
    top: 42%;
    right: 0;
}
.pickup_wrapper div.inner > ul > li:nth-of-type(4) > img {
    width: 40%;
    top: 70%;
    left: 3%;
}
@media (max-width: 1200px){
    .pickup_wrapper {
        margin-top: 90px;
    }
}
@media (max-width: 800px){
    .pickup_wrapper {
        margin-top: 60px;
    }
    .pickup_wrapper  div.inner img {
        width: 100%;
        position: relative;
    }
    .pickup_wrapper div.inner {
        height: unset;
        max-height: unset;
    }
}
@media (max-width: 500px){
    .pickup_wrapper {
        margin-top: 40px;
    }
    .pickup_wrapper > h2 {
        display: block;
        margin: 0 auto 30px;
        text-align: center;
    }
    .pickup_wrapper > .inner > h2 {
        display: none;
    }
}
/* ------------------------------------- /
/  online_shop
/* ------------------------------------- */
.online_shop_wrapper {
    margin-top: 80px;
}
.online_shop_wrapper a {
    margin: 80px auto 0;
    max-width: 500px;
    display: block;
}
.online_shop_wrapper a img {
    width: 100%;
    border-radius: 5px;
    transition: transform .1s linear;
}
.online_shop_wrapper a:hover img {
    transform: scale(1.05);
}
@media (max-width: 1200px){
    .online_shop_wrapper {
        margin-top: 90px;
    }
}
@media (max-width: 800px){
    .online_shop_wrapper {
        margin-top: 60px;
    }
    .online_shop_wrapper a {
        margin: 30px auto 0;
    }
}
@media (max-width: 500px){
    .online_shop_wrapper {
        margin-top: 40px;
    }
}
/* ------------------------------------- /
/  access
/* ------------------------------------- */
.access_wrapper {
    margin-top: 100px;
    margin-bottom: 170px;
}
.access_wrapper  h2 {
    text-align: center;
    margin-bottom: 100px;
}
.access_wrapper .inner > div {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.access_wrapper .inner > div > div {
    width: 50%;
}
.access_wrapper .inner > div > .map {
    position: relative;
}
.access_wrapper .inner > div > .map > img {
    width: 100%;
}
.access_wrapper .inner > div > .map > img:nth-child(2) {
    position: absolute;
    top: -22%;
    left: 8%;
    width: 26%;
}
.access_wrapper .inner > div > .map > img:nth-child(3) {
    position: absolute;
    bottom: -7%;
    left: -3%;
    width: 26%;
}
.access_wrapper .inner > div > div:nth-of-type(2) p {
    padding-left: 11%;
    text-align: left;
    font-size: clamp(1.7rem, 1.3vw, 2.4rem);
    line-height: 2.3;
    letter-spacing: 0.2rem;
}
a.to_map {
    position: relative;
    text-decoration: underline;
}
a.to_map::after {
    content: url(../img/arrow_gmap_bk.svg);
    position: absolute;
}
.access_wrapper .inner > div > div:nth-of-type(2) > div {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.access_wrapper  .inner > div > div:nth-of-type(2) > div > img:nth-of-type(1) {
    width: 70%;
    margin: 0 0 0 auto;
}
@media (max-width: 1200px){
    .access_wrapper {
        margin-top: 100px;
        margin-bottom: 120px;
    }
}
@media (max-width: 800px){
    .access_wrapper {
        margin-top: 60px;
        margin-bottom: 60px;
    }
    .access_wrapper  h2 {
        margin-bottom: 100px;
    }
    .access_wrapper  .inner > div > div {
        width: 100%;
    }
    .access_wrapper .inner > div > .map {
        width: 80%;
        margin: 0 auto;
    }
    .access_wrapper .inner > div > div:nth-of-type(2) {
        display: block;
    }
    .access_wrapper .inner > div > div:nth-of-type(2) p {
        padding-left: unset;
        text-align: center;
        margin: 40px 0;
    }
    .access_wrapper  .inner > div > div:nth-of-type(2) > div > img:nth-of-type(1) {
        width: 80%;
        margin: 0 auto;
    }
    .access_wrapper .inner > div > div:nth-of-type(2) > div > div {
        display: none;
    }
}
@media (max-width: 500px){
    .access_wrapper {
        margin-top: 40px;
        margin-bottom: 30px;
    }
    .access_wrapper .inner > div > .map {
        width: 100%;
    }
    .access_wrapper  .inner > div > div:nth-of-type(2) > div > img:nth-of-type(1) {
        width: 100%;
    }
}
/* ------------------------------------- /
/  footer
/* ------------------------------------- */
footer {
    text-align: center;
    position: relative;
    margin: 0 auto;
}
footer > a {
    display: block;
    width: 32%;
    max-width: 447px;
    margin: 0 auto 80px;
    min-width: 300px;
}
footer > a > img {
    width: 100%;
}
footer > span {
    display: block;
}
footer > .address {
    font-size: clamp(1.6rem, 1.029rem + 1.14vw, 2.4rem);
    margin-bottom: 40px;
}
footer > div {
    margin-bottom: 100px;
}
footer .banner {
    display: block;
    margin: 80px auto 0;
    max-width: 500px;
}
footer .banner img {
    width: 100%;
    border-radius: 5px;
    transition: transform .1s linear;
}
footer .banner:hover img {
    transform: scale(1.05);
}
footer .link .container {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
footer .link .container a {
    text-decoration: underline;
}
footer > .copyright {
    color: #FFB26F;
    font-size: clamp(1.5rem, 1.286rem + 0.43vw, 1.8rem);
}
@media (max-width: 1200px){
    footer > .address {
        margin-bottom: 30px;
    }
    footer > div {
        margin-bottom: 50px;
    }

}
@media (max-width: 800px){
    footer > a {
        margin-bottom: 30px;
    }
    footer > .address {
        margin-bottom: 20px;
    }
    footer .banner {
        /* width: 200px; */
        /* height: 60px; */
        margin-top: 30px;
    }
    footer > div {
        margin-bottom: 20px;
    }
}
@media (max-width: 600px){
    footer .link .container {
        flex-direction: column;
        gap: 10px;
    }
}

/*2025/06/03*/
.online_shop_banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 5vw;
    width: min(100%, 1080px);
    margin: 0 auto;
}
footer .online_shop_banner {
    margin-top: 80px;
}
    .online_shop_banner a {
        display: block;
        width: 48.5%;
        max-width: 100%;
        margin: 0;
    }
    .online_shop_banner img {
        width: 100%;
    }
    
@media (max-width: 800px){
.online_shop_banner {
    width: min(100%, 500px);
}
footer .online_shop_banner {
    margin-top: 30px;
}
    .online_shop_banner a {
        width: 100%;
    }

}