@charset "utf-8";

*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; backface-visibility: hidden;}
html { margin: 0; padding: 0;}
body { font-family: "Shippori Mincho", serif; color: #000; font-size: 16px; line-height: 1.8; word-break: break-all; margin: 0; padding: 0; font-weight: 100; font-size: 16px;}
div,p,ul,ul li,dl,dt,dd { margin: 0; padding: 0; font-size: 104%; list-style: none; box-sizing: border-box;}
img,video,object { max-width: 100%; height: auto; border: none;}
img { image-rendering: -webkit-optimize-contrast; }
a { color: #000; text-decoration: none;}
a:visited { color: #000; transition: 0.3s;}
a:hover { transition: 0.3s;}
a:hover img { opacity: 0.8; transition: 0.3s;}
a[href^="tel:"] { text-decoration: none;  text-emphasis: none !important;}
a[href^="fax:"] { text-decoration: none; pointer-events: none;}

.padding-left { padding-left: 3.5em;}
@media only screen and (max-width:820px) {
    .padding-left { padding-left: 0.5em;}
}


/* common */
.alC { text-align: center;}
.alR { text-align: right;}
.tategaki { writing-mode: vertical-rl; text-orientation: upright; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -moz-writing-mode: vertical-rl; letter-spacing: 5px;}
.youtube { width: 100%; aspect-ratio: 16 / 9;}
.youtube iframe { width: 100%; height: 100%;}

.none { display: none !important;}
.lity-image img { max-width: 500px; width: 90%; margin: 0 auto;}
.large { font-size: 1.6em;}

.pc { display: inherit;}
.tb { display: none;}
.sm { display: none;}
@media only screen and (max-width:820px) { 
 .pc { display: none; }
 .tb { display: block; }
 .sm { display: none; }
}

@media only screen and (max-width:468px) {
 body { font-size: 15px; min-width: 375px; }
 .pc { display: none; }
 .tb { display: none; }
 .sm { display: block; }
}



/* =========================================================================================
Header
=========================================================================================*/
#header { width: 100%; background: #FFF;  padding: 20px 30px; margin: 0; z-index: 100; top: 0; position: relative;}
#header .inner {  position: relative; display: flex; align-items: center;  gap: 20px; max-width: 1400px; padding: 0; height: 100%; flex-direction: column; justify-content: center;}
#header .logo { width: 100%; max-width: 125px; margin: 0 !important;}
#header .logo img { display: block; width: 100%; z-index: 100;}
/*globalnavi*/
#header #g-navi-area {}
#header #g-navi-area ul { width: 100%; display: flex; flex-wrap: nowrap; align-items: center; justify-content: right; gap: 5rem;}
#header #g-navi-area ul li { font-size: 120%;}
#header #g-navi-area ul li a { color: #000000; display: block; padding: 10px 0; text-align: center;}
#header #g-navi-area ul li a:hover { text-decoration: none; opacity: 0.7; transition: 0.2s;}
#header #g-navi-area ul li a p { color: #8B8B99; font-size: 50%;}
#header .openbtn { display: none; /*PCでは非表示*/}

#header #g-navi-area ul li a {position: relative; color: #000000; display: block; padding: 10px 0; text-align: center; transition: color 0.2s ease;}

#header #g-navi-area ul li a::after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #000; transition: width 0.3s ease;}

#header #g-navi-area ul li a:hover::after {width: 100%;}

#header #g-navi-area ul li a:hover {color: #555555;}

#header #g-navi-area ul li a p {color: #8B8B99; font-size: 50%; margin: 0; transition: color 0.3s ease;}

#header #g-navi-area ul li a:hover p {color: #555555;}


@media only screen and (max-width:820px) { 

 #header .logo a img {}

 /* HAMBURGER MENU */ 
 #header .openbtn { display: inherit; position: fixed; z-index: 9999; text-indent: -9999px; top: 0; right: 0; cursor: pointer; width: 68px; height: 60px; background: #160E66 url(../images/common/menu_btn.svg) no-repeat center; background-size: 35px 35px !important; }
 #header .openbtn.active { background: #160E66 url(../images/common/menu_close.svg) no-repeat center; transform: 0.3s; }
 #header #g-navi-area { position: fixed; z-index: 99; top: 0; right: -120%; width: fit-content; height: inherit; background: #160E66; transition: all 0.5s; display: initial; float: none; border-radius: 0; padding: 30px 50px;}
 #header #g-navi-area.panelactive { /*アクティブクラスがついたら位置を0に*/ right: 0; }
 #header #g-navi-area a { color: #FFF !important; }
 #header #g-navi-area a:hover { text-decoration: none !important; opacity: 0.8 !important; transition: 0.3s !important; }
 #header #g-navi-area.panelactive #g-navi-list { /*ナビの数が増えた場合縦スクロール*/ z-index: 999; width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; }
 #header #g-navi-area ul { width: 100%; flex-direction: column; align-items: start; justify-content: left; position: relative; z-index: 999; padding: 0; margin: auto; margin-bottom: 3.0em; gap: 1rem; }
 #header #g-navi-area ul li { text-align: left; font-size: 1.25em; }
}



#header #g-navi-area ul li:nth-child(1) { background-color: #160E66; width: fit-content; padding: 0px 30px; position: absolute; top: -10px; right: -20px; text-align: center; line-height: 1.5; font-size: 22px; letter-spacing: 3px;}
#header #g-navi-area ul li:nth-child(1) a { color: #fff;}
#header #g-navi-area ul li:nth-child(1) p { font-size: 70%; color: #fff !important;}

@media only screen and (max-width:820px) { 
    #header #g-navi-area ul li:nth-child(1) { position: initial;}
}

/* =========================================================================================
Footer
=========================================================================================*/
#footer {background: url(../images/common/fotter.png) no-repeat; color: #000; background-size: 550px;  display: flex; justify-content: start;  flex-direction: column; background-position: right;  position: relative; }




#footer a { }
#footer .inner { display: flex; justify-content: space-between; gap: 30px; padding-block: 0px; width: 90%; flex-wrap: wrap; max-width: initial;}
#footer .address { text-shadow: 1px 1px 1px rgb(255, 255, 255); padding-bottom: 20px;}
#footer .address .logo img { max-width: 100px; margin-bottom: 20px;}
#footer .address .company { font-size: 150%;}

#footer .copyright {  color: #fff; text-align: center; padding: 5px; width: 100%; font-size: 80%; background: #160E66; position: relative;}
/* footer-navi */
#footer .f-navi { display: flex; justify-content: right; flex-wrap: wrap; gap: 10px 30px;}
#footer .f-navi ul { display: flex; justify-content: right; gap: 20px;}
#footer .f-navi li { display: inline-table; list-style-type: none;}
#footer .f-navi li ul { display: inline-block; margin-left: 1.0em;}
#footer .f-navi li ul li { display: list-item; list-style-type: disc;}
@media only screen and (max-width:820px) { 
    #footer {background-position: 60px 210px;background-size: contain;}
    footer { height: 340px;}
    

}

@media only screen and (max-width:468px) { 

    #footer .inner { flex-wrap: wrap; align-items: center; justify-content: center; }
    #footer .f-navi { display: none; }
}





/* =========================================================================================
Page Top
=========================================================================================*/
#page-top { position: fixed; z-index: 9999; bottom: 1.5%; right: 1.5%;}
#page-top a { display: block; text-decoration: none; color: #FFF; width: 50px; height: 50px; border-radius: 50%; line-height: 1.0; font-weight: bold; background: #000 url(../images/common/arrow_up.svg) no-repeat center; background-size: 1.5em; text-indent: -9999px;}
#page-top a:hover { opacity: 0.7;}
@media only screen and (max-width:820px) {}
@media only screen and (max-width:468px) {}


/* =========================================================================================
Layout
=========================================================================================*/
#wrapper { position: relative; margin: 0; padding: 0; overflow: hidden;}
#container { margin: 0; padding: 0px 0 100px 0;}
article { background: #FFF;}
section { padding-inline: 30px; }
section+section { margin-top: 100px; margin-bottom: 150px;}
.inner { max-width: 1200px; width: 100%; margin: 0 auto; position: relative; box-sizing: border-box;}

.hr p {  border-left: 2px solid #000; text-align: center; width: fit-content; margin: 0 auto; height: 100px;}

.header_img { padding-inline: 0px;}
.header_img .img { position: relative;}
.header_img .img img { filter: brightness(60%); aspect-ratio: auto; min-height: 150px; object-fit: cover; width: 100%; height: 15vw;}
.header_img .img p {  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); color: #fff; font-size: 200%;}

@media only screen and (max-width:820px) {
    section+section  { margin-top: 100px; margin-bottom: 100px;}
}

@media only screen and (max-width:468px) { 
 section { padding-left: 10px; padding-right: 10px; }
}


@media only screen and (max-width:468px) {}

/*midashi*/
h1 { font-size: 2.25em;}
h2 {font-size: clamp(2em, 4vw, 2.5em); line-height: normal; font-weight: 100;}

h6 { font-size: 1.0em;}
/*Hr*/
hr { width: 100%; max-width: 500px; height: 1px; border: none; background-color: #000; margin: 10vh auto;}
@media only screen and (max-width:820px) {
     hr { width: 50%; }
}

@media only screen and (max-width:468px) {}

/*decoration*/
strong { font-weight: bold;}
.red { color: #c80146; font-weight: bold;}
.marker { padding: 0 0.15em; display: inline; background: linear-gradient(transparent 65%, #FFF000 65%);}
.bg-gray { background-color: gainsboro;}

/* =========================================================================================
Home
=========================================================================================*/
/*MAIN SLIDER*/
.main-visual { position: relative;  }
.main-visual img { width: 100%;}
.main-visual .swiper-wrapper { width: 100%; height: 900px; }
.main-visual .swiper-slide {  font-size: 2.0em; color: #FFFF; background: #CCC; width: 100%; padding: 30px;}
.main-visual .swiper-slide .inner { height: 100%; display: flex;}
.main-visual .swiper-slide .inner .catch { font-size: 4.0rem; line-height: 1.3; letter-spacing: 0.1em;}
.main-visual .swiper-slide .inner .catch img { width: 80%; max-width: 350px; height: auto;}
.main-visual .swiper-slide .inner p { font-size: 1.25rem;}
/*slide1*/
.main-visual .swiper-slide.slide1 { background: url(../images/slider/02.jpg) no-repeat center; background-size: cover;}
.main-visual .swiper-slide.slide1 .inner { flex-direction: column; align-items: start; justify-content: center; gap: 50px;}
.main-visual .swiper-slide.slide1 .inner p { max-width: 600px;}
/*slide2*/
.main-visual .swiper-slide.slide2 { background: url(../images/slider/01.jpg) no-repeat center; background-size: cover; display: flex; align-items: center; justify-content: center;}
.main-visual .swiper-slide.slide2 .inner { color: #000; text-align: center; flex-direction: column; align-items: center; justify-content: center; gap: 50px; height: 80%; min-height: 500px; max-width: 600px; background: #FFF; padding: 50px; border-radius: 80px;}
/*slide3*/
.main-visual .swiper-slide.slide3 { background: url(../images/slider/08.jpg) no-repeat center; background-size: cover; display: flex; align-items: center; justify-content: center;}
.main-visual .swiper-slide.slide3 .inner { align-items: end; justify-content: end; gap: 50px; padding-bottom: 100px;}
.main-visual .swiper-slide.slide3 .inner .catch { width: 300px;}
.main-visual .swiper-slide.slide3 .inner p { width: calc(100% - 50px - 300px);}

@media only screen and (max-width:820px) { 
    .main-visual .swiper-slide .inner .catch { font-size: 3.0rem; }
 .main-visual .swiper-slide .inner .catch img { max-width: 200px; height: auto; }
 .main-visual .swiper-slide .inner p { font-size: 1.0rem; }
 /*slide1*/ .main-visual .swiper-slide.slide1 .inner p { max-width: 100%; }
 /*slide2*/ .main-visual .swiper-slide.slide2 .inner { padding: 30px; }
 /*slide3*/ .main-visual .swiper-slide.slide3 .inner { flex-direction: column; gap: 30px; padding-bottom: 50px; }
 .main-visual .swiper-slide.slide3 .inner .catch, .main-visual .swiper-slide.slide3 .inner p { width: 100%; }
}

@media only screen and (max-width:468px) { 
 .main-visual .swiper-slide.slide2 .inner { min-height: 400px; }
 .main-visual .swiper-wrapper { height: 300px;}
}



/* =========================================================================================
index.html
=========================================================================================*/

/* description sec */
.description { text-align: center; margin-top: 100px;     margin-bottom: 50px;}
.description .description_main { font-size: 200%;}
.description .description_sub {  padding-top: 3rem; display: flex; flex-direction: column; gap: 1rem;     line-height: 200%;}

/* memu sec */
.menu .inner.flex { display: flex; gap: 2rem; justify-content: center;}
.menu .inner .item:nth-child(1) {   background-image: url(../images/index/menu/page_age.jpg);} 
.menu .inner .item:nth-child(2) {   background-image: url(../images/index/menu/page_mushi.jpg);} 
.menu .inner .item:nth-child(3) {   background-image: url(../images/index/menu/page_yaki.jpg);} 
.menu .inner .item { width: 33%; max-width: 300px; height: 45vh; background-size: cover; display: flex; justify-content: center; font-size: 200%; position: relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.menu .inner .item::before { content: ''; position: absolute; height: 100px; width: 2px; background-color: black; left: calc(50% - 1px); top: 0%;}
.menu .inner .item p { padding-top: 150px; text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);}

.menu .inner .item {transition: transform 0.3s ease, box-shadow 0.3s ease;}
.menu .inner .item:hover {transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);}
.menu .inner .item::before {transition: height 0.3s ease, background-color 0.3s ease;}
.menu .inner .item:hover::before {height: 120px; background-color: #333;}
.menu .inner .item p {transition: color 0.3s ease, text-shadow 0.3s ease;}
.menu .inner .item:hover p {color: #222; text-shadow: 0px 0px 15px rgba(255, 255, 255, 1);}


/* bg_common */
.bg_common { background-size: cover; background-position: center; color: #fff; height: 350px;display: flex; align-items: center; margin-top: 50px; margin-bottom: 50px;}
.bg_common .inner { display: flex; flex-direction: column; gap: 2rem;}
.bg_common .text { font-size: 1.1rem; letter-spacing: 5px;}
.bg_common .button { width: 300px; position: relative; border-bottom: 1px solid #fff; letter-spacing: 3px; line-height: 50px; color: #fff;}
.bg_common .button span { position: absolute; right: 0px; font-size: 20px; font-weight: bold;}

/* bg sec */
.bg_01 {  background-image: url(../images/index/banner_01.webp);}
.bg_02 {  background-image: url(../images/index/banner_02.webp);}
.bg_02 .inner { text-align: right;}
.bg_02 .inner .button { margin-left: auto; text-align: left;}
.bg_03 {  background-image: url(../images/index/banner_04.webp);}

.bg_common .button { position: relative; display: inline-block; padding-bottom: 5px;  color: #fff; text-decoration: none; overflow: hidden;}
.bg_common .button::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #fff; transform: translateX(-100%); transition: transform 0.5s ease;}
.bg_common .button:hover::before { transform: translateX(0%);}
.bg_common .button span { transition: transform 0.3s ease;}
.bg_common .button:hover span { transform: translateX(5px);}



@media only screen and (max-width:820px) { 
    .description .description_main { font-size: 150%;}
}


/* =========================================================================================
obsession.html
=========================================================================================*/
.obsession.right .inner { flex-direction: row-reverse; line-height: 2;}
.obsession .inner { display: flex; gap: 2rem; justify-content: space-between;}
.obsession .tategaki { display: flex;  flex-direction: column; gap: 3rem; margin-top: 15px; justify-content: start; text-wrap: nowrap;}
.obsession .tategaki .title { font-size: 250%; position: relative; padding-top: 100px; width: fit-content; }
.obsession .tategaki .title::before { content: ''; display: block; position: absolute; top: 0; left: 50%; width: 2px; height: 65px; background-color: #000;}
.obsession .tategaki .text { font-size: 120%;  width: fit-content; margin: 0 auto;}
.obsession .tategaki .text span { padding-top: 5rem;}

.obsession .explain { display: flex; flex-direction: column; line-height: 2.5; max-width: 900px; gap: 5rem;}
.obsession .explain .img { display: flex; justify-content: center;  gap: 1rem; }
.obsession .explain .img img { width: 100%; max-height: 300px; object-fit: cover; min-width: 250px;}

/* image_sec */
.image_sec .inner {  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);}
.image_sec .inner img {  width: 100%; height: 100%; }


@media only screen and (max-width:820px) { 
    .obsession .tategaki { gap: 10px;}
    .obsession.right .inner .tategaki { gap: 10px;}
    .obsession .tategaki .text { font-size: 120%; }
    .obsession .explain .img { flex-wrap: wrap;}
    .obsession .explain .img img { width: 100%;}
}



@media only screen and (max-width:468px) { 
    .obsession .tategaki { gap: 3rem; flex-direction: row-reverse;}
    .obsession.right .inner .tategaki {  gap: 3rem;  flex-direction:initial;}
    .obsession .inner { gap: 10px;}
}

/* =========================================================================================
single_items.html
=========================================================================================*/
/* recommend */
.recommend.right .inner { flex-direction: row-reverse;}

.recommend .inner { display: flex; gap: 3rem;}
.recommend .inner .img { width: 50%; text-align: center;}
.recommend .inner .img img { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);}
.recommend .inner .ex { display: flex; width: 50%; flex-direction: column; gap: 2rem;}
.recommend .inner .ex .title { background-color: #160E66; color: #fff; width: fit-content; padding: 0rem 2rem; font-size: 150%;}
.recommend .inner .ex .name { font-size: 200%;}

/* tukasa */
.tukasa .inner { display: flex; gap: 3rem;}
.tukasa .inner .img { width: 40%;}
.tukasa .inner .ex { width: 60%; line-height: 2;}
.tukasa .inner .ex .title { font-size: 130%; margin-bottom: 1rem;}

/* item */
.item_sec .inner .title { text-align: center;}
.item_sec .inner .title .img {  background-color: #160E66; color: #fff; width: fit-content; padding: 0rem 2rem; font-size: 150%; margin: 0 auto;}
.item_sec .inner .title p { padding-top: 2rem;}

.item_sec .inner .title_02 {  display: flex; align-items: center; border-bottom: 1px solid #000; margin-bottom: 1rem; padding-bottom: 1rem;} 
.item_sec .inner .title_02 p:nth-child(1) { width: 20%; font-size: 120%; text-align: center;}
.item_sec .inner .title_02 p:nth-child(2) { font-size: 16px;}

.item_sec .inner .items { display: grid; grid-template-columns: repeat(3, 1fr);  grid-template-rows: repeat(2, 1fr); gap: 1%; margin-top: 50px;}
.item_sec .inner .item {padding: 3%; max-width: 500px; width: 100%; height: 100%;}
.item_sec .inner .item .title { padding: 1rem 0px;  font-size: 120%; text-align: center;}
.item_sec .inner .item .ex { font-size: 80%;}
.item_sec .inner .item img {  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3); }


@media only screen and (max-width:820px) { 
    .recommend .inner { flex-direction: column !important;  gap: 1rem;}
    .recommend .inner .img { width: 100%; max-width: unset;}
    .recommend .inner .img { width: 100%;}
    .recommend .inner .ex { width: 100%;  gap: 0.5rem;}
    .tukasa .inner { flex-direction: column;}
    .tukasa .inner .img { width: 100%; max-width: 450px;}
    .tukasa .inner .ex { width: 100%;}

    .item_sec .inner .title { text-align: left;}
    .item_sec .inner .items { grid-template-columns: repeat(2, 1fr);  grid-template-rows: repeat(3, 1fr); }
}

@media only screen and (max-width:468px) { 
    .recommend .inner .img {  max-width: initial;}
}

/* =========================================================================================
about_us.html
=========================================================================================*/
/* about */
.about .inner { display: flex;  gap: 1rem; justify-content: space-between;}
.about .inner .left { width: 70%;}
.about .inner .left .big { font-size: 140%; margin-bottom: 1rem;}
.about .inner .left .text { line-height: 2;} 

.about .inner .right { width: 30%; text-align: center; }
.about .inner .right img { max-width: 250px;}

.company .inner { max-width: 800px; margin: 0 auto; padding: 0rem;}
.company .inner table { width: 100%; border-collapse: collapse;}
.company .inner table th,
.company .inner table td { padding: 1rem; text-align: left;}
.company .inner table th { width: 30%; font-weight: bold; white-space: nowrap;}
.company .inner table td { width: 70%; font-weight: normal;}
.company .inner table tr { border-bottom: 1px solid #ddd;}
.company .inner table tr:last-child { border-bottom: none;}

/* access */
/* .access .inner .title { font-size: 120%; text-align: center;} */
/* .access .inner table { margin: 50px auto;} */
/* .access .inner table th { padding: 1rem 2rem 1rem 0rem; text-wrap: nowrap;} */

/* 横幅を指定するための要素 */
.map-wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding-top: 50px;}
/* Google Mapを囲う要素 */
.map { position: relative; width: 100%; height: 0; padding-top: 35%; max-width: 800px; margin: 0 auto;}
/* Google Mapのiframe */
.map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


@media only screen and (max-width:820px) {

    .about .inner { flex-wrap: wrap;}
    .about .inner .left { width: 100%;}
    .about .inner .right { width: 100%; }

    .access .inner {flex-wrap: wrap;}
    .access .inner .left { width: 100%;} 
    .map { padding-top: 65%;}

    .company .inner table tr { display: flex; flex-direction: column;}
    .company .inner table th { width: 100%;}
    .company .inner table td { width: 100%;}

 }