@charset "UTF-8";
/*
Theme Name: ホンマ製作所
Description: ホンマ製作所全ページ共通スタイルです。
Author: 株式会社アドプロダクションエム
Author URI: https://addpro-m.co.jp/
*/
/* ====================
reset, root
=================== */
:root {
    --a-duration: .4s;
    --a-easing: cubic-bezier(.05,.55,.5,1);
    --c-black: #231815;
    --c-black-rgb: 35, 24, 21;
    --c-black-hover: #41302b;
    --c-black-hover-rgb: 65,48, 43;
    --c-white: #fffffd;
    --c-white-rgb: 255, 255, 253;
    --c-brown: #efe6d9;
    --c-brown-rgb: 239, 230, 217;
    --c-red: #eb5426;
    --c-red-rgb: 235, 84, 38;
    --c-red-hover: #d6461a;
    --c-red-hover-rgb: 214,70,26;
    --c-black-grad: linear-gradient(180deg, #231815 0%, #49342d 40%, #54251c 70%, #681909 100%);
    --c-888: #888;
    --c-888-rgb: 136, 136, 136;
    --c-ccc: #ccc;
    --c-ccc-rgb: 204, 204, 204;
    --f-f: 'Lato', 'Zen Kaku Gothic New', sans-serif;
    --f-w-bold: 700;
    --f-w-normal: 400;
    --f-lh-l: 2em;
    --f-lh-m: 1.7em;
    --f-lh-s: 1.4em;
    --f-ls: 0.04em;
    --f-s-h1: clamp(2.1rem, 3.6vw, 2.8rem);
    --f-s-h2: clamp(1.8rem, 3vw, 2.2rem);
    --f-s-h3: clamp(1.5rem, 2.4vw, 1.8rem);
    --f-s-h4: clamp(1.4rem, 1.8vw, 1.5rem);
    --f-s-h5: clamp(1.3rem, 1.2vw, 1.35rem);
    --f-s-h6: 1.2rem;
    --f-s-p: 1rem;
    --f-s-small: 0.85rem;
}
*, ::after, ::before {
	background: transparent;
	border: 0;
    box-sizing: border-box;
	margin: 0;
	outline: 0;
	padding: 0;
    transition-property: none;
    transition-duration: var(--a-duration);
    transition-timing-function: var(--a-easing);
	vertical-align: bottom;
}
html {
	color: var(--c-black);
	position: relative;
    word-break: break-all;
}
body {
	font-family: var(--f-f);
	font-weight: var(--f-w-normal);
    letter-spacing: var(--f-ls);
	line-height: var(--f-lh-l);
}
img {
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}
a {
    color: inherit;
	text-decoration: underline;
}
ol, ul {
    list-style-position: inside;
}
/*
ul li {
    margin-left: 1.6em;
    text-indent: -1.4em;
}
ol li {
    margin-left: 1.1em;
    text-indent: -1.1em;
}
*/
iframe {
	display: block;
	width: 100%;
}
/* ====================
font
==================== */
h1, h2, h3, h4, h5, h6 {
	font-weight: var(--f-w-bold);
	line-height: var(--f-lh-s);
    margin: 0;
}
h1 {font-size: var(--f-s-h1);}
h2 {font-size: var(--f-s-h2);}
h3 {font-size: var(--f-s-h3);}
h4 {font-size: var(--f-s-h4);}
h5 {font-size: var(--f-s-h5);}
h6 {font-size: var(--f-s-h6);}
strong {font-size: var(--f-w-bold);}
small {font-size: smaller;}
/* ====================
breakpoint, split, margin
==================== */
:root {
    --content-w: 1200px;
    --content-maxw: 84%;
    --n-5: 5px;
    --n-10: 10px;
    --n-15: clamp(10px, 1.66vw, 15px);
    --n-30: clamp(20px, 3.33vw, 30px);
    --n-45: clamp(30px, 5vw, 45px);
    --n-60: clamp(40px, 6.66vw, 60px);
    --n-90: clamp(60px, 10vw, 90px);
    --n-120: clamp(80px, 13.33vw, 120px);
}
.page main > * {
    border-bottom: 1px solid var(--c-ccc);
    padding: var(--n-120) 0;
}
main > * > *,
.w-content {
    margin-left: auto;
	margin-right: auto;
	width: min(var(--content-w), var(--content-maxw));
}
.w-full {
	width: 100%;
}
.w-l {
	--content-w: 1680px;
}
.w-m {
	--content-w: 1200px;
}
.w-s {
	--content-w: 720px;
}
main > * > *:not(:first-child) {
    margin-top: var(--n-30);
}
.split {
    --item: 1;
    display: grid;
    column-gap: calc((7 - var(--item))*2%);
    grid-template-columns: repeat(var(--item), 1fr);
    margin-top: 0;
}
.split.no_gap {column-gap: 0;}
.split > * {margin-top: var(--n-30);}
.split.no_gap > * {margin-top: 0;}
.split.four, .split.five, .split.six {--item: 2;}
@media screen and (min-width: 540px) {
    .split.two, .split.three {--item: 2;}
    .split.five, .split.six {--item: 3;}
}
@media screen and (min-width: 768px)  {
    .split.three {--item: 3;}
}
@media screen and (min-width: 1024px)  {
    .split.four {--item: 4;}
}
@media screen and (min-width: 1366px) {
    .split.five {--item: 5;}
    .split.six {--item: 6;}
}
/* ====================
body
====================*/
body {
    background: url(../img2022/back_paper.jpg) repeat top center /1080px;
}
/* ==================== 
header, nav, button
==================== */
/*header*/
header {
    padding: var(--n-30) var(--n-45);
}
header > div {
    display: flex;
    justify-content: space-between;
}
@media screen and (min-width: 1366px) {
header {
    padding: var(--n-45);
}
header > div {
    --content-maxw: 100%;
    --content-w: 100%;
} 
}
/*within hamburger menu*/
.nav-float {
    background: url(../img2022/back_paper.jpg) repeat top center /1080px;
    height: 100%;
    opacity: 0;
    position: fixed;
    transition-property: opacity, z-index;
    width: 100%;
    z-index: -1;
}
.nav-float::after {
    background-image: linear-gradient(30deg, rgb(231 229 226) 0%, rgb(244 242 239) 30%, rgb(255, 255, 255) 60%);
    content: "";
    height: 100vh;
    left: 0;
    mix-blend-mode: multiply;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: -1;
}
.nav-float.is-open {
    opacity: 1;
    overflow-y: scroll;
    transition-property: opacity;
    z-index: 99;
}
.nav-float > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    padding: var(--n-30) 0 var(--n-60);
}
.nav-float > div > * {
    opacity: 0;
    transform: translateY(var(--n-15));
    transition-property: opacity, transform;
    transition-duration: calc(var(--a-duration)*2);
}
.nav-float.is-open > div > * {
    opacity: 1;
    transform: translateY(0);
}
@media screen and (min-width: 768px) {
    .nav-float {
        font-size: var(--f-s-h6);
    }
}
/*logo*/
.logo {
    align-items: center;
    display: flex;
    font-size: 0;
    line-height: 1;
}
.logo svg {
    --n-logo: clamp(180px, 24vw, 270px);
    height: calc(var(--n-logo)/7.826);
    width: var(--n-logo);
}
header .logo, .nav-float .logo {
    min-height: var(--n-90);
}
.nav-float .logo {
    margin-left: var(--n-45);
    transform: translateY(0);
}
@media screen and (min-width: 1366px) {
    header .logo, .nav-float .logo {
        min-height: auto;
    }
}
/*hamburger button*/
.btn-menu {
    align-items: center;
    background-color: var(--c-red);
    border-radius: 50%;
    color: var(--c-white);
    display: inline-flex;
    flex-direction: column;
    font-size: calc(var(--n-90)*0.17);
    height: var(--n-90);
    justify-content: center;
    position: fixed;
    right: var(--n-30);
    top: var(--n-30);
    transition-property: background-color;
    width: var(--n-90);
    z-index: 100;
}
.btn-menu:hover {
     background-color: var(--c-red-hover);
}
.btn-menu > * {
    transition-property: transform;
}
.btn-menu [class^="bar"] {
    background-color: currentColor;
    border-radius: calc(var(--n-90) / 40);
    height: calc(var(--n-90) / 20);
    margin-bottom: calc(var(--n-90) / 10);
    width: calc(var(--n-90) / 2);
}
.btn-menu .text {
    display: inline-block;
    line-height: 1;
    margin-bottom: calc(var(--n-90) / -15);
}
.btn-menu.is-open .bar-1 {
    transform: rotateZ(30deg) scaleX(1.1) translate(7%, 115%);
}
.btn-menu.is-open .bar-2 {
    transform: rotateZ(-30deg) scaleX(1.1) translate(7%, -115%);
}
.btn-menu.is-active .text {
    transform: translateY(calc(var(--n-90) / 30));
}
@media screen and (min-width: 768px) {
    .btn-menu {
        right: var(--n-45);
    }
}
@media screen and (min-width: 1366px) {
    .btn-menu {
        opacity: 0;
        top: 0;
        transition-property: background-color, opacity, top, z-index;
        z-index: -1;
    }
    .btn-menu.is-fixed,
    .btn-menu.is-open {
        opacity: 1;
        top: var(--n-45);
        z-index: 100;
    }
}
/*global navigation*/
.nav-global ul {
    font-weight: var(--f-w-bold);
    list-style: none;
}
.nav-global a {
    display: block;
    text-decoration: none;
}
.nav-float .nav-global {
    --content-w: 300px;
    margin-bottom: var(--n-45);
    margin-top: var(--n-45);
    text-align: center;
}
.nav-float .nav-global ul {
    margin-bottom: var(--n-30);
}
.nav-float .nav-global li {
    margin-top: var(--n-15);
}
.nav-float .nav-global li.btn-red {
    color: var(--c-white);
}
.nav-float .nav-global li.btn-red a {
    display: block;
}
header .nav-global ul {
    align-items: center;
    display: none;
}
header .nav-global li {
    margin-right: 1.5em;
}
header .nav-global li.btn-red {
    color: var(--c-white);
    margin-left: 1em;
    margin-right: 0;
}
header .nav-global a {
    transition-property: opacity;
}
footer .nav-global.nav-global.nav-global {
    font-size: var(--f-s-small);
    line-height: var(--f-lh-s);
    margin-top: var(--n-15);
}
footer .nav-global li {
    margin-top: var(--n-15);
}
footer .nav-global a {
    padding-left: 1em;
    position: relative;
    transition-property: padding-left;
}
footer .nav-global a:hover {
    padding-left: 1.5em;
}
footer .nav-global a::before {
    background-color: currentColor;
    content: "";
    display: inline-block;
    height: 2px;
    left: 0;
    position: absolute;
    top: 0.7em;
    width: 0.5em;
}
@media screen and (min-width: 1024px) {
    .nav-float .nav-global li {
        margin-top: var(--n-30);
    }
    .nav-float .nav-global li.btn-red {
        margin-top: var(--n-15);
    }
}
@media screen and (min-width: 1366px) {
    header .nav-global ul {
        display: flex;
    }
}
/*red button*/
.btn-red a {
    background-color: var(--c-red);
    border-radius: 100vw;
    display: inline-block;
    overflow: hidden;
    padding: 0.5em 1.5em;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 0;
}
.btn-red a::before {
    background-color: var(--c-red-hover);
    border-radius: 100vw;
    content: "";
    display: inline-block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition-property: transform, opacity;
    transform: translateX(-90%);
    width: 100%;
    z-index: 1;
}
.btn-red a:hover::before {
    opacity: 1;
    transform: translateX(0%);
}
.btn-red .text {
    position: relative;
    z-index: 1;
}
/*button for onlineshop following scroll*/
.btn-shopBanner {
    background-color: var(--c-red);
    bottom: 0;
    box-shadow: 0 0px 10px rgba(var(--c-black-rgb), 0.5);
    font-size: var(--f-s-h6);
    left: 0;
    padding: var(--n-30);
    position: fixed !important;
    text-align: center;
    text-decoration: none;
    transition-property: background-color;
    width: 100%;
    z-index: 98;
}
.btn-shopBanner:hover {
    background-color: var(--c-red-hover);
}
.btn-shopBanner img {
    width: min(240px, 84%);
}
@media screen and (min-width: 768px) {
    .btn-shopBanner {
        border-radius: 100vw;
        bottom: var(--n-30);
        box-shadow: none;
        left: var(--n-30);
        width: clamp(360px, 30vw, 420px);
    }
    .btn-shopBanner img {
        width: 75%;
    }
}
/*button for SNS*/
.btn-sns {
    color: currentColor;
    column-gap: var(--n-15);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    line-height: 1;
    width: fit-content;
}
.btn-sns a {
    background-color: var(--c-black);
    border-radius: 50%;
    padding: var(--n-30);
    transition-property: background-color;
}
.btn-sns a:hover {
    background-color: var(--c-black-hover);
}
.btn-sns svg {
    height: var(--n-30);
    width: var(--n-30);
}
.nav-float .btn-sns {
    color: var(--c-white);
}
.mainvisual .btn-sns {
    bottom: var(--n-15);
    display: none;
    position: absolute;
    right: var(--n-45);
    z-index: 1;
}
footer .btn-sns a,
footer .btn-sns a:hover {
    background-color: transparent;
    padding: 0;
}
@media screen and (min-width: 768px) {
    .btn-sns {
        column-gap: 20px;
    }
    .btn-sns a {
        padding: 25px;
    }
    .btn-sns svg {
        height: 20px;
        width: 20px;
    }
    .mainvisual .btn-sns {
        display: grid;
    }
}

/* ====================
footer
==================== */
footer {
	--content-w: 1680px;
    background-color: var(--c-white);
    padding:var(--n-90) 0 var(--n-120);
}
footer > .split > * {
    margin-bottom: var(--n-60);
}
footer > .split > * > *:not(:first-child) {
    margin-top: var(--n-30);
}
footer address {
    font-style: normal;
}
footer .copyright {
    font-size: var(--f-s-small);
    margin-bottom: var(--n-90);
    text-align: center;
}
@media screen and (min-width: 540px) {
    footer > .split.two {
        --item: 1;
    }
}
@media screen and (min-width: 768px) {
    footer {
        padding-bottom: var(--n-60) !important;
    }
    footer > .split.two {
        --item: 2;
    }
}
@media screen and (min-width: 1024px) {
    footer > .split.two {
        width: min(calc(var(--content-w)*0.8), calc(var(--content-maxw)*0.8));
    }
}
/* ====================
new line
==================== */
.ib {
    display: inline-block;
}
/* ====================
button: sideline
==================== */
.btn-sideLine {
    font-weight: var(--f-w-bold);
    text-align: center;
}
.btn-sideLine a {
    text-decoration: none;
}
.btn-sideLine a::before {
    background-color: currentColor;
    content: "";
    display: inline-block;
    height: 1px;
    margin-right: 1em;
    vertical-align: middle;
    width: 1em;
}
/* ====================
icon: arrow
==================== */
.icon-arrow {
    position: relative;
}
.icon-arrow::after {
    background-color: currentColor;
    content: "";
    display: inline-block;
    height: 1em;
    margin-left: 1em;
    -webkit-mask: url(../img2022/icon_arrow.svg) no-repeat center /contain;
    mask: url(../img2022/icon_arrow.svg) no-repeat center /contain;
    transform: translateY(0.1em);
    transition-property: margin-left, right;
    vertical-align: baseline;
    width: 0.4em;
    z-index: 1;
}
a:hover .icon-arrow::after,
.icon-arrow:hover::after {
    margin-left: 1.5em;
}
.nav-float .icon-arrow::after {
    position: absolute;
    transform: translateY(-50%);
    right: 1.5em;
    top: 50%;
}
.nav-float .icon-arrow:hover::after {
    right: 1em;
}
.btn-shopBanner.icon-arrow::after {
    margin-left: 1.5em;
}
.btn-shopBanner.icon-arrow:hover::after {
    margin-left: 2em;
}