@charset "UTF-8";

/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
float: none;
width:100%;
text-align: left;
overflow: hidden
}

/*スライド
---------------------------------------------------------------------------*/
.rslides {
width: 100%;
margin: 0 auto;
display: flex;
position: relative;
overflow: hidden;
}
.rslides li img,
#metaslider_15 img {
width: 100%;
height: 400px;
object-fit: cover;
object-position: center;
}
@media screen and (min-width: 768px) {
.rslides li img,
#metaslider_15 img {
width: 100%;
height:auto;
object-fit: cover;
}}
@media screen and (min-width: 1440px) {
.rslides li img,
#metaslider_15 img {
width: 100% !important;
height: 810px;
}
}
@media screen and (min-width: 1778px) {
.rslides li img,
#metaslider_15 img {
height: 1000px;
}
}

/* テキストSVGの位置調整 */
.rslides .text-svg {
width: 100%;
height: auto;
display: block;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
}
@media screen and (max-width: 767px) {
.pcsvg { display: none !important; }
.scrolldown1 { display: none; }
}
@media screen and (min-width: 768px) {
.spsvg { display: none !important; }
}


/*スクロールダウン
---------------------------------------------------------------------------*/
.scrolldown1 {
position: absolute;
left: 50%;
bottom: 10px;
height: 50px;
transform: translateX(-50%);
z-index: 100
}

.scrolldown1 span {
position: absolute;
left: -15px;
top: -15px;
color: #eee;
font-size: 0.7rem;
letter-spacing: 0.05em;
}

.scrolldown1::after {
content: "";
position: absolute;
top: 0;
width: 1px;
height: 30px;
background: #eee;
animation: pathmove 1.4s ease-in-out infinite;
opacity: 0;
}

@keyframes pathmove {
0% {
height: 0;
top: 0;
opacity: 0;
}
30% {
height: 30px;
opacity: 1;
}
100% {
height: 0;
top: 50px;
opacity: 0;
}
}


/* message
/* ------------------------------------- */
.message,
.imgsvg {
position: relative
}
.message section{
display: block;
max-width: 100%;
padding: 30px 0 0 0;
margin: auto;
}
.message_i{
width: 100%;
}
.message_i img{
width: 100%;
height: auto
}
.message_t {
width: 100%;
box-sizing: border-box;
padding: 0 6% 30px;
}
.message_t .message_p {
margin: 10px 0 20px 0;
}
.message h4 {
color: #333;
font-size: 140%;
line-height:1.8em;
font-weight: normal;
margin: 0 auto;
text-align: left;
padding-bottom: 5px;
font-family: 'Noto Serif JP', serif;
letter-spacing: 0.1em;
}
.message_p {
margin: 4% 0 6% 0;
text-align: justify;
line-height: 2.2em;
}
.message:after{content: "";
display: block;
clear: both}

@media screen and (min-width: 768px) {
.message section{
padding: 40px 0 0 0;
}
.message h4 {
line-height:1.8em;
}
.message_p {
line-height:2.2em;
margin: 15px 0 30px 0;
}
}
@media screen and (min-width: 1024px) {
.message section{
padding: 60px 0;
}
.message_i {
width: 50%;
float: right;
}
.message_t {
width: 45%;
float: left;
padding: 0 3% 60px 6%;
}
.message_i img{
display:block;
width:100%;
height:350px;
object-fit:cover;
}
}
@media screen and (min-width: 1200px) {
.message_t {
padding: 0 3% 60px 10%;
}
}

/* LINE 線svg
/* ------------------------------------- */
.message svg {
width: 100%;
height: auto;
display:block;
position: absolute;
top: 30%;
left:0;
z-index: -100
}
.imgsvg svg {
width: 105%;
height: auto;
display:block;
position: absolute;
bottom:0;
left:-5px;
right:0;
margin:auto;
z-index: 100
}
.img_inami {
width: 100%;
background-image: url('../img/top/top_img_pc.jpg');
background-repeat: repeat-x;
background-size: auto 100%;
}
.LINE-svg {
stroke:#9d9e9e;
fill:#9d9e9e;
fill-opacity: 0;
stroke-width:0.3;
stroke-dasharray: 3000;
stroke-dashoffset:3000;
animation: none;
}

@keyframes LINE {
0% { stroke-dashoffset:3000; fill-opacity:0; }
30% { fill-opacity:0; }
35% { fill-opacity:1; }
100% { stroke-dashoffset:0; fill-opacity:1; }
}

@media screen and (min-width: 768px) {
.message svg {
width: 500px;
height: auto;
position: absolute;
bottom: -10px;
left: -10px;
}
} 
@media screen and (min-width: 1024px) {
.img_inami { 
height: 360px;
}
}
@media screen and (min-width: 1200px) {
.img_inami {
height: 460px;
}
.imgsvg svg {
width: 110%;
}
}
@media screen and (min-width: 1440px) {
.img_inami {
height: 560px;
}
.imgsvg svg {
width: 120%;
}
}

/* マスク表示
/* ------------------------------------- */
.view{
position: relative;
overflow: hidden;
}
.view::after{
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #fff;
transform: translateX(-100%);
transition: all .3s ease-in-out .3s;
}
.view img{
vertical-align: middle;
transform: translateX(-100%);
}
.view.js-on::after{
animation: viewinMask 1s ease-in-out forwards;
}
.view.js-on img{
animation: viewinImg 1s ease-in-out forwards;
}
@keyframes viewinMask{
0%{
transform: translateX(-100%);
}
40%{
transform: translateX(0%);
}
60%{
transform: translateX(0%);
}
100%{
transform: translateX(100%);
}
}
@keyframes viewinImg{
0%{
transform: translateX(-100%);
}
40%{
transform: translateX(0%);
}
60%{
transform: translateX(0%);
}
100%{
transform: translateX(0%);
}
}




/*read-more
---------------------------------------------------------------------------*/
.btn_read_more {
font-family: 'Noto Serif JP', serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #333;
font-weight: 400;
border: solid 1px #333;
display: block;
box-sizing: border-box;
max-width: 200px;
text-align: center; 
padding: 10px 64px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.btn_read_more:before { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%) rotate(45deg); width: .5em; height: .5em; border-top: 1px solid #333; border-right: 1px solid #333; content: "";
transition: all 0.2s;
}
.btn_read_more:hover:before{
right: 15px;
border-top: 1px solid #fff; border-right: 1px solid #fff;
}

.btn_read_more::after {
background: #333;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
transform: scale(0, 1);
transform-origin: left top;
 transition: transform 0.6s ease;
z-index: -1;
}
.btn_read_more:hover {
color: #fff;
transition: all 0.3s;
}
.btn_read_more:hover::after {
transform: scale(1, 1);
}
@media (max-width: 767px) {
.btn_read_more {
width: 120px;
padding: 10px 0;
}
}



/*全体見出し
---------------------------------------------------------------------------*/
.section-two-h3 {
font-size: 180%;
line-height: 1.5;
font-weight: normal;
letter-spacing:.15em;
margin: 10px 0;
}
.section-two-h3 span{
font-size: 11px;
margin-top: 0;
font-weight: normal;
padding-left: 10px;
letter-spacing:.05em;
}
.section-two-h3:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
@media screen and (max-width: 1023px) {
.section-two-h3 {
font-size: 170%;
}
.em-tight {
letter-spacing: -.01em;
}
}


/*背景
---------------------------------------------------------------------------*/
#bg_osirase{
padding:50px 0;
background-image: url('../img/top/bg_gray.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
}
#bg_spots,
#bg_link{
padding:50px 0;
}
#bg_service {
background: url('../img/top/bg_gray.jpg') repeat;
background-attachment: fixed;
background-position: center;
justify-content: center;
align-items: center;
width: 100%;
padding:0 0 60px 0;
margin-bottom: 60px
}
.bg_white {
width: 100%;
height: 100px;
background-color: #fff;
position: absolute;
}
.custom-background{
padding: 30px 0;
text-align: left;
background-image: url('../img/top/bg_gray.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
}
@media (max-width: 767px) {
.custom-background{
padding: 20px 0;
}
#bg_osirase,#bg_spots,#bg_link{
padding:30px 0;
}
#bg_service {
padding:0 0 30px 0;
margin-bottom: 30px
}
}

/*お知らせ　テキストとボタン並べ
---------------------------------------------------------------------------*/
.t_lr{
width: 100%;
display: flex;
}
.t_lr .btn_lr{
margin: 0 0 0 auto;
}


/*バナー
---------------------------------------------------------------------------*/
.bana_bnr_box {
padding: 0 6%;
box-sizing: border-box;
width: 100%;
margin: 0 auto;
}
.bana_bnr_box ul:after {
content: "";
clear: both;
display: block;
}
/* バナーリスト */
.bana_bnr_box ul {
margin: 30px 0;
display: flex;
flex-wrap: wrap;
}
/* バナー個別 */
.bana_bnr_box ul li {
list-style-type: none;
display: block;
float: left;
width: 100%;
position: relative;
transition: all .3s;
overflow: hidden;
margin-bottom: 3%;
}
/* バナーリンク */
.bana_bnr_box ul li a {
display: block;
position: relative; /* ::before 用 */
overflow: hidden;
}
/* バナー画像 */
.bana_bnr_box ul li .sb_img {
display: block;
width: 100%;
height: 200px;
object-fit: cover;
box-sizing: border-box;
position: relative;
z-index: 0; /* オーバーレイの下 */
}
/* 半透明オーバーレイ */
.bana_bnr_box ul li a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 1;
}
/* テキスト */
.bana_bnr_box ul li .bana_text {
position: absolute;
top: 50%;
left: 220px;
text-align: left;
font-size: 1.3em;
color: #fff;
line-height: 1.3em;
white-space: nowrap;
transform: translate(0, -50%);
z-index: 2;
}
.bana_text span{
display: block;
font-size:.5em;
line-height: 1em;
padding-top: 10px;
}
/* マウスオーバー */
.bana_bnr_box ul li a:hover {
text-decoration: none;
}
/* バナー内アイコン画像 */
.bana_bnr_box ul li .bana_img {
position: absolute;
top: 50%;
left: 50px;
width: 120px;
height: auto;
transform: translate(0, -50%);
z-index: 2;
}
@media only screen and (min-width: 768px) {
.bana_bnr_box ul li {
width: calc((100% - 5%) / 2);
margin-right: 5%;
margin-bottom: 0;
}
.bana_bnr_box ul li:nth-child(2n) {
margin-right: 0;
}
.bana_bnr_box ul li .sb_img {
height: 150px;
}
.bana_bnr_box ul li .bana_text {
font-size: 110%;
left: 150px;
}
.bana_bnr_box ul li .bana_img{
left: 30px;
width: 100px;
}
}
@media only screen and (min-width: 981px) {
.bana_bnr_box ul li .sb_img {
height: 200px;
}
.bana_bnr_box ul li .bana_text {
font-size: 130%;
left: 230px;
}
.bana_bnr_box ul li .bana_img{
left: 50px;
width: 140px;
}
}
@media screen and (min-width: 1024px) {
.bana_bnr_box {
width:1000px;
padding: 0;
margin: 0 auto;
}
}
@media only screen and (max-width: 600px) {
.bana_bnr_box ul {
width: 100%;
flex-direction: column;
}
.bana_bnr_box ul li {
width: 100%;
margin-bottom: 10px;
}
.bana_bnr_box ul li .sb_img {
width: 100%;
height: 150px;
}
.bana_bnr_box ul li .bana_text {
font-size: 1em;
}
.bana_bnr_box ul li .bana_img {
width: 100px;
}
}


/*service
---------------------------------------------------------------------------*/
.service_box {
 display:block;
 margin-top: 20px
}
/*円の配置*/
.seien{
display: flex;
display: -webkit-flex;
justify-content: space-around;
margin-top: 20px
}

/*円と文字*/
.seien div{
width: calc((100% - 4%) / 3);
margin-right: 2%;
border-radius: 100%;
display: flex;
background:#fff;
text-align:center;
margin: 0 auto;
font-size: 1em;
line-height: 1.2em;
position: relative;
overflow: hidden
}
.seien div > a.circle-inner :before{
content:"";
position: absolute;
width:100vw;
height:100vh;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
left:50%;
top:50%;
}
a.circle-inner {
position: absolute;
top: 40%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.seien span{
display: block;
font-size: 7px;
line-height: .8em;
margin-top: 10px
}
.seien div:nth-child(3n) {
margin-right: 0;
}
.seien div:before{
content: '';
display: block;
padding-top: 100%;
}
.seien a:hover {
text-decoration: none;
}
.seien div img{
margin: 15px auto 10px auto;
height: 25px;
width: auto;
display: block;
}

@media screen and (min-width: 768px) {
.seien div img{
margin: 40px auto 30px auto;
height: 30px;
}
.seien div{
font-size: 1.4em;
line-height: 1.4em;
}
.seien span{
font-size: 8px;
}
} 
@media screen and (min-width: 981px) {
.seien div img{
margin: 50px auto 30px auto;
height: 35px;
}
.seien div{
font-size: 1.6em;
line-height: 1.6em;
}
.seien span{
font-size: 9px;
}
} 
@media screen and (min-width: 1024px) {
.service_box {
margin-top: 30px
}
.seien {
width:1000px;
padding: 0;
margin: 0 auto;
}
.seien div{
width: calc((100% - 10%) / 3);
margin-right: 5%;
font-size: 1.8em;
line-height: 1.8em;
}
.seien span{
font-size: 10px;
}
.seien div img{
margin: 60px auto 30px auto;
height: 40px;
}
}

/*link
---------------------------------------------------------------------------*/
.link_4 {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto
}
.flex_link img{
max-width: 100%;
height: auto;
}
.flex_link {
height: auto;
border: 1px solid #333;
}
.flex_link {
margin: 0 .2%;
}
@media screen and (min-width: 768px) {
.link_4 {
width: 100%;
}
.flex_link {
margin: 0 .3%;
}
}
@media screen and (min-width: 981px) {
.flex_link {
margin: 0 .4%;
}
} 

/* Slick Arrow */
.slide-arrow {
width: 40px;
height: 40px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 100;
background: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
}
.prev-arrow {
left: -20px;
padding-left: 0;
}
.next-arrow {
right: -20px;
padding-right: 0
}
.slide-arrow__arrow {
width: 8px;
height: 8px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.prev-arrow__arrow {
border-bottom: 1px solid rgba(0,0,0,0.8);;
border-left: 1px solid rgba(0,0,0,0.8);;
}
.next-arrow__arrow {
border-top: 1px solid rgba(0,0,0,0.8);;
border-right: 1px solid rgba(0,0,0,0.8);;
}

/*おすすめ新店舗　バナー
---------------------------------------------------------------------------*/
.button-mise {
padding: 6% 6% 3% 6%;
box-sizing:border-box;
width:100%;
}
.button-mise:after {
content: "";
clear: both;
display: block;
}
.button-mise a{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin:0 auto;
padding: 1.5em 0;
border: 1px solid #000;
background-color: #fff;
font-size: 1em;
}
.button-mise a img {
width: 270px;
height: auto;
object-fit: cover;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
@media screen and (min-width: 1024px) {
.button-mise {
width:1000px;
padding: 60px 0 0 0;
margin: 0 auto;
}
.button-mise a{
height:100px;
padding: 0;
}}
@media only screen and (max-width: 600px) {
.button-mise {
width: 100%;
}
.button-mise a img {
width: 200px;
}}


/*重要なお知らせ
---------------------------------------------------------------------------*/
.title-wrapper {
display: flex;
align-items: center;
gap: 20px;
}
.title-wrapper h2,
.title-wrapper h3 {
margin: 0;
font-weight: normal;
line-height: 1.5
}
.title-wrapper h2 {
color: #e65514;
width:150px;
font-weight: 600;
}
.title-wrapper a {
display: block;
flex: 1;
text-decoration: none;
color: #333;
transition: opacity 0.5s;
}
.title-wrapper a:hover {
opacity: 0.6;
text-decoration: underline;
}
.title-wrapper h3 {
position: relative;
display: inline-block; /* 矢印の位置を文字幅に基づかせる */
}
.title-wrapper h3::after {
content: '';
position: absolute;
top: 50%;
left: 100%; /* h3 の文字幅の右端 */
margin-left: 20px; /* 文字との間隔 */
width: .5em;
height: .5em;
border-top: 1px solid #333;
border-right: 1px solid #333;
transform: translateY(-50%) rotate(45deg);
transition: all 0.2s;
}
@media (max-width: 767px) {
.title-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.title-wrapper h2,
.title-wrapper h3 {
white-space: normal; 
width: auto;
}
}


/*画像が横スクロール
---------------------------------------------------------------------------*/
@keyframes infinity-scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
display: flex;
overflow: hidden;
}
.scroll-infinity__list {
display: flex;
list-style: none;
padding: 0
}
.scroll-infinity__list--left {
animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
width: calc(100vw / .5);
}
.scroll-infinity__item>img {
width: 100%;
}
@media screen and (min-width: 1440px) {
.scroll-infinity__item {
width: calc(100vw / .7);
}
}
@media screen and (min-width: 1778px) {
.scroll-infinity__item {
width: calc(100vw / 1);
}
} 



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

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

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

}