@charset "utf-8";
/* -----
css Information
File name；layout.css
Description；index.html, about/, e-store/, services/
First time；2026-01
Editors；bukuyan
Last Editor；
Update；
----- */

html {
scroll-padding-top: 375px;
}

body {
background: #f5f5f5;
color: #000;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'メイリオ', sans-serif;
font-size: 1.6rem;
letter-spacing: .1rem;
line-height: 1.8em;
margin: 0;
padding: 0;
word-wrap: break-word;
}

li,
ul {
list-style: none;
margin: 0;
padding: 0;
}

a {
color: #1c1c1c;
outline: none;
text-decoration: none;
}

img {
border: 0;
display: block;
height: auto;
max-width: 100%;
vertical-align: bottom;
}

*{
box-sizing: border-box;
}

.wrapper {
background: #fff;
margin: 0;
padding: 0;
width: 100%;
}

#main-area {
margin: 0;
padding: 48px 0;
width: 100%;
}

.openbtn {
background: #fff;
border: 1px solid #1c1c1c;
border-radius: 8px;
bottom: 32px;
cursor: pointer;
display: block;
display: none;
height: 56px;
position: fixed;
right: 16px;
width: 56px;
z-index: 999;
}

.openbtn span {
background: #1c1c1c;
border-radius: 4px;
display: inline-block;
height: 4px;
left: 12px;
position: absolute;
transition: all .4s;
width: 56%;
}

.openbtn span:nth-of-type(1) {
top: 12px;
}

.openbtn span:nth-of-type(2) {
top: 20px;
}

.openbtn span:nth-of-type(3) {
top: 28px;
}

.openbtn span:nth-of-type(3)::after {
color: #1c1c1c;
font-size: 1.2rem;
content: "Menu";
left: -4px;
position: absolute;
text-transform: uppercase;
top: 4px;
}

.openbtn.active span:nth-of-type(1) {
left: 18px;
top: 14px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}

.openbtn.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
left: 18px;
top: 26px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}

.openbtn.active span:nth-of-type(3)::after {
content: "Close";
left: 4px;
top: 4px;
transform: translateY(0) rotate(-45deg);
}

#g-nav.panelactive {
display: block;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}

.circle-bg {
background: #f90;
border-radius: 50%;
display: none;
height: 100px;
left: -18px;
position: fixed;
top: -18px;
transform: scale(0);
transition: all .6s;
width: 100px;
z-index: 3;
}

.circle-bg.circleactive {
transform: scale(50);
}

#g-nav {
margin-top: 80px;
z-index: 4;
}

#g-nav ul {
display: block;
height: 240px;
margin: 40px auto 0;
opacity: 0;
width: 90%;
}

#g-nav ul li {
border-bottom: 1px solid #000;
margin-top: 8px;
}

#g-nav ul li a {
background: #fff;
color: #000;
font-size: 2.0rem;
display: inline-block;
padding: 24px 24px;
width: 100%;
}

#g-nav-list {
height: 100vh;
position: fixed;
opacity: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
z-index: 99; 
}

#g-nav.panelactive #g-nav-list {
opacity: 1;
}

#g-nav.panelactive ul {
opacity: 1;
}

.breadcrumb-outer {
display: none;
}

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

@media screen and (min-width:1024px) {
.wrapper {
background: #fff;
}

.openbtn {
display: none;
}

.circle-bg {
display: none;
}

.logo {
position: fixed;
z-index: 999;
}

.logo img {
border-radius: 50%;
}

#g-nav {
margin-top: 0;
}

#g-nav-list {
background: linear-gradient(0deg, #ffb31a, rgba(255,255,255,.9), rgba(255,255,255,.9));
height: 176px;
margin: 0 -500%;
opacity: 1;
overflow: hidden;
padding: 0 500%;
position: absolute;
width: 100%;
}

#g-nav ul {
display: flex;
justify-content: flex-end;
margin: auto;
opacity: 1;
padding: 48px 2% 0 0;
position: fixed;
width: 100%;
max-width: 1600px;
}

#g-nav ul li {
border-bottom: 0;
margin: 0 8px;
}

#g-nav ul li a {
background: #fff;
border: 1px solid #1e90ff;
border-radius: 8px;
box-shadow: 0 1px 1px 0 rgba(30,144,255, .5);
color: #000;
font-size: 1.8rem;
letter-spacing: .2rem;
line-height: 2.5;
margin: 0 16px;
padding: 0 8px;
text-align: center;
transition: .5s;
}

#g-nav ul li a:hover {
border: 1px solid transparent;
box-shadow: 0 0 0 0 transparent;
color: #0000cd;
text-shadow: 1px 1px 0 rgba(47,79,79, .8);
}

#g-nav ul li.current a {
border: 1px solid #00bfff;
background: #feebcc;
box-shadow: 0 1px 2px rgba(0,255,255, .7), 0 0 16px rgba(245,245,245, .8) inset;
text-shadow: 1px 1px 0 rgba(47,79,79, .8);
}

#g-nav ul .dpc_dn {
 display: none;
}

.breadcrumb-outer {
display: block;
margin: 16px ;
}

.breadcrumb {
padding: 1.0rem 1.5rem;
}

.breadcrumb ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}

.breadcrumb li {
margin-right: 2.2rem;
position: relative;
}

.breadcrumb li::after {
border-color: transparent transparent transparent #aedfc6;
border-style: solid;
border-width: 14px 12px;
content: "";
height: 0;
left: 100%;
position: absolute;
top: 0;
width: 0;
}

.breadcrumb li:last-child::after {
display: none;
}

.breadcrumb li a {
background: #f5fffa;
border: 1px solid;
border-color: #00bfff transparent #00bfff #00bfff;
display: inline-block;
height: 28px;
line-height: 28px;
padding: 0 4px 0 8px;
}

.breadcrumb li a:hover {
background: #00c4ff;
}

.breadcrumb li:hover::after {
border-color: transparent transparent transparent #00c4ff;
border-style: solid;
border-width: 14px 12px;
content: "";
height: 0;
left: 100%;
position: absolute;
top: 0;
width: 0;
}

.breadcrumb li span {
background: #feebcc;
border-radius: 20px;
display: inline-block;
height: 28px;
line-height: 28px;
padding: 0 8px;
text-shadow: 1px 1px 0 rgba(47,79,79, .6);
}
}