@charset "utf-8";
@import url("root.css");
/*-----*RESET CSS*-----*/
*:where(:not(iframe, canvas, img, svg, video):not(svg *)){all: unset;display: revert;}
*,*::before,*::after{box-sizing: border-box;}
ol,ul{list-style: none;}
img{max-width: 100%;vertical-align: bottom;}
/*-----*RESET CSS*-----*/



a:hover {cursor: pointer;}

h2 {}
p,dt,dd,li,th,td,a,strong,h4,h5,h6,i,em,s,ins,del,sup,sub,tt,aside,article,header,footer,address,b,a,u{ font-size:18px; }
strong {font-weight: bold;}
span,small { font-size:calc(16px * 0.8); }

p {line-height: 2;}

body {
color: var(--base-color02);
background: var(--base-color03);
font-family: 'Noto Serif JP', 'Noto Serif', serif;
font-weight: 400;
font-size: 18px;
}



@media screen and (max-width: 599px) {
h2 {}
p,dt,dd,li,th,td,a,strong,h4,h5,h6,i,em,s,ins,del,sup,sub,tt,aside,article,header,footer,address,b,a,u{ font-size:16px;line-height: 1.8; }
strong {font-weight: bold;}
span,small { font-size:calc(14px * 0.8); }


body {min-width:100%;}
}

/***************************************
--------- スマホ表示順　-----------
***************************************/
@media screen and (max-width: 599px) {
.order_01 {  order: 1;}
.order_02 {  order: 2;}
.order_03 {  order: 3;}
.order_04 {  order: 4;}
.order_05 {  order: 5;}
.order_06 {  order: 6;}
.order_07 {  order: 7;}
.order_08 {  order: 8;}
}

/***************************************
---------------- 共通 ----------------
***************************************/
.box{
width: min(94%, 1200px);
}
.row{
display: flex;
flex-wrap: wrap;
}
.col{width: 50%;text-align: left;}
.col_03{
width: calc((100% - 60px) / 3);
margin-right: 30px;
}
.col_03:nth-child(3n) {
margin-right: 0;
}
.col_04{
width: calc((100% - 120px) / 4);
margin-right: 40px;
margin-bottom: 30px;
}
.col_04:nth-child(4n) {
margin-right: 0;
}


.col_05{
width: calc((100% - 100px) / 5);
margin-right: 25px;
margin-bottom: 30px;
}
.col_05:nth-child(5n) {
margin-right: 0;
}

.col_txt{
width:51%;
margin-right: 4%;
}
.col_img {
width:45%;
text-align: center;
}


@media screen and (min-width: 600px) and (max-width: 1024px) {
.box{
width:90%;
}
.col{width: 50%;text-align: left;}
.col_03{
width: calc((100% - 30px) / 2);
margin-right: 30px;
}
.col_03:nth-child(3n) {
margin-right: 30px;
}
.col_03:nth-child(2n) {
margin-right: 0;
}

.col_04{
width: 48%;
margin:0 4% 4% 0;
}
.col_04:nth-child(2n){margin: 0 0 4% 0;}
.col_04:nth-child(4n){margin: 0 0 4% 0;}



.col_05{
width: calc((100% - 50px) / 3);
margin-right: 25px;
margin-bottom: 30px;
}
.col_05:nth-child(5n) {
margin-right: 25px;
}
.col_05:nth-child(3n) {
margin-right: 0;
}

.col_txt{
width:100%;
margin-right: 0;
margin: 0 auto 20px;
}
.col_img {
width:100%;
text-align: center;
}

}
@media screen and (max-width: 599px) {
.box{
margin: 0 auto;
width:90%;
padding:40px 0;
}

.txt_box{
margin: 0 auto;
width:100%;
padding:40px 0;
}

.row{
display: flex;
flex-wrap: wrap;
justify-content:flex-start;
}

.col{
width: 100%;
margin:0;
}
.col:nth-child(2n){margin: 0;}


.col_03{
width: 48%;
margin:0 4% 5px 0;
}

.col_03:nth-child(3n){margin:0 4% 5px 0;}
.col_03:nth-child(2n){margin:0 0 5px 0;}

.col_04{
width: 48%;
margin:0 4% 4% 0;
}
.col_04:nth-child(2n){margin: 0 0 4% 0;}
.col_04:nth-child(4n){margin: 0 0 4% 0;}


.col_05{
width: calc((100% - 20px) / 2);
margin-right: 15px;
margin-bottom: 15px;
}

.col_05:nth-child(5n) {margin-right: 15px;}
.col_05:nth-child(2n) {margin-right: 0;}

.col_txt{
width:100%;
margin-right: 0;
margin: 0 auto 20px;
}
.col_img {
width:100%;
text-align: center;
}

}


/***************************************
------------- 背景ボックス -------------
***************************************/

.box_b{
margin: 100px auto 0;
background: url("../img/bg.png")top center repeat;
background-position: center 100px;
background-size:100%;
padding:90px 0 110px 0;
}


.box_b_left {
position: relative;
}

.box_b_left::before {
content: "";
position: absolute;
top: -125px;
left: 0;
width: 100%;
height: auto;
background: url("../img/bg_left.png") no-repeat left top;
pointer-events: none;
width: 175px;
height: 268px;
}

.box_b_right {
position: relative;
}

.box_b_right::before {
content: "";
position: absolute;
top: -190px;
right: 0;
width: 100%;
height: auto;
background: url("../img/bg_right.png") no-repeat right top;
pointer-events: none;
width: 400px;
height: 444px;

}

.box_c{
width: 100%;
background: var(--base-color_bg_b);
padding:4%;
border-radius: 4px;
margin: 30px auto 0;
}
.box_c li{
position: relative;
padding-left: 30px;
}
.box_c ul li::before {
position: absolute;
display: inline-block;
content: "■";
color: var(--base-color04);
left: 0;
}

@media screen and (max-width: 1024px) {
.box_b{
margin: 50px auto 0;
background: url("../img/bg.png")top center repeat;
background-position: center 100px;
background-size:100%;
padding:0 0 30px 0;
}


.box_b_left {
position: relative;
}

.box_b_left::before {
content: "";
position: absolute;
top: -50px;
left: 0;

background: url("../img/bg_left_sp.png") no-repeat left top;
pointer-events: none;
background-size: 100%;
width: 100%;
height:100%;
}

.box_b_right {
background: url() no-repeat left top;
padding: 30px 0 0 0;
}

.box_b_right::before {
background: url() no-repeat left top;
}


.box_c{
margin: 20px auto 0;
}



}

/***************************************
---------------- リンク共通 ----------------
***************************************/
.link_a a{
width:min(35%,420px);
border-radius:12px;
color: var(--base-color03);
background: var(--base-color01);
display:flex;
align-items: center;
justify-content:center;
padding: 10px 0;
font-weight:600;
font-size: 24px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
transition: 0.3s ease;
position: relative;
margin: 50px auto 0;
}


.link_a a::after {
position: absolute;
content: "▶";
font-size: 16px;
right:20px;
}

.link_a a:hover {opacity: 0.8;}

@media screen and (min-width: 600px) and (max-width: 1024px) {
.link_a a{width:80%;font-size: 20px;}
}

@media screen and (max-width: 599px) {
.link_a a{
width:90%;
padding: 5px 0;
font-weight:600;
font-size: 20px;
margin: 15px auto 0;
}

.link_a::after {
font-size: 14px;
}





}
/***************************************
---------------- h3/h4 ----------------
***************************************/
h3{font-size: 42px;font-weight: 900;}
h4{font-size: 36px;}


.title_a {
text-align: center;
position: relative;
display:block;
margin: 0 auto 20px;
width: 100%;
}

.title_a h3 {
color: var(--base-title_01);
font-weight:900;
display: inline-block;
position: relative;
padding-bottom: 10px;
}


.title_a h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px; /* 全体の幅 */
height: 4px; /* 線の太さ */
background: linear-gradient(to right,
var(--base-title_02) 0%,
var(--base-title_02) 50%,
var(--base-title_01) 50%,
var(--base-title_01) 100% 
);
}

.title_b h3 {
font-size: 24px;
font-weight: 600;
border-bottom: 2px solid var(--base-color04);
color: var(--base-color04);
margin: 0 auto 15px;
}

.contents-main h3{
font-size: 30px;
font-weight: 600;
border-radius: 4px;
background-color: var(--base-color04);
color: var(--base-color03);
margin: 0 auto 15px;
text-align: center;
padding: 5px 0;
}

.contents-main h4{
font-size: 24px;
font-weight: 600;
border-bottom: 2px solid var(--base-color_bg_a);
color: var(--base-color_bg_a);
margin: 30px auto 15px;
padding: 0 0 8px 0;
}




@media screen and (max-width: 599px) {
h3{font-size: 26px;font-weight: 900;}
h4{font-size: 20px;}


.title_a {
margin: 0 auto 10px;
}

.title_a h3 {}


.title_a h3::after {
width: 60px;
height: 2px;

}

.title_b h3 {
font-size: 24px;
font-weight: 600;
border-bottom: 3px solid var(--base-color04);
color: var(--base-color04);
margin: 0 auto 20px;
text-align: center;
padding: 0 0 10px 0;
line-height: 1.6;
}

.contents-main h3{
font-size: 24px;
font-weight: 600;
border-radius: 4px;
background-color: var(--base-color04);
color: var(--base-color03);
margin: 0 auto 15px;
text-align: center;
padding: 5px 0;
}

.contents-main h4{
font-size: 20px;
font-weight: 600;
border-bottom: 2px solid var(--base-color_bg_a);
color: var(--base-color_bg_a);
margin: 30px auto 15px;
padding: 0 0 8px 0;
}


}

/***************************************
---------------- HEADER ----------------
***************************************/
header {
width: 100%;
padding:0;
background: var(--base-color_bg_b);
display: block;
margin: 0 auto;
box-sizing: border-box;
}

header .header_wrap {
width: min(94%, 1200px);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height: 100%;
box-sizing: border-box;
}

header .header_wrap h1 {
width: 20%;
min-width: 170px;
display: flex;
flex-wrap: nowrap;
align-items: center;
margin:0;
padding: 20px 0;
}



.header_right_lang {
margin-left: auto;
position: relative;
}

.header_right_lang p {
display: block;
width: 100%;
font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
font-size: 16px;
padding: 0 0 3px 0;
}

.header_right_lang select {
background-color: var(--base-color03);
color:var(--base-color02);
border: 1px solid var(--base-color02); 
padding: 4px 32px 4px 8px;
font-size: 14px;
font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;

}

.header_right_lang ::after {
content: '▼';
font-size: 12px;
color:var(--base-color02);
position: absolute;
right: 8px;
bottom: 35%;
transform: translateY(70%);
pointer-events: none;
}

.header_right_lang option {
font-size: 14px;
font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
}

.header_right_tel {
width:30%;
min-width: 360px;
padding: 0 30px;
box-sizing: border-box;
font-size: 36px;
font-weight: 900;
font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
line-height: 1;
}
.header_right_tel img{
 vertical-align: middle;
margin: -2px 0 0 0;
}
.header_right_tel p{
background-color: var(--base-color_bg_a);
color:var(--base-color03);
text-align: center;
font-size: 14px;
border-radius: 4px;
margin: 5px 0 0 0;
line-height: 1.6;
font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
}
.header_right_tel span{font-size: 10px;font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;}

.header_right_btm {width:14%;}

.header_menu {
display: flex;
flex-wrap: nowrap;
justify-content:space-between;
align-items: center;
width:100%;
padding:0;
}

.page_link {
display: flex;
justify-content:space-between;
align-items: stretch;
list-style: none;
padding: 5px 0 10px 0;
margin: 0;
width: 100%;
}

.page_link li {
padding:0;
flex: 1 1 auto;
border-right:2px solid #ecdebf;
}
.page_link li:first-child {
border-left:2px solid #ecdebf;
}



.page_link li a {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
position: relative;
padding:0 5px;
text-decoration: none;
text-align: center;
font-weight: 400;
font-style: normal;
color: var(--base-color02);
line-height: 1.2;
margin:0 auto 0;
transition: color .25s ease;
font-size: 16px;
padding: 10px 0;

}

.page_link li a:hover{color: var(--footer-color);}

.submenu {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
position: absolute;
background-color: #ecdebf;
list-style: none;
padding:0 0;
z-index:999999;
margin:0;
}


.has-submenu:hover .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);

}

.has-submenu i {padding: 0 0 0 5px;}


.submenu li a{
border-bottom: 1px solid var(--base-color03);
text-align: left;
width:175px;
padding: 10px 0;
margin:0;
box-sizing: border-box;
font-weight: 400;
}

.submenu li a:hover{
color:  var(--base-color02);
}

.has-submenu {position: relative;}




#menu-btn-check,
.menu-btn,
.store_name {
display: none;
}


@media screen and (max-width:1024px) {
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
z-index: 999;
display: flex;
align-items: center;
padding: 0 10px;
background: var(--base-color03);
box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

header .header_wrap {
min-width:100%;
max-width:100%;
}

header .header_wrap h1 {
width: min(60%, 160px);
padding: 0;
}


header .header_right_tel {display: none;}
header .header_right_lang{display: none;}
header .header_right_btm{display: none;}

.menu-btn {
position: fixed;
top:0;
right:0;
display: flex;
height:60px;
width: 60px;
justify-content: center;
align-items: center;
z-index: 90;
color: var(--base-color03);
background: var(--base-color04);
}
.menu-btn span.bar,
.menu-btn span.bar:before,
.menu-btn span.bar:after {
content: "";
display: block;
height: 3px;
width:40px;
background-color: var(--base-color03);
position: absolute;
}
.menu-btn span {
position: absolute;
bottom: 5px;
font-size: 12px;
color: var(--base-color03);
}
.menu-btn span.bar:before {top: -10px;}
.menu-btn span.bar {top:30px;}
.menu-btn span.bar:after {top: 10px;}


#menu-btn-check:checked ~ .menu-btn span.bar {background-color: transparent; /* または opacity: 0; */}
#menu-btn-check:checked ~ .menu-btn span.bar::before {
top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
width:21px;
}
#menu-btn-check:checked ~ .menu-btn span.bar::after {
top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
width:21px;
}
.navigation {
width: 100%;
height: calc(100vh - 60px);
position: fixed;
top:60px;
left: 100%;
z-index:99999;
background-color: var(--base-color_bg_b);
transition: all 0.5s;/*アニメーション設定*/
overflow-y:auto;
-webkit-overflow-scrolling: touch;

}

.page_link{display: none;}

.navigation #page_link {
width: 100%;
padding:20px 0;
background-color: var(--base-color_bg_b);
height: auto;
min-height: auto;
}

.navigation #page_link::after {
    content: "";
    display: block;
    height: 160px; /* ← これが正しい余白のつけ方 */
}

.navigation ul li {
width: 80%;
margin: 0 auto;
border-bottom: dotted 1px var(--base-title_01);
list-style: none;
color:var(--base-color02);
}
.navigation ul > li a,
.navigation ul > li span {
display: block;
width: 100%;
height: auto;

box-sizing: border-box;
color:var(--base-color02);
text-decoration: none;
padding: 12px 10px 12px 10px;
position: relative;
line-height: 1.2;
box-sizing: border-box;
}

.navigation ul > li span {
font-size:14px;
line-height: 1.2;
padding: 0;
}

#page_link .txt_big a{
font-size: 20px;
font-weight: 600;
padding: 5px 0;
}

.navigation ul li:before,
.navigation ul# li:last-of-type:after {
content: none;
}
.navigation ul li a:hover,
.navigation ul li span:hover {
background: none;
color: inherit;
}
#menu-btn-check:checked ~ .navigation {
left: 0;
background: var(--base-gd);
}



.sp_tel{
width: 90%;
margin: 20px auto;
padding: 0 30px;
box-sizing: border-box;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

}

.sp_tel a{
font-size: 36px;
font-weight: 900;
font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
line-height: 1;
}



.sp_tel p {
background-color: var(--base-color_bg_a);
color: var(--base-color03);
text-align: center;
font-size: 14px;
border-radius: 4px;
margin: 10px 0 0 0;
line-height: 1.6;
font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
padding: 3px 10px;
display: block;
width: 100%;
}

.sp_tel_btm{
width: 90%;
margin: 20px auto;
padding: 0 30px;
box-sizing: border-box;
text-align: center;
}

.sp_lang {
  margin: 20px auto;
  width: 80%;
}

/* ラッパーに相対配置 */
.select_wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* select 本体 */
.select_wrap select {
  appearance: none;         /* デフォルト矢印を消す */
  -webkit-appearance: none;
  width: 100%;
  background-color: var(--base-color03);
  color: var(--base-color02);
  border: 1px solid var(--base-color02); 
  padding: 4px 32px 4px 8px;
  font-size: 14px;
  font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
  box-sizing: border-box;
}

/* ▼を疑似要素で表示 */
.select_wrap::after {
  content: '▼';
  font-size: 12px;
  color: var(--base-color02);
  position: absolute;
  right: 10px;
  top: 72%;
  transform: translateY(-50%);
  pointer-events: none;
}
.sp_lang option {
  font-size: 14px;
  font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
}
}

/***************************************
---------------- LAYOUT ----------------
***************************************/
.box {
width: min(94%, 1200px);
margin: 0 auto 0;
padding:0 0;
}

.container {
width: min(94%, 1200px);
margin: 50px auto 0;
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
padding: 0;
}

.contents-main{
width: 74%;
}

.contents-side{
width: 22%;
margin-right: 4%;
}

#side_bar ul{
background: var(--base-color_bg_b);
padding:2% 4% 4% 4%;
}

#side_bar li{
border-bottom: 1px dotted var(--base-color02);
margin: 5px auto;
padding:3% 0;
}
#side_bar li a{
font-size: 16px;
}

.table_a dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: stretch;
border-top: 1px solid var(--base-color02);
border-right: 1px solid var(--base-color02);
}

.table_a dt{
width: 35%;
border-bottom: 1px solid var(--base-color02);
border-left: 1px solid var(--base-color02);
padding:2% 4%;
font-weight: 600;
background-color: var(--base-color_bg_b);
}

.table_a dd{
width: 65%;
border-bottom: 1px solid var(--base-color02);
border-left: 1px solid var(--base-color02);
padding:2% 4%;
}


#side_bar li img{
width: 25%;
background:var(--base-color03);
padding: 5px;
border:1px solid var(--base-color02);
vertical-align: middle;
margin: -2px 10px 0 0;
}

#side_bar .img_bottom{
margin: 0 0 10px 0;
border:1px solid var(--base-color_bg_a);
}

#side_bar h4{
margin:0 auto 0;
background-color: var(--base-color_bg_a);
color: var(--base-color03);
text-align: center;
font-size: 20px;
padding:5px;
}


@media screen and (max-width:1024px){
.container {
width:90%;
margin: 30px auto 0;
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
padding: 0;
}

.contents-main{
width:100%;
}

.contents-side{
width:100%;
margin-right: 0;
margin-top: 50px;
}

#side_bar ul{
background: var(--base-color_bg_b);
padding:2% 2% 2% 2%;
display: flex;
justify-content:flex-start;
flex-wrap: wrap;

}

#side_bar li{
border-bottom: 1px dotted var(--base-color02);
margin: 0 2% 0 0;
padding:3% 0;
width: 32%;
}

#side_bar li:nth-child(3n){
margin:0;
}


#side_bar li a{
font-size: 14px;
}


#side_bar li img{
width: 25%;
background:var(--base-color03);
padding: 5px;
border:1px solid var(--base-color02);
vertical-align: middle;
margin: -2px 10px 0 0;
}

#side_bar .img_bottom{
margin: 0 0 20px 0;
border:1px solid var(--base-color_bg_a);
}

#side_bar h4{
margin:0 auto 0;
background-color: var(--base-color_bg_a);
color: var(--base-color03);
text-align: center;
font-size: 20px;
padding:5px;
}

.table_a dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: stretch;
border-top: 1px solid var(--base-color02);
border-right: 1px solid var(--base-color02);
font-size: 14px;
}

.table_a dt{
width: 35%;
border-bottom: 1px solid var(--base-color02);
border-left: 1px solid var(--base-color02);
padding:2% 2%;
font-weight: 600;
background-color: var(--base-color_bg_b);
}

.table_a dd{
width: 65%;
border-bottom: 1px solid var(--base-color02);
border-left: 1px solid var(--base-color02);
padding:2% 4%;
}


#side_bar .btm_box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#side_bar .btm_box_col{
width: 48%;
margin: 0 2% 0 0;
}
#side_bar .btm_box_col:nth-child(2){
margin: 0 0 0 0;
}
#side_bar .btm_box_col img{
width: 100%;
}

}


@media screen and (max-width:600px){
#side_bar li{
margin: 0 2% 0 0;
padding:3% 0;
width:48%;
}

#side_bar li:nth-child(2n){
margin:0;
}
#side_bar li:nth-child(3n){
margin: 0 2% 0 0;
}

#side_bar .btm_box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#side_bar .btm_box_col{
width: 100%;
margin: 0 0 0 0;
}
#side_bar .btm_box_col:nth-child(2){
margin: 0 0 0 0;
}



}
@media screen and (min-width:599px){
.sp { display:none; }
}
@media screen and (max-width:600px){
.pc { display:none; }
.sp { display:block; }

}

@media screen and (min-width: 1025px) {
  .sp-tb { display: none; }
  .pc { display: block; }
}

/***************************************
------ セカンダリタイトル ----------------
***************************************/


#pagetitle {
width: 100%;
height: 250px;
padding: 0;
background: url("../img/sec_title.jpg")top center no-repeat var(--base-color_bg_b);
background-size: cover;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid var(--base-color_bg_a);
border-top: 2px solid #ecdebf;
}


#pagetitle h2 {
width: 100%;
color: var(--base-title_01);
font-size: 30px;
font-weight: 600;
text-align: center;
line-height: 1;
padding:0;
margin: -20px auto;
}






@media screen and (max-width: 1024px) {
#pagetitle {
padding:0 0 0 0;
height: 150px;
margin: 60px auto 0;
background: url("../img/sec_title_sp.jpg")top center no-repeat var(--base-color_bg_b);
background-size:cover;
}


#pagetitle h2 {
width: 100%;
margin: 0;
font-size: 20px;
text-align:center;
line-height: 1;
padding:15px 20px;
}

#pagetitle h2 span{
font-size:16px;

}

#pagetitle_img {
position: relative;
width: 100%;
height: 40vh;
overflow: hidden;
}



#pagetitle_main{
padding:120px 0 40px 0;
height: auto;
min-width: 100%;
}

#pagetitle_main .box {
width:100%;
margin: 0 auto;
padding: 0;
}

#pagetitle_main h2 {
width: 80%;
margin: 0;
font-size: 20px;
text-align: left;
line-height: 1;
padding:15px 20px;
}

#pagetitle_main h2 span{
font-size:16px;

}

#pagetitle_main_img {
position: relative;
width: 100%;
height: 40vh;
overflow: hidden;
}

}

#sec_bg {

}

#pan {
margin: 0 auto;
padding:40px 0 0 0;
width: min(94%, 1200px);
font-size: 18px;

}


@media screen and (max-width:1024px){
#pan {
margin: 0 auto;
padding:20px 0 0 0;
width: 90%;
font-size: 14px;
}

#pan a{
font-size: 14px;
}

}


/***************************************
-------------- PAGENATION --------------
***************************************/

#pagination {
    width: min(100%,500px);
    margin: 0 auto 0;
}
#pagination ul {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
	margin: 40px auto 0;
}
#pagination li {
    width: 8%;
    line-height: 1.5;
}
#pagination li:not(:last-of-type) {
    margin-right: 2%;
}
#pagination li a {
    display: flex;
    font-size:16px;
    color: var(--base-color01);
    border: 1px solid var(--base-color01);
    width: 100%;
    height: 42px;
    align-items: center;
    justify-content: center;
}
#pagination li.active a {
    background: var(--base-color01);
    color: var(--base-color03);
}
@media screen and (max-width: 599px) {
#pagination {
    width:100%;
    margin: 0 auto 40px;
}
}
/***************************************
---------------- フッター用店舗 ----------------
***************************************/

#shop_f{
width: min(94%, 1200px);
margin: 0 auto 0;
padding: 100px 0 50px 0;
}

#shop_f .row{
margin: 50px auto 0;
align-items: stretch;
}


#shop_f .col{width:48%;margin: 0 4% 100px 0;}
#shop_f .col:nth-child(2){margin: 0 0 100px 0;}

#shop_f .col p{
border-radius:4px; 
background-color: var(--base-color04);
color: var(--base-color03);
text-align: center;
margin: 10px auto;
}


#shop_f dl{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin: 20px auto 20px;
}

#shop_f dt{
width: 35%;
padding: 0 20px 10px 0;
text-align: right;
box-sizing: border-box;
color: var(--base-title_01);
font-weight: 600;
}

#shop_f dd{
width: 65%;
padding: 0 0 10px 0;
box-sizing: border-box;
font-weight: 600;
}

#shop_f .inq_box{
display: flex;
justify-content: space-between;
}

#shop_f .mail{width: 48%;margin: 0 0 0 0;}
#shop_f .tel{width: 48%;margin: 0 4% 0 0;}


#shop_f .tel a{
width: 100%;
padding:0;
text-align: center;
font-weight: 600;
border-radius:4px; 
background-color: var(--base-color04);
color: var(--base-color03);
font-size: 26px;
display: block;
line-height: 60px;
transition: 0.3s ease;
}

#shop_f .tel img {
    vertical-align: middle;
    margin: -2px 5px 0 0;
}

#shop_f .mail a{
width: 100%;
padding:0;
text-align: center;
font-weight: 600;
border-radius:4px; 
background-color: var(--base-color01);
color: var(--base-color03);
font-size: 20px;
display: block;
line-height: 60px;
transition: 0.3s ease;
}

#shop_f .mail i{
font-size: 110%;
padding: 0 5px 0 0;
}

#shop_f a:hover{opacity: 0.8;}


#shop_f .map {
position: relative;
width: 100%;
height: 100%;
}

#shop_f .map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#shop_f .col_04{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0 0 30px 0;

}
#shop_f .col_04 img{border-radius: 4px 4px 00;}

#shop_f h4{
width: 90%;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-weight: 900;
border-bottom: 2px solid var(--base-color04);
padding: 10px 0;
}

#shop_f p{
width: 100%;
margin: 0 auto;
text-align: center;
font-weight: 900;
padding: 10px 0;
flex-grow: 1;

}

#shop_f .link_a a{
width: 80%;
font-size: 18px;
margin: 30px auto 0;
}
#shop_f .link_a a::after {
font-size: 12px;
right: 12px;
}


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

#shop_f{
width:90%;
margin: 0 auto 0;
padding: 50px 0 0 0;
}

#shop_f .row{
margin: 30px auto 0;
align-items: stretch;
}



#shop_f .col{width:100%;margin: 0 0 50px 0;order: 2;}
#shop_f .col:nth-child(2){margin: 0 0 0 0;order: 1;}

#shop_f .col p{
border-radius:4px; 
background-color: var(--base-color04);
color: var(--base-color03);
text-align: center;
margin: 10px auto;
}


#shop_f dl{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin: 10px auto 10px;
}

#shop_f dt{
width: 35%;
padding: 0 20px 10px 0;
text-align: right;
box-sizing: border-box;
color: var(--base-title_01);
font-weight: 600;
}

#shop_f dd{
width: 65%;
padding: 0 0 10px 0;
box-sizing: border-box;
font-weight: 600;
}

#shop_f .inq_box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

#shop_f .mail{width:100%;margin:10px auto 0;}
#shop_f .tel{width: 100%;margin:0 auto;}


#shop_f .tel a{
width: 100%;
padding:0;
text-align: center;
font-weight: 600;
border-radius:4px; 
background-color: var(--base-color04);
color: var(--base-color03);
font-size: 26px;
display: block;
line-height: 60px;
transition: 0.3s ease;
}

#shop_f .tel img {
vertical-align: middle;
margin: -2px 5px 0 0;
}

#shop_f .mail a{
width: 100%;
padding:0;
text-align: center;
font-weight: 600;
border-radius:4px; 
background-color: var(--base-color01);
color: var(--base-color03);
font-size: 20px;
display: block;
line-height: 60px;
transition: 0.3s ease;
}

#shop_f .mail i{
font-size: 110%;
padding: 0 5px 0 0;
}

#shop_f a:hover{opacity: 0.8;}

#shop_f .col_04{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0 0 15px 0;

}
#shop_f .col_04 img{border-radius: 4px 4px 00;}
#shop_f .col_04 p{margin: 0 auto;width: 90%;font-weight: 400;}
#shop_f h4{
font-size: 24px;
line-height: 1.4;
}

#shop_f p{
width: 100%;
margin: 0 auto;
text-align:left;
font-weight: 900;
padding: 10px 0;
flex-grow: 1;
}

#shop_f .link_a a{
width: 90%;
}

#shop_f .link_a a{font-size:14px;text-align: left;margin: 10px auto 0;}

#shop_f .link_a::after {

}



#shop_f .map {
position: relative;
width: 100%;
padding-top:50%;
height: 0;
margin: 30px auto 0;
}

#shop_f .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
}



/***************************************
---------------- FOOTER ----------------
***************************************/

footer {
padding:0 0;
width:100%;
margin: 0 auto;
}


footer .row{
margin: 0 auto;
}

footer .box_b {
padding: 60px 0 0 0;
}

footer a{
font-family: 'Noto Sans JP', sans-serif;
line-height: 1;
font-weight: 600;
}

footer ul{
width: 90%;
margin: 40px auto;
}
footer li{padding: 0 0 25px 0;}
footer .sec{padding: 0 0 25px 16px;}
footer .sec02{padding: 55px 0 25px 0;}
footer .sec03{padding: 0 0 25px 0;}
footer .sec a {font-weight: 400 !important;}
footer .sec02 a {font-weight: 400 !important;}
footer .sec03 a {font-weight: 400 !important;}

.copyright {
display: block;
padding:10px 0;
text-align: center;
color: var(--base-color03);
background: var(--footer-color);
font-size: 14px;
}


#page_top a {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 60px;
    color: var(--base-color03);
    text-align: center;
    background: var(--base-color02);
    width: 60px;
    height: 60px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%);
	z-index: 9999;
}
#page_top a::before {
    content: "";
    width: 1px;
    height: 1px;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--base-color03);
    border-left: 10px solid transparent; 
    margin-bottom: 5px;
}
#page_top a span {
    font-size:15px;
    font-weight: bold;
    line-height: 1.0;
}



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

footer {
padding:0 0;
width:100%;
margin: 0 auto;
}
footer .box{
padding: 0 0;
text-align: center;
}


footer .row{margin: 30px auto;}
footer .col_04{
width: 100%;
margin:0 auto 0;}
footer .col_04:nth-child(2n){
 margin:0 auto 0;}

footer .box_b {padding: 0 0 30px 0;}

footer a{
font-family: 'Noto Sans JP', sans-serif;
line-height: 1;
font-weight: 600;
font-size: 16px;
}

footer ul{
width: 80%;
margin: 0 auto;
}
footer li{padding: 0 0 10px 0;text-align:left;}
footer .sec{padding:0 0 10px 0;}
footer .sec02{padding:0 0 10px 0;}
footer .sec03{padding:0 0 10px 0;}
footer .sec a {font-weight: 600 !important;}
footer .sec02 a {font-weight: 600 !important;}
footer .sec03 a {font-weight: 600 !important;}

.copyright {
display: block;
padding:10px 0 70px 0;
text-align: center;
color: var(--base-color03);
background: var(--footer-color);
font-size: 14px;
}


#page_top a {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 60px;
    color: var(--base-color03);
    text-align: center;
    background: var(--base-color02);
    width: 60px;
    height: 60px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%);
	z-index: 9999;
}
#page_top a::before {
    content: "";
    width: 1px;
    height: 1px;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--base-color03);
    border-left: 10px solid transparent; 
    margin-bottom: 5px;
}
#page_top a span {
    font-size:15px;
    font-weight: bold;
    line-height: 1.0;
}






@media screen and (max-width: 599px) {
.fixed-banner {
display: flex;
justify-content:center;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
z-index: 2000;
}
.fixed-banner_tell {
width: 50%;
padding: 10px 0;
background-color: var(--base-color04);
color: var(--base-color03);
border-radius: 4px 4px 0 0;
display: flex;
justify-content:center;
}

.fixed-banner_tell img {
    vertical-align: middle;
    margin: -2px 5px 0 0;
}

.fixed-banner_mail {
display: flex;
justify-content: space-between;
width: 50%;
padding: 10px 0;
background-color: var(--base-color01);
color: var(--base-color03);
border-radius: 4px 4px 0 0;
display: flex;
justify-content:center;

}
.fixed-banner_mail a {font-size: 16px;}
.fixed-banner_mail i {padding:0 5px 0 0;}