@charset "UTF-8";

/* ページローディング */
#page-loading {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #F8F4E7;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .6s ease, visibility .6s ease;
}
#page-loading.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loading-inner {
    text-align: center;
}
.loading-logo {
    width: 180px;
    margin-bottom: 1.5rem;
}
.loading-bar-wrap {
    width: 180px;
    height: 4px;
    background: #ddd;
    border-radius: 100vmax;
    overflow: hidden;
    margin-inline: auto;
}
@keyframes loading-bar-color {
    0%      { background-color: #015EAC; }
    16.666% { background-color: #00999B; }
    33.333% { background-color: #B7CB53; }
    50%     { background-color: #DAAD40; }
    66.666% { background-color: #02A3E3; }
    83.333% { background-color: #C4416F; }
    100%    { background-color: #015EAC; }
}
.loading-bar {
    height: 100%;
    width: 0%;
    border-radius: 100vmax;
    animation: loading-bar-color 6s linear infinite;
}

/* 基礎設定 */
html, body {
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    position: relative;
    font-weight: 400;
    margin: 0;
    padding: 0;
    width: 100%;
    scroll-behavior: auto !important;
    overflow-x: clip;
    animation: fadeIn 1s;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
}
/* body#cpage {  overflow-x: hidden;} */
/*--- 画面全体をフェードイン(animation設定) ---*/
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
html.nosc, body.nosc{
	/* overflow: hidden;
    overflow-x: scroll;
    overflow-y: auto; */
}
.color-red { color: #E40046;}
.color-pn { color: #FA6582;}
.color-blue { color: #1A7DB2;}
.color-lblue { color: #E7ECF7;}
.color-wh{ color: #fff;}
.color-gr { color: #D6F0A8;}
.color-dgr { color: #465A64;}
.color-vgr { color: #73AE2E;}
.color-yg { color: #ABE8B9;}
.color-lgr{ color: #F4F595;}
.color-ye{ color: #FFF200;}
.color-ly{ color: #FFF9F4;}
.color-or{ color: #FFEABA;}
.color-prp{ color: #721DC8;}
.color-gray{ color: #7c7c7c;}
.color-bw{ color: #4D0001;}
.color-bk{ color: #000;}

.bg-red { background: #E40046;}
.bg-pn { background: #FCDBE4;}
.bg-blue { background: #1A7DB2;}
.bg-lblue { background: #E7ECF7;}
.bg-gr { background: #D6F0A8;}
.bg-dgr { background: #465A64;}
.bg-lgr { background: #F4F595;}
.bg-vgr { background: #73AE2E;}
.bg-yg { background: #ABE8B9;}
.bg-ye { background: #FFF200;}
.bg-lye { background: #FFF9F4;}
.bg-or { background: #FFEABA;}
.bg-lor { background: #ffecdc;}
.bg-bk { background: #000333;}
.bg-wh { background: #fff;}
.bg-gray { background: #7c7c7c;}
.bg-bw { background: #4D0001;}

.bg-box {
    padding: 1.5rem;
    border-radius: 5px;
    background: #EDF2F7;
    margin-bottom: 2rem;
}
.wh-box {
    padding: 1.5rem;
    background: #fff;
}

button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
}
input:not([type=checkbox],[type=radio]) {
    appearance: none;
    border: none;
    outline: none;
}
input[type=checkbox], input[type="radio"] {
    cursor: pointer;
}
.post-password-form { padding: 4rem 0;}
.post-password-form input[type=password] {
    border: 1px solid #DBDBDB;
    border-radius: 3px;
    margin-inline: .5em;
}
.post-password-form input[type=submit] {
    background: var(--main-color);
    color: #fff;
    border-radius: 3px;
}
.post-password-form label, .post-password-form input[type=submit] {
    margin-bottom: .5rem;
}
:root {
    --main-color: #008AC9;
    --sub-color: #F8F4E7;
    --normal-color: #313131;

    --asahi-red: #C4416F;
    --asahi-red-light: #FD92AF;
    --asahi-blue: #02A3E3;
    --asahi-blue-light: #08DCE0;
    --asahi-yellow: #DAAD40;
    --asahi-yellow-light: #FDC641;
    --asahi-green: #00999B;
    --asahi-green02: #BBDE0B;
    --asahi-green-light: #B7CB53;
    --asahi-dblue: #015EAC;

    --bg-color: #F8F4E7;
    --bg-normal: #fff;

    --btn-width: 180px;
    --btn-height: 40px;

    --font-ja: "Noto Sans JP", sans-serif;
    --font-en: "M PLUS 1p", sans-serif;
    --font-fa: "Font Awesome 7 Free";
}
.main-color { color: var(--main-color);}
.sub-color { color: var(--sub-color);}
.font-ja { font-family: var(--font-ja);}
.font-en { font-family: var(--font-en);}

/* a:hover{
    color: #000;
} */

h1, h2, h3, h4, h5, h6 {
    color: #333;
    font-weight: 700;
    line-height: 1.3;
    margin-inline: auto;
    margin-bottom: 1.5rem;
    padding: 0;
}
h1 { font-size: 30px;}
h2 { font-size: 24px;}
h3 { font-size: 20px;}
h4 { font-size: 18px;}
h5 {
    font-size: 16px;
}
h6 { 
    font-size: 14px;
}

hgroup > h2 { margin-bottom: 0;} 




.box-wh{
    padding: 2.5em 3em;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    box-sizing: border-box;
}


/* --- flex-box --- */
/* .flex-box {
    display: flex;
    justify-content: center;
}
.flex1 > div { width: 100%; }
.flex2 > div { width: 50%; }
.flex3 > div { width: calc(100% / 3); }
.flex4 > div { width: 25%; }
.flex5 > div { width: 20%; }
.flex-last {
    display: flex;
    justify-content: flex-end;
    flex-flow: column;
} */

/*--- grid-box ---*/
.grid-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1.5rem;
}
.grig-wrap0 { grid-gap: 0; }
.grid1 { grid-template-columns: repeat(1, 1fr); grid-gap: 0;}
.grid2 { grid-template-columns: repeat(2, 1fr); }
.grid3 { grid-template-columns: repeat(3, 1fr); }
.grid5 { grid-template-columns: repeat(5, 1fr); }

/* hr { 
    margin: 10px 0;
    border-top: 1px solid var(--main-color);
} */

p {
    margin: 0 auto 1.5rem;
    padding: 0;
    line-height: 1.8;
    letter-spacing: 0.02em;
}
a:link,a:visited,a:hover,a:active{ text-decoration: none;}
a {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
/* a[href^="tel:"] {
    text-decoration: underline;
} */
/* #cpage a[href^="tel:"] {
    color: var(--main-color);
} */

a.link-block {
    display: block;
    width: 100%;
    height: 100%;
}
a.link-flex {
    display: flex;
    width: 100%;
    height: 100%;
}


section {
    position: relative;
    z-index: 10;
    padding: 5rem 0;
}
.sec-inline img {
    max-width: 100%;
    height: auto;
}
.sec-inline-start { 
    padding-inline-start: calc((100vw - 1000px) / 2);
    padding-left: 7.5%;
}
.sec-inline-end { 
    padding-inline-end: calc((100vw - 1000px) / 2);
    /* padding-right: 7.5%; */
}
.container-fluid{ padding: 0;}


ul, dd, figure {
    margin-bottom: 0;
}
ol { line-height: 2;}

/* ナビゲーション */
#head { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 999;
    transition: .3s;
    /* background: #fff;
    filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16)); */
}

#head h1 { margin: 0}
.h-logo .brand {
    position: relative;
    max-width: 197px;
    max-height: 53px;
    object-fit: contain;
    z-index: 20;
}

#cpage main { 
    padding-top: 100px;
    background: var(--sub-color);
}
.h-logo { 
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1;
    height: 100%;
    padding-left: 1rem;
}

.nosc .menu-list {
    display: none !important;
}
.menu-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-inline: auto;
    max-width: 420px;
    /* width: calc(100% / 3); */
    min-width: 320px;
    height: 100%;
}
@media (min-width: 991px) {
    .top-page .menu-wrap { display: none; }
    .top-page .menu-wrap.is-active { display: flex; }
    body .openbtn,
    body .openbtn.active { display: none !important; }
}
.menu-list { 
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    right: 2rem;
    gap: .5rem .75rem;
}
.menu-list > ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding-left: 0;
    /* gap: 2rem; */
}
.menu-list > ul > li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-left: 1px solid rgba(112,112,112,0.15);
}
.menu-list > ul > li:last-child {
    border-right: 1px solid rgba(112,112,112,0.15);
}

.menu-list > ul > li > a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: #333;
    font-size: 16px;
    padding: 0 2.25rem;
    text-wrap: nowrap;
}
.menu-list > ul > li > a[target="_blank"] {
    display: flex;
    align-items: center;
}
.menu-list > ul > li > a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url(../img/icon-link.png) no-repeat center / contain;
    filter: brightness(1) invert(1);
    margin-left: .25em;
    transition: .3s;
}
.menu-list > ul li img {
    max-width: 36px;
}


.menu-link {
    background: #000;
}
.menu-link a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: 700;
    padding: 1rem 2rem;
}
.nav-menu ul { 
    position: relative;
    margin-bottom: 0;
}
.nav-menu ul li { 
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.nosc #head {
    top: 0;
    width: 100%;
    background: #fff;
    filter: none;
}
/* .nosc main, .nosc main ~ * { filter: blur(3px);} */


/* ハンバーガーメニュー */
.openbtn{
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    z-index: 1001;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 4px;
    transition: .3s;
    background: var(--asahi-yellow);
}
.openbtn span {
    display: block;
    transition: .3s;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 1.5px;
    background-color: #fff;
    border-radius: 100vmax;
    width: 17.5px;
}
.openbtn span:nth-of-type(1) {
    top: 35%; 
}
.openbtn span:nth-of-type(2) {
    top: 50%; 
}
.openbtn span:nth-of-type(3) {
    top: 65%; 
}
  
.openbtn.active span:nth-of-type(1) {
    top: 45%;
    left: 20%;
    transform: translateY(1px) rotate(-30deg);
    width: 60%;
}
.openbtn.active span:nth-of-type(2) {
    display: none;
}
.openbtn.active span:nth-of-type(3) {
    top: 60%;
    left: 20%;
    transform: translateY(-4px) rotate(30deg);
    width: 60%;
}
/* ×印が横幅を広くしても消えない設定 */
.openbtn.active{ display: block !important;}
.nosc .nav-menu{ opacity: 0;}
.nosc .menu-wrap .d-lg-none { display: block !important;}

/* ハンバーガーメニュー内部 */
#clickarea {
    position: fixed;
    width: 100%;
    height: 100vh;
    inset: 0;
    background: #F8F4E7 url(../img/bg.jpg) repeat top / cover;
    transition: .3s;
    opacity: 0;
    z-index: -1;
    visibility: hidden;
}
#clickarea.panelactive {
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}
#clickarea.panelactive .sp-menu {
    position: relative;
    z-index: 1000;
    max-width: 420px;
    width: calc(100% - 2rem);
    margin-inline: auto;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    z-index: 0;
}

#clickarea .sp-menu {
    padding-top: 6rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 15rem;
}
.sp-menu > ul { 
    padding: 0;
    list-style: none;
    margin-bottom: 1rem;
}


.click-link {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 1.5rem;
}

.click-link .btn01 { max-width: none;}

#clickarea .sns-wrap {
    justify-content: center;
    align-items: center;
}
#clickarea .menu-sns {
    gap: .5rem;
}
#clickarea .sns-icons img {
    height: 40px;
}
#clickarea .sns-label { font-size: 16px;}



/* ボタン類 */
.btn01, .btn {
    position: relative;
    max-width: var(--btn-width);
    width: 100%;
    height: var(--btn-height);
    border: 1px solid #333;
    border-radius: 100vmax;
    box-shadow: 3px 3px 0 #333;
    z-index: 10;
}

#cpage .btn01, .btn { max-width: none;}

.btn01 a, .btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75em;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 100vmax;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
    padding: .5rem 1rem;
    transition: .3s;
    z-index: 10;
    text-decoration: none !important;
}

.btn02 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    max-width: none;
    /* width: 100%; */
    margin-inline: auto;
    /* max-height: var(--btn-height); */
    background-color: #fff;
    border-radius: 100vmax;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
    padding: .5rem 2rem;
    transition: .3s;
    border: 1px solid #333;
    box-shadow: 3px 3px 0 #333;
    z-index: 10;
}
#cpage .btn02 { 
    max-width: 190px;
    width: 100%;
    cursor: pointer;
}

.btn01 a::after,
.btn02::after,
.btn::after {
    content: "";
    flex-shrink: 0;
    width: 12.603px;
    height: 11.622px;
    background: url(../img/arrow.svg) no-repeat center / contain;
}
#cpage .btn02::after {
    transform: rotate(90deg);
}
#load-more.loading {
    pointer-events: none;
    opacity: 0.7;
    background: #FCB200;
}
#load-more.loading::after {
    background: none;
    width: 16px;
    height: 16px;
    border: 2px solid #333;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    transform: none;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}



#clickarea .btn-menu {
    max-width: 245px;
    max-height: none;
    width: 100%;
    height: 60px;
}
#clickarea .btn-menu a {
    font-size: 18px;
}

/* TOPのsection設定 */
.sec-wrap {
    position: relative;
    width: 85%;
    max-width: 1000px;
    margin-inline: auto;
}

/* section::before{
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
} */

.top-page hgroup h2 { 
    font-family: var(--font-en);
    text-align: center;
}

.pc-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: url(../img/bg.jpg) repeat top left / 1280px auto #F8F4E7;
}

.rank-wrap {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 430px;
    width: calc(100% / 3 - 1.5rem);
    height: 100%;
    /* padding: 5rem 3rem 8rem; */
    padding: 1rem 3rem 8rem;
    overflow: hidden;
    /* background: url(../img/bg.jpg) repeat top / cover; */
}

.rank-wrap hgroup {
    position: relative;
    text-align: center;
    padding-top: 1rem;
    margin-bottom: 1.5rem;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 1rem;
        background: url(../img/icon-crown.png) no-repeat center / contain;
    }
}
.rank-wrap hgroup h2 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-top: .5rem;
    margin-bottom: .25rem;
}
.rank-wrap hgroup > div span { margin-left: .5em;}

.rank-list {
    list-style: none;
    padding: 0;
}
.rank-list li {
    position: relative;
    border-top: 1px solid var(--normal-color);
    /* padding: 1rem 0; */
    padding: .5rem 0;
}
.rank-list li:last-child { border-bottom: 1px solid var(--normal-color);}
.rank-list li a {
    display: flex;
    gap: 20px;
    color: var(--normal-color);
    transition: color .3s ease-out;
}

.rank-list li .rank-img {
    position: relative;
    max-width: 81px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #333;
    overflow: hidden;
}
/* バッジをliに移動することでrank-imgのoverflow:hiddenから脱出させる */
.rank-list li::before {
    position: absolute;
    top: calc(1rem + 5.7px);
    left: 4px;
    transform: translate(-50%, -50%);
    font-family: var(--font-en);
    font-size: 16px;
    /* font-size: clamp(8px,1.3vw,16px); */
    color: #333;
    text-align: center;
    line-height: 1;
    letter-spacing: 0.03em;
    z-index: 2;
}

.rank-txt { width: 100%;}
.rank-list li:nth-of-type(1)::before { content: "1";}
.rank-list li:nth-of-type(2)::before { content: "2";}
.rank-list li:nth-of-type(3)::before { content: "3";}
.rank-list li:nth-of-type(4)::before { content: "4";}
.rank-list li:nth-of-type(5)::before { content: "5";}

.rank-list li::after {
    content: "";
    position: absolute;
    top: calc(1rem - 0.5em);
    left: -0.5em;
    width: 23px;
    height: 26px;
    border: 1px solid #333;
    border-radius: 5px;
    background: #fff;
    box-shadow: 2px 2px 0 #333;
    z-index: 1;
}
.rank-list li .rank-img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: .3s;
}

.rank-cat {
    display: inline-block;
    /* font-size: 10px; */
    font-size: clamp(8px, .8vw, 10px);
    font-family: var(--font-en);
    line-height: 1;
    color: #fff;
    text-align: center;
    border-radius: 100vmax;
    padding: .4em 1em;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.rank-list li.life .rank-cat { background: var(--asahi-red);}
.rank-list li.gourmet .rank-cat { background: var(--asahi-blue);}
.rank-list li.special .rank-cat { background: var(--asahi-green);}
.rank-list li.trip .rank-cat { background: var(--asahi-yellow);}
.rank-list li.becal .rank-cat { background: var(--asahi-green-light);}
.rank-list li.bm .rank-cat { background: var(--asahi-dblue);}

.rank-tit {
    /* font-size: 1.3vw; */
    /* font-size: clamp(11px,1.3vw,16px); */
    font-size: clamp(11px,1.3vw,14px);
    font-weight: 700;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pc-menu {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 430px;
    width: calc(100% / 3 - 1.5rem);
    height: 100%;
    padding: 2rem 3rem 8rem;
    overflow: hidden;
    /* background: url(../img/bg.jpg) repeat top / cover; */
}

.pc-menu hgroup {
    position: relative;
    text-align: center;
    margin-bottom: 1.5rem;
}
.pc-menu h2 {
    position: relative;
    display: inline-block;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.pc-m-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 1em);
    height: 1px;
    background: var(--normal-color);
}
.pc-m-line::before, .pc-m-line::after {
    content: "";
    position: absolute;
    bottom: -3.5px;
    width: 7px;
    height: 7px;
    aspect-ratio: 1;
    border-radius: 100vmax;
    background: var(--normal-color);
}
.pc-m-line::before {
    left: 0;
}
.pc-m-line::after {
    right: 0;
}

.pc-menu nav, .sp-menu {
    margin-bottom: 1.5rem;
}
.pc-menu nav ul, .sp-menu ul {
    list-style: none;
    padding: 0;
}
.pc-menu nav li, .sp-menu > ul > li {
    padding: 0.75rem 0;
    margin-bottom: .25rem;
}
.sp-menu > ul > li:not(:last-child) { margin-bottom: .5rem;}
.pc-menu nav li a, .sp-menu li a {
    display: flex;
    align-items: center;
    gap: 2rem;
    color: var(--normal-color);
    text-decoration: none;
    transition: color .3s;
}

.pc-menu .menu-head, .sp-menu .menu-head {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    aspect-ratio: 1;
    border-radius: 100vmax;
    overflow: visible;
    transition: transform .3s ease;
}
.pc-menu nav li:hover .menu-head,
.sp-menu > ul > li:hover .menu-head {
    transform: rotate(135deg);
}
.pc-menu nav li:hover .mh-bg,
.sp-menu > ul > li:hover .mh-bg {
    transform: rotate(-135deg);
}
.pc-menu .mh-arc, .sp-menu .mh-arc {
    position: absolute;
    inset: 0;
}
.pc-menu .mh-arc span, .sp-menu .mh-arc span {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 6px;
    line-height: 1;
    white-space: nowrap;
}
.pc-menu .mh-bg, .sp-menu .mh-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: transform .3s ease;
}
.pc-menu .menu-en, .sp-menu .menu-en {
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    font-family: var(--font-en);
    margin-bottom: .25rem;
}
.pc-menu .menu-ja, .sp-menu .menu-ja {
    font-size: 14px;
    letter-spacing: 0.03em;
    line-height: 1;
}

.trend-wrap {
    margin-bottom: 2rem;
}
.trend-tit {
    font-size: 20px;
    letter-spacing: 0.03em;
    text-align: center;
    margin-bottom: .5rem;
}
.trend-box {
    padding: 1em;
    border-top: 1px solid var(--normal-color);
    border-bottom: 1px solid var(--normal-color);
}
.trend-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5em 1em;
}
.trend-list li { line-height: 1;}
.trend-list li a {
    display: block;
    font-size: 14px;
    letter-spacing: 0.03em;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.sns-tit {
    position: relative;
    max-width: 242px;
    width: 95%;
    margin-inline: auto;
    margin-bottom: 1rem;
}
.sns-tit::before, .sns-tit::after {
    content: "";
    position: absolute;
    top: .5em;
    width: 2px;
    height: 25px;
    background: #333;
}
.sns-tit::before {
    left: -1.25em;
    transform: rotateZ(-45deg);
}
.sns-tit::after {
    right: -1.25em;
    transform: rotateZ(45deg);
}
.sns-wrap ul {
    list-style: none;
    padding: 0;
}
.sns-wrap ul li {
    max-width: 188px;
    width: 90%;
    height: 40px;
    margin-inline: auto;
    border: 1px solid #333;
    border-radius: 100vmax;
    background: #fff;
    box-shadow: 3px 3px 0 #333;
    transition: .2s ease-in;
}
.sns-wrap ul li:not(:last-child) { margin-bottom: 1rem;}
.sns-wrap ul li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    width: 100%;
    height: 100%;
    padding: .5rem 1.5rem;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    text-align: center;
    font-family: var(--font-en);
    text-wrap: nowrap;
}
.sns-wrap ul li a::after {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background: url(../img/arrow.svg) no-repeat center / contain;
}
.sns-item img {
    max-width: 24.5px;
}

.main-wrap {
    position: relative;
    width: 420px;
    max-width: 420px;
    margin-inline: auto;
    z-index: 1;
}
.main-wrap > main {
    overflow: hidden;
}
.main-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: 2px;
    height: 100%;
    background: url(../img/line.png) repeat-y top / contain;
    z-index: 20;
}
.main-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 2px;
    height: 100%;
    background: url(../img/line.png) repeat-y top / contain;
    z-index: 20;
}

/* TOP */
#maintop {
    position: relative;
    width: 100%;
    /* max-height: 1000px; */
    max-height: 800px;
    height: 100%;
    aspect-ratio: 1 / 2;
    padding: 0;
    background: url(../img/main-bg01.jpg) no-repeat top / cover;
    z-index: 10;
    overflow: hidden;
}
#maintop > div {
    position: absolute;
    /* transform: translate(-50%,-50%); */
}
#maintop > div img {
    width: 100%;
    height: auto;
}

#maintop::before {
    content: "";
    position: absolute;
    /* left: calc(50% - 153.5px);
    bottom: -275px;
    width: 307px;
    height: 307px; */
    left: calc(50% - 175px);
    bottom: -305px;
    width: 350px;
    height: 350px;
    aspect-ratio: 1;
    border-radius: 100vmax;
    background: var(--asahi-green-light);
    /* background: url(../img/road.png) no-repeat center / contain; */
    /* animation: cycle 20s linear infinite reverse; */
}
#maintop::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 108px;
    background: url(../img/main-bg02.png) repeat-x 0 bottom / auto 108px;
    /* animation: bgScrollX 30s linear infinite; */
    /* animation-play-state: var(--bg-play, paused); */
    z-index: -1;
}

.mi01 {
    top: -3%;
    left: 7%;
    width: 36vw;
    max-width: 105px;
}
.mi02 {
    top: 1%;
    right: -6%;
    width: 41.7vw;
    max-width: 175px;
}
.mi03 {
   top: 16%;
    left: -7%;
    width: 48vw;
    max-width: 215px;
}
.mi04 {
    top: 9%;
    left: 54%;
    width: 30.5vw;
    max-width: 128px;
    transform: translateX(-50%);
}
.mi05 {
    top: 29%;
    left: 50%;
    width: 15.5vw;
    max-width: 65px;
}
.mi06 {
    top: 14%;
    right: 2.5%;
    width: 35vw;
    max-width: 133px;
}

.main-logo {
    top: 45.5%;
    left: 53%;
    transform: translate(-50%,-50%);
    max-width: 342px;
    width: 90%;
}

.mi07 {
    top: 53%;
    left: 7%;
    width: 30vw;
    max-width: 115px;
}
.mi08 {
    top: 57%;
    left: 42%;
    width: 9.1vw;
    max-width: 38px;
}
.mi09 {
    top: 54%;
    right: 2%;
    width: 45vw;
    max-width: 170px;
}
.mi10 {
    top: 78%;
    left: 12%;
    width: 13.8vw;
    max-width: 64px;
}
.mi11 {
    top: 70%;
    left: 33%;
    width: 21.4vw;
    max-width: 90px;
}
.mi12 {
    top: 80%;
    right: 23.5%;
    width: 14.5vw;
    max-width: 61px;
}
.mi13 {
    bottom: 3.5%;
    left: 50%;
    max-width: 102px;
    transform: translateX(-50%);
    z-index: 20;
    /* animation: mi13Shake 12s ease-in-out infinite; */
}

.mi13-sub img:first-child {
    position: absolute;
    left: 15%;
    bottom: 0;
    max-width: 20px;
}
.mi13-sub img:last-child {
    position: absolute;
    right: 23%;
    bottom: 0;
    max-width: 22.2px;
}

.mi13-move img:first-child {
    position: absolute;
    /* top: 50%;
    left: -20%; */
    top: 39%;
    left: -33%;
    max-width: 25px;
    /* animation: gasFirst 7s ease-out infinite; */
}
.mi13-move img:last-child {
    position: absolute;
    /* top: 40%;
    left: -20%; */
    top: 10%;
    left: -50%;
    max-width: 17.7px;
    /* animation: gasLast 7s ease-out infinite; */
}
@keyframes gasFirst {
    0%   { opacity: 0;   transform: scale(0.3) translate(0, 0); }
    6%   { opacity: 0.8; transform: scale(0.8) translate(-5px, -3px); }
    28%  { opacity: 0;   transform: scale(1.3) translate(-15px, -8px); }
    100% { opacity: 0;   transform: scale(1.3) translate(-15px, -8px); }
}
@keyframes gasLast {
    0%   { opacity: 0;   transform: scale(0.4) translate(0, 0); }
    6%   { opacity: 0;   transform: scale(0.6) translate(-3px, -2px); }
    28%  { opacity: 0.7; transform: scale(1.3) translate(-15px, -8px); }
    42%  { opacity: 0;   transform: scale(1.7) translate(-22px, -13px); }
    100% { opacity: 0;   transform: scale(1.7) translate(-22px, -13px); }
}

.mi13-sub img {
    /* animation: cycle 3s linear infinite; */
}
@keyframes cycle {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}
@keyframes bgScrollX {
    from { background-position: 0 bottom; }
    to   { background-position: calc(-1 * var(--maintop-bg-w, 400px)) bottom; }
}
@keyframes mi13Shake {
    0%, 15%          { transform: translateX(-50%) translateY(0) rotate(0); }
    16%              { transform: translateX(-50%) translateY(-2px) rotate(-.5deg); }
    17%              { transform: translateX(-50%) translateY(2px) rotate(.5deg); }
    18%              { transform: translateX(-50%) translateY(-1.5px) rotate(-0.25deg); }
    19%              { transform: translateX(-50%) translateY(1px) rotate(0.25deg); }
    20%              { transform: translateX(-50%) translateY(-.5px) rotate(0); }
    21%, 100%        { transform: translateX(-50%) translateY(0) rotate(0); }
}

/* #sec01 */
#sec01 {
    background: #fff;
    padding: 4.5rem 0 1.5rem;
    border-bottom: 2px solid #333;
}
#sec01::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 45px;
    background: url(../img/sec01-bg.png) no-repeat bottom / cover;
    z-index: -1;
}

#sec01 .sec-wrap {
    width: 90%;
}

.news-wrap ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}
.news-wrap > ul > li:not(:last-child) {
    margin-bottom: 2.25rem;
}
.news-wrap a {
    color: var(--normal-color);
}
.news-img {
    position: relative;
    width: 94%;
    height: 100%;
    aspect-ratio: 6 / 4;
    margin-inline: auto;
    border: 2px solid #333;
    border-radius: 8px;
    overflow: hidden;
}
.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    /* border-radius: 8px; */
    transition: .3s ease-out;
}
.news-list li:hover .news-img img {
    transform: scale(1.05);
}
.news-img .ad,
.edit-img .ad {
    position: absolute;
    top: -2px;
    left: -2px;
    z-index: 2;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.001em;
    font-family: var(--font-en);
    color: var(--normal-color);
    text-align: center;
    background: #fff;
    border: 2px solid #333;
    border-radius: 8px 0 8px 0;
    padding: .25rem .5rem;
}
.news-txt {
    border: 2px solid #333;
    border-radius: 8px;
    padding: .75rem 1rem 0rem;
    transform: translateY(-1rem);
    margin-bottom: -1rem;
}
.news-cat {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    font-family: var(--font-en);
    color: #fff;
    text-align: center;
    border-radius: 100vmax;
    padding: .5em 1.25em;
    margin-bottom: .5rem;
    text-transform: uppercase;
}
.news-list .life .news-cat { background: var(--asahi-red);}
.news-list .life .news-txt { background: var(--asahi-red-light);}

.news-list .special .news-cat { background: var(--asahi-green);}
.news-list .special .news-txt { background: #08DCE0;}

.news-list .trip .news-cat { background: var(--asahi-yellow);}
.news-list .trip .news-txt { background: var(--asahi-yellow-light);}

.news-list .gourmet .news-cat { background: var(--asahi-blue);}
.news-list .gourmet .news-txt { background: #2BC3FF;}

.news-list .bm .news-cat { background: var(--asahi-dblue);}
.news-list .bm .news-txt { background: #2BC3FF;}

.news-tit {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: .25rem;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.news-tag ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0em .5em;
    color: #fff;
}
.news-tag ul li { font-size: 12px;}


.hori-txt {
    display: flex;
    align-items: center;
    width: max-content;
    flex-shrink: 0;
    overflow: hidden;
    animation: h-txt 40s linear infinite;
}
.hori-txt img {
    height: 67px;
    width: auto;
    flex-shrink: 0;
}
@keyframes h-txt {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


#sec02 {
    background: var(--asahi-red-light);
    padding: 3rem 0 3.5rem;
    border-bottom: 2px solid #333;
}
#sec02::before, #sec02::after {
    content: "";
    position: absolute;
    width: 42.5%;
    height: 30%;
    background: url(../img/sec02-bg.png) repeat top left / 220px 232px;
    z-index: -1;
}
#sec02::before {
    top: 5px;
    right: 1.5%;
}
#sec02::after {
    bottom: 5px;
    left: 1.5%;
}
#sec02 .sec-tit {
    margin-bottom: .7rem;
}
#sec02 hgroup {
    text-align: center;
    margin-bottom: 2rem;
}
#sec02 hgroup h2 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-family: var(--font-ja);
}
.sec-tit {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}
.sec-tit::before, .sec-tit::after {
    content: "";
    position: absolute;
    top: .5em;
    width: 2px;
    height: 20px;
    background: #333;
}
.sec-tit::before {
    left: -1.25em;
    transform: rotateZ(-45deg);
}
.sec-tit::after {
    right: -1.25em;
    transform: rotateZ(45deg);
}
#sec02 hgroup .sec-tit {
    color: #2CC3FF;
    -webkit-text-stroke: .7px #033333;
}

.new {
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    font-family: var(--font-en);
    text-align: center;
    background: var(--asahi-blue);
    color: #333;
    border: 2px solid #333;
    border-radius: 100vmax;
    width: 58px;
    height: 58px;
    aspect-ratio: 1;
    padding: .5rem;
    text-wrap: nowrap;
}

.topics-wrap .slick-track {
    display: flex;
    align-items: stretch;
}
.topics-wrap .slick-slide {
    height: auto;
    display: flex;
    flex-direction: column;
}
.topics-wrap .slick-slide > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.topics-wrap .slide {
    border: 2px solid #333;
    border-radius: 11px;
    padding: 1rem;
    background: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.topics-wrap .slide { transition: none; }
.topics-wrap .slide.tilt-r { transform: rotate(3deg); }
.topics-wrap .slide.tilt-l { transform: rotate(-3deg); }
.topics-wrap .slide a {
    color: var(--normal-color);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.topics-img {
    border-radius: 8px;
}
.topics-wrap .slide .topics-img img { border-radius: 8px;}
.topics-img {
    margin-bottom: 1rem;
}
.topics-tit {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 1rem;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.topics-cat {
    display: inline-block;
    font-size: 13px;
    text-align: center;
    color: #fff;
    font-family: var(--font-en);
    border-radius: 100vmax;
    padding: .25rem 1rem;
    margin-bottom: .5rem;
    align-self: flex-start;
    text-transform: uppercase;
}

.topics-cat.life { background: var(--asahi-red);}
.topics-cat.gourmet { background: var(--asahi-blue);}
.topics-cat.special { background: var(--asahi-green);}
.topics-cat.trip { background: var(--asahi-yellow);}
.topics-cat.becal { background: var(--asahi-green-light);}
.topics-cat.bm { background: var(--asahi-dblue);}


.topics-txt ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25em;
    overflow: hidden;
    max-height: calc(12px * 1.5 * 2 + .25em);
}
.topics-txt ul li {
    font-size: 12px;
    line-height: 1.5;
    color: #AFAFAF;
}
.topics-wrap .slider {
    margin-bottom: 2rem;
}
.topics-wrap .slick-list { overflow: visible;}
.topics-wrap .slick-slide {
    margin: 0 1.5rem;
}
.block-center {
    display: flex;
    justify-content: center;
}

/* #sec03 */
#sec03 {
    background: #FFEB99;
    border-bottom: 2px solid #333;
    padding: 3rem 0 3.25rem;
}
#sec03::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sec03-bg.png) repeat top / contain;
    z-index: -1;
}
#sec03 .sec-tit {
    margin-bottom: .4rem;
}
#sec03 hgroup {
    text-align: center;
    margin-bottom: 2rem;
}
#sec03 hgroup h2 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    font-family: var(--font-ja);
}
#sec03 hgroup .sec-tit {
    color: #DAAD40;
    -webkit-text-stroke: .7px #333;
}

.sec03-box {
    background: #fff;
    border: 2px solid #333;
    border-radius: 21px;
    padding: 3.25rem 1rem 2rem;
}

.edit-wrap {
    list-style: none;
    padding: 0;
}
.edit-wrap > li:not(:first-child) {
    border-top: 1px solid #C0C0C0;
}
.edit-wrap a {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--normal-color);
    padding: 1.5rem 0 1rem;
    /* padding: 1.5rem 0; */
}
.edit-wrap > li:last-child a { padding-bottom: 0;}
.edit-wrap > li:first-child a { padding-top: 0;}
.edit-wrap .edit-box {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    gap: 1rem;
    /* margin-bottom: .5rem; */
    margin-bottom: 0;
}

.edit-img {
    position: relative;
    flex: 1;
    aspect-ratio: 16 / 9;
    border: 2px solid #333;
    border-radius: 10px;
    overflow: hidden;
    max-width: 150px;
    max-height: 105px;
}
.edit-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
}

.edit-img img {
    width: 100%;
    height: 100%;
    /* border-radius: 10px; */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top;
    transition: .3s ease-out;
}
.edit-wrap a:hover .edit-img img { transform: scale(1.05);}

.edit-cat {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    font-family: var(--font-en);
    color: #fff;
    text-align: center;
    border-radius: 100vmax;
    padding: .4em 1.25em;
    margin-bottom: .45rem;
    text-transform: uppercase;
}

.edit-cat.life { background: var(--asahi-red);}
.edit-cat.gourmet { background: var(--asahi-blue);}
.edit-cat.trip { background: var(--asahi-yellow);}
.edit-cat.becal { background: var(--asahi-green-light);}
.edit-cat.special { background: var(--asahi-green);}
.edit-cat.bm { background: var(--asahi-dblue);}


.edit-tit {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: .5rem;
}

.edit-tag ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3em;
}
.edit-tag ul li {
    font-size: 12px;
    line-height: 1;
}

.block-right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
.edit-wrap .arrow {
    position: relative;
    display: block;
    width: 34px;
    height: 22px;
    background: #fff url(../img/arrow.svg) no-repeat center / auto;
    border: 1px solid #333;
    border-radius: 100vmax;
    box-shadow: 2px 2px 0 #000;
    transition: .3s ease-out;
    transform: translate(-3px, -2px);
}
.edit-wrap a:hover .arrow { background: #2ABDBF url(../img/arrow.svg) no-repeat center / auto;}



.sec04-head {
    position: relative;
    display: block;
    width: 100%;
    height: 180px;
    background: #F8F4E7;
}
.sec04-head::before {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 47px;
    background: url(../img/sec04-bg.png) no-repeat bottom / cover;
}
.sec04-img01 {
    position: absolute;
    left: 10%;
    bottom: 18%;
    width: 66px;
    animation: walkAcross 20s linear infinite;
}
.sec04-img01 img, .sec04-img02 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sec04-img01 img {
    animation: walkSway 1s linear infinite;
}
@keyframes walkAcross {
    0% {
        transform: translateX(-200%) scale(1, 1);
    }
    20% {
        transform: translateX(70%) scale(1, 1);
    }
    30% {
        transform: translateX(70%) scale(1, 1);
    }
    50% {
        transform: translateX(550%) scale(1, 1);
    }
    55% {
        transform: translateX(550%) scale(-1, 1);
    }
    95%, 100% {
        transform: translateX(-200%) scale(-1, 1);
    }
}
@keyframes walkSway {
    0%, 100% {
        transform: rotate(-1deg);
    }
    50% {
        transform: rotate(1deg);
    }
}
.sec04-img02 {
    position: absolute;
    left: 42%;
    bottom: 18%;
    width: 85px;
}
.sec04-img02 .txt-box {
    position: absolute;
    top: 4%;
    left: 93%;
    font-size: clamp(9px, 1vw, 10px);
    font-weight: 700;
    /* letter-spacing: -0.09em; */
    text-align: center;
    background: #fff;
    border-radius: 6px 6px 6px 0;
    box-shadow: 2px 2px 0 #333;
    border: 1px solid #333;
    padding: .75em .75em .75em 1em;
    text-wrap: nowrap;
    transition: opacity .2s;
}
/* .sec04-img02 .txt-box.is-covered {
    opacity: .2;
} */


/* #sec04 */
#sec04 {
    background: var(--asahi-green02);
    border-bottom: 2px solid #333;
    padding: 3.5rem 0 3.25rem;
}
#sec04 hgroup {
    text-align: center;
    margin-bottom: 1.5rem;
}
#sec04 hgroup h2 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-family: var(--font-ja);
}
#sec04 .sec-tit {
    margin-bottom: 0rem;
}
#sec04 .sec-tit::before {
    left: -1.5em;
    top: 0.5em;
}
#sec04 .sec-tit::after {
    right: -1.5em;
}

.bm-wrap ul {
    list-style: none;
    padding: 0;
}
.bm-wrap ul > li:not(:last-child) {
    margin-bottom: 3.25rem;
}
.bm-wrap ul > li a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: center;
}

.bm-img {
    max-width: 210px;
    margin-inline: auto;
    margin-bottom: 1.5rem;
}
.bm-wrap ul > li.pickup .bm-img {
    max-width: 180px;
    max-height: 295px;
}
.bm-img img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 4px 4px 0 #333;
    transition: .3s ease-out;
}
.bm-wrap ul > li a:hover .bm-img img { rotate: 2deg;}
.bm-wrap ul > li:nth-of-type(1) a:hover .btn02 { background-color: #2BC3FF;}
.bm-wrap ul > li:nth-of-type(2) a:hover .btn02 { background-color: #FDC640;}
.bm-wrap ul > li:nth-of-type(3) a:hover .btn02 { background-color: #FC92AF;}

/* アップボタン */
.reverse {
    position: absolute;
    top: -9%;
    right: 6%;
    width: 50px;
    height: 60px;
    z-index: 998;
    cursor: pointer;
    /* display: flex;
    flex-direction: column;
    align-items: center; */
}

/* .reverse::before {
    content: "";
    position: absolute;
    top: -2px;
    left: calc(50% + 0.5px);
    transform: translate(35%, -10%) rotate(90deg);
    width: 10px;
    height: 18.75px;
    background: url(../img/scroll-path.svg) no-repeat top / contain;
    transition: transform 0.45s ease-in-out;
    z-index: 1;
} */
/* .reverse:hover::before {
    transform: translate(-50%, -50%) rotate(0deg);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
} */
.reverse a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #333;
}
.reverse a::before {
    content: "";
    /* position: absolute;
    top: 0;
    left: 50%; */
    display: block;
    width: 50px;
    height: 60px;
    background: url('../img/scroll.png') no-repeat center / contain;
}
.reverse a:hover::before {
    background: url('../img/scroll-act.png') no-repeat center / contain;
}
/* .reverse img {
    width: 46.5px;
    height: 53px;
    object-fit: contain;
    display: block;
} */
.reverse .rev-txt {
    text-align: center;
    text-wrap: nowrap;
    line-height: 1;
    /* transform: translateY(-5px); */
}

/* フッター*/
footer {
    position: relative;
    padding-top: 0;
    z-index: 10;
}
.ft-wrap {
    position: relative;
    height: 215px;
    background: url(../img/ft-bg01.jpg) no-repeat top / cover;
    overflow: hidden;
}
.ft-wrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 110px;
    background: url(../img/ft-bg02.png) no-repeat bottom / cover;
}

.ft-img01 {
    position: absolute;
    top: 12%;
    left: 10%;
    width: 76px;
    z-index: 10;

    animation: cloud01 10s ease-in-out infinite alternate-reverse;
}
@keyframes cloud01 {
    0% { transform: translateX(30%);}
    100% { transform: translateX(-60%);}
}

.ft-img02 {
    position: absolute;
    top: 25%;
    right: 10%;
    width: 73px;
    z-index: 10;

    animation: cloud02 10s ease-in-out infinite alternate-reverse;
}
@keyframes cloud02 {
    0% { transform: translateX(-30%);}
    100% { transform: translateX(30%);}
}


.ft-img03 {
    position: absolute;
    left: 50%;
    bottom: 16%;
    width: 58px;
    z-index: 10;
}
.ft-img03 .txt-box {
    position: absolute;
    top: -2%;
    right: max(3vw, 75px);
    /* font-size: clamp(9px, 1vw, 10px); */
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.09em;
    text-align: center;
    background: #fff;
    border-radius: 6px 6px 0 6px;
    box-shadow: 2px 2px 0 #333;
    border: 1px solid #333;
    padding: .75em 1em;
    text-wrap: nowrap;
}
.ft-img01 img, .ft-img02 img, .ft-img03 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ft-img03 img {
    animation: yurayura 2s linear infinite alternate-reverse;
}
@keyframes yurayura {
    0%, 100% { transform: rotate(3deg);}
    50% { transform: rotate(-3deg);}
}

.ft-bnr {
    overflow: hidden;
}
.ft-bnr ul {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    width: max-content;
    flex-shrink: 0;
    animation: ft-bnr-scroll 60s linear infinite;
}
.ft-bnr:hover ul {
    animation-play-state: paused;
}
.ft-bnr ul li {
    /* min-width: 115px; */
    /* height: 31px; */
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    flex-shrink: 0;
}
.ft-bnr ul li a {
    display: block;
    width: 100%;
    height: 100%;
}
.ft-bnr ul li a img {
    width: 100%;
    max-height: 31px;
    height: 100%;
    object-fit: contain;
}
@keyframes ft-bnr-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ft-menu { 
    background: #333;
    padding-top: 1rem;
    padding-inline: .5rem;
}
.ft-menu ul {
    position: relative;
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-left: 0;
}
.ft-menu ul li {
    position: relative;
    margin-bottom: 10px;
    color: #fff;
}
.ft-menu ul li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 11px;
    color: #fff;
}
.ft-menu ul li:not(:last-child) a {
    padding-right: 2.5em;
}
.ft-menu ul li:not(:last-child) a::after {
    /* content: "／"; */
    content: "";
    /* display: inline-block; */
    position: absolute;
    right: 1em;
    width: .5px;
    height: 1.25em;
    background: #fff;
    transform: rotate(35deg);
    /* font-size: 1em;
    line-height: 1; */
    /* padding-left: .5em; */
}

.ft-menu ul li a[target="_blank"] {
    display: flex;
    align-items: center;
}
.ft-menu ul li a[target="_blank"]::after {
    font-family: var(--font-fa);
    content: "\f35d";
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: .8em;
    font-weight: 700;
    /* background: url(../img/icon-link.png) no-repeat center / contain; */
    margin-left: .5em;
    transition: .3s;
}

.cr { 
    /* padding: 10px 0; */
    font-size: 0.7em;
    font-weight: 300;
    text-wrap: nowrap;
    color: #fff;
    text-align: center;
    padding-bottom: .5rem;
    margin-top: .5px;
}

/* --------------------------------------------
    other page
-------------------------------------------- */
#titbar {
    position: relative;
    width: calc(100% - 60px);
    margin-inline: auto;
    margin-bottom: 1rem;
    left: 0;
    padding: .5rem;
    z-index: 10;
    border: 1px solid #333;
}
#titbar hgroup {
    display: flex;
    align-items: flex-end;
    gap: .5em;
    flex-wrap: wrap;
}
#titbar h1 {
    font-family: var(--font-en);
    font-size: clamp(25px,2vw,30px);
    letter-spacing: 0.03em;
    line-height: 1;
    color: #fff;
    margin: 0;
    text-wrap: nowrap;
    -webkit-text-stroke: 1px #333;
}
#titbar span {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.other-content h3 {
    display: inline;
    background-repeat: repeat-x;
    background-position: left .9em;
    background-size: auto .4em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.other-content h3::after {
    content: '';
    display: block;
    margin-bottom: 1.5rem;
}

.other-content h2.tit-becal {
    
}

.other-content h4 { 
    position: relative;  
    padding-bottom: 0.75rem;

    &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        border-radius: 100vmax;
        z-index: -1;
    }
}

.other-content h5 {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background: linear-gradient(transparent 40%, var(--h5-hl, rgba(178,178,178,0.5)) 40%, var(--h5-hl, rgba(178,178,178,0.5)) 75%, transparent 75%);
    background-blend-mode: multiply;

    &::after {
        content: "";
        display: block;
        height: 1.5rem;
    }
}


.single-content ul.list {
  list-style-type: none;
}
.single-content ul.list li {
	position: relative;
}
.single-content ul.list li:before {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -15px;
	width: 6px;
	height: 6px;
	background-color: #ccc;
	border-radius: 100%;
}
.single-content a {
  text-decoration: underline;
}

.hashtag {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
.hashtag li { margin-bottom: 0;}
.hashtag li a {
    border: 1px solid;
    padding: .5em 1em;
    border-radius: 100vmax;
    font-size: 12px;
    line-height: 1;
    display: inline-block;
    text-decoration: none !important;
    color: #fff;
}

.pages {
    --h5-hl: rgba(178,178,178,0.3);

    .other-content h3 { background-image: url(../img/tit-img-gray.png);}

    #titbar,
    .other-content h4::after { background: #B2B2B2;}

    .other-content h6, .bm-point { color: #B2B2B2;}
}

.gourmet-page {
    --h5-hl: color-mix(in srgb, var(--asahi-blue) 30%, transparent);

    .other-content h3 { background-image: url(../img/tit-img-blue.png);}

    #titbar,
    .other-content h4::after { background: var(--asahi-blue);}

    .other-content h6, .bm-point { color: var(--asahi-blue);}
    .hashtag li a { 
        background: var(--asahi-blue);
        border-color: var(--asahi-blue);
    }
}

.trip-page {
    --h5-hl: color-mix(in srgb, var(--asahi-yellow) 50%, transparent);

    .other-content h3 { background-image: url(../img/tit-img-yellow.png);}

    #titbar,
    .other-content h4::after { background: var(--asahi-yellow);}

    .other-content h6, .bm-point { color: var(--asahi-yellow);}
    .hashtag li a { 
        background: var(--asahi-yellow);
        border-color: var(--asahi-yellow);
    }
}

.life-page {
    --h5-hl: color-mix(in srgb, var(--asahi-red) 30%, transparent);

    .other-content h3 { background-image: url(../img/tit-img-red.png);}

    #titbar,
    .other-content h4::after { background: var(--asahi-red);}

    .other-content h6, .bm-point { color: var(--asahi-red);}
    .hashtag li a { 
        background: var(--asahi-red);
        border-color: var(--asahi-red);
    }
}

.becal-page {
    --h5-hl: color-mix(in srgb, var(--asahi-green-light) 50%, transparent);

    .other-content h3 { background-image: url(../img/tit-img-lgreen.png);}

    #titbar,
    .other-content h4::after { background: var(--asahi-green-light);}

    .other-content h6, .bm-point { color: var(--asahi-green-light);}
    .hashtag li a { 
        background: var(--asahi-green-light);
        border-color: var(--asahi-green-light);
    }
    .other-content h6 { line-height: 1.8;}
}

.special-page {
    --h5-hl: color-mix(in srgb, var(--asahi-green) 30%, transparent);

    .other-content h3 { background-image: url(../img/tit-img-green.png);}

    #titbar,
    .other-content h4::after { background: var(--asahi-green);}

    .other-content h6, .bm-point { color: var(--asahi-green);}
    .hashtag li a { 
        background: var(--asahi-green);
        border-color: var(--asahi-green);
    }
}

.bm-page, .ad-page {
    --h5-hl: color-mix(in srgb, var(--asahi-dblue) 30%, transparent);

    .other-content h3 { background-image: url(../img/tit-img-lblue.png);}

    #titbar,
    .other-content h4::after { background: var(--asahi-dblue);}

    .other-content h6, .bm-point { color: var(--asahi-dblue);}
    .hashtag li a { 
        background: var(--asahi-dblue);
        border-color: var(--asahi-dblue);
    }
}



#cpage {
    font-size: 14px;
}
#cpage.side-page h2, #cpage.side-page h3, #cpage.side-page h4 {
    margin-bottom: 2rem;
}
.sec-inline { 
    padding-inline: 30px;
    box-sizing: content-box;
    container-type: inline-size;
    margin-inline: auto;
}
#cpage .sec-inline {
    padding-top: 0;
}

#cpage .table>:not(caption)>*>* {
    border-width: 1px;
    border-color: #000;
}


.breadcrumb-content {
    position: relative;
    width: calc(100% - 60px);
    margin-inline: auto;
    margin-bottom: 1.5rem;
    z-index: 20;
}
.breadcrumb {
    display: block;
    /* background-color: #fff; */
    margin: 0 auto!important;
    padding: 0!important;
}
.breadcrumb ul {
    list-style: none;
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto!important;
    padding-left: 0;
    /* padding-bottom: 1rem; */
}
.breadcrumb ul li {
    position: relative;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    margin: 0;
    padding: 0!important;
}
.breadcrumb ul li span > span {
    display: inline-block;
}
.breadcrumb ul li a {
    color: #333;
    font-size: 12px;
    font-weight: 700;
}
.breadcrumb ul li span > span:last-child {
    max-width: 20em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: bottom;
}
.breadcrumb ul li span > img, .breadcrumb ul img {
    width: 5px;
    height: 5px;
    object-fit: contain;
    margin: 0 .5em;
    margin-bottom: 2px;
}

/*--- table ---*/

/* table-scroll */
.scroll-hint-icon { top: 50%!important; transform: translateY(-50%)!important; }
.scroll-hint-icon:before { width: 30px!important; height: 30px!important; }
.table-calc_list01 table {
    max-width: 100%;
}
.table-calc_list01 th,.table-calc_list01 td{
font-size: 0.65em !important;
padding: 3px !important;
}
.js-scrollable {
    width: 100%;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    /* margin: 2.5rem auto; */
}

a.anchorpoint {
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}

.shop_name:before {
    font-family: var(--font-fa);
    font-size: 1em;
    font-weight: 700;
    content: "\f3c5";
    padding-right: 5px;
}

.full-map {
    line-height: 0;
    max-height: 245px;
    min-width: 100%;
    overflow: hidden;
    border-radius: 9px;
    /* aspect-ratio: 4 / 3; */
}
.full-map iframe {
    width: 100%;
    height: 550px;
    margin-top: -145px;
}
.map-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}


.pnavi {
    text-align: center;
    margin-top: 2rem;
}
.pnavi span { color: var(--main-color);}
.pnavi span, .pnavi a {
    font-size: 16px;
    padding: 5px 10px;
    border: 1px solid var(--main-color);
    transition: .3s;
    border-radius: 6px;
}
#cpage .sec-inline > div .pnavi a {
    color: #fff;
    text-decoration: none;
    background: var(--main-color);
}
#cpage .sec-inline > div .pnavi a img {
    width: 11px;
    height: 11px;
    margin-bottom: 3px;
    transition: .3s;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
#cpage .sec-inline > div .pnavi a img.rev {
    transform: rotateZ(180deg);
}

/* page-style */



.logbox {
    border: solid 1px #ccc;
    width: 100%;
    max-height: 400px;
    padding: 0.5em;
    overflow: auto;
    background: #fff;
    margin-bottom: 1.5rem;
}
#cpage table:not(.book-tbl) {
	width: 100%;
	max-width: 100%;
	margin: 0;
	border: none;
	border-spacing: 0px;
    border-collapse: separate;
}
#cpage table:not(.book-tbl) th, #cpage table:not(.book-tbl) td {
	padding: 10px;
	vertical-align: top;
	font-size: 14px;
	border: none;
}
#cpage table:not(.book-tbl) th p, #cpage table:not(.book-tbl) td p {
    margin: 10px 0;
}
#cpage table:not(.book-tbl) th {
    text-align: center;
    vertical-align: middle;
    width: 100px;
    white-space: nowrap;
    background: #f2ebd3;
}
/* #cpage table:not(.book-tbl) th, #cpage #cpage table:not(.book-tbl) td { line-height: 1.3; } */
#cpage table:not(.book-tbl) th { width: auto !important; }
/* #cpage table:not(.book-tbl) tr:nth-child(odd) { background-color: rgba(247, 245, 239, 0.5); } */




.feature .movie-wrap {
  margin: 30px 0;
  overflow:hidden;
}
.movie-wrap iframe { width: 100% !important;}


.follow-hd { 
    text-align: center;
    margin-bottom: 1rem;
}
.follow-box { margin-bottom: 2rem;}
.follow-box ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.follow-box ul img {
    max-width: 40px;
}

/* archive category tag */
.archive-wrap {
    
}
.archive-list {
    list-style: none;
    padding: 0;
}
.archive-list > li {
    position: relative;
    border: 2px solid #333;
    border-radius: 11px;
    padding: 1rem;
    background: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}
.archive-wrap a {
    color: var(--normal-color);
}
.archive-img, .archive-img img {
    border-radius: 8px;
    aspect-ratio: 6 / 4;
    object-fit: contain;
}
.archive-img {
    margin-bottom: .5rem;
}
.archive-tit {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 1rem;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.archive-cat {
    display: inline-block;
    font-size: 13px;
    font-family: var(--font-en);
    text-align: center;
    color: #fff;
    border-radius: 100vmax;
    padding: .25rem 1rem;
    margin-bottom: .25rem;
    align-self: flex-start;
    text-transform: uppercase;
}

.archive-cat.life { background: var(--asahi-red);}
.archive-cat.gourmet { background: var(--asahi-blue);}
.archive-cat.special { background: var(--asahi-green);}
.archive-cat.trip { background: var(--asahi-yellow);}
.archive-cat.becal { background: var(--asahi-green-light);}
.archive-cat.bm { background: var(--asahi-dblue);}


.archive-txt ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25em;
}
.archive-txt ul li {
    font-size: 12px;
    color: #AFAFAF;
}


/* book&magazineページ */
.book-slider .slide { 
    aspect-ratio: 1.4;
    overflow: hidden;
}
.book-slider .slide img { 
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.book-slider .slick-dots li { margin: 0 -2px;}
.book-slider .slick-dots li button:before {
    opacity: 1;
    content: '';
    width: 6px;
    height: 6px;
    aspect-ratio: 1;
    border: 1px solid #333;
    border-radius: 100vmax;
    background: #fff;
}
.book-slider .slick-dots li.slick-active button:before {
    background: #333;
}
.book-slider .slick-prev { left: -15px;}
.book-slider .slick-next { right: -15px;}
.book-slider .slick-next:before,
.book-slider .slick-prev:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/slide-arrow.svg) no-repeat center / contain;
    opacity: 1;
}
.book-slider .slick-prev:before {
    transform: scaleX(-1);
}
.slick-dotted.slick-slider.book-slider { margin-bottom: 3rem;}


.bm-page .book-tbl {
    position: relative;
    width: 100%;
    margin: 20px 0;
    border-spacing: 0 10px;
    border-collapse: initial;
}
.bm-page .book-tbl::before, .bm-page .book-tbl::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: url(../img/tbl-border.png) repeat-x left / contain;
    z-index: -1;
}
.bm-page .book-tbl::before { top: 0;}
.bm-page .book-tbl::after { bottom: 0;}
.bm-page .book-tbl th {
    white-space: nowrap;
    padding-right: 10px;
    font-weight: 400;
}

.btn-list { margin-bottom: 2rem;}
.btn-list > * { 
    height: auto;
    margin-bottom: 1rem;
}

#cpage blockquote {
    margin-inline: auto;
    margin-bottom: 2rem;
    padding: 0 1rem;
    border-left: 5px solid #eee;
}

#side-entry {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 420px;
    min-width: 320px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    bottom: 0;
    z-index: 20;
}
#side-entry a {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    width: 85%;
    padding: 15px 10px;
    background-color: var(--asahi-green-light);
    border-radius: 5px 5px 0 0;
}

.c_target, .c_info {
    padding: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: .5rem;
}
.c_target:before, .c_info:before {
    content: "求人対象：";
    font-size: 13px;
}
.becal-wrap .c_info:before {
    content: "企業情報入手方法：";
}
.c_target li, .c_info li {
    border: 1px solid var(--asahi-green-light);
    color: var(--asahi-green-light);
    padding: 4px 8px;
    border-radius: 100vmax;
    font-size: 12px;
    line-height: 1;
    background: #fff;
}

.becal-wrap hgroup {
    border-left: 5px solid var(--asahi-green-light);
    padding-left: 10px;
    margin-bottom: 1.5rem;
}
.becal-wrap hgroup span {
    color: #999;
}

.becal-copy {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.acf-map {
    width: 100%;
    height: 400px;
}

#thumb-h {
    margin: 2rem auto;
}
#thumb-h .post-wrap figure img { width: 100%!important; height: 100%!important; }

#thumb-h .sp-slides { margin-bottom: 5px; }
#thumb-h .sp-slide { aspect-ratio: 1.5; overflow: hidden; }
#thumb-h .sp-slide img { width: 100%; height: 100%; object-fit: cover; }
#thumb-h .sp-slides .slick-prev { left: -15px;}
#thumb-h .sp-slides .slick-next { right: -15px;}
#thumb-h .sp-slides .slick-next:before,
#thumb-h .sp-slides .slick-prev:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/slide-arrow.svg) no-repeat center / contain;
    opacity: 1;
}
#thumb-h .sp-slides .slick-prev:before { transform: scaleX(-1); }

#thumb-h .sp-thumbnails { overflow: hidden; }
#thumb-h .sp-thumbnail {
    width: 130px;
    height: 80px;
    margin-right: 15px;
    object-fit: cover;
    cursor: pointer;
    border: 3px solid #fff;
}
#thumb-h .sp-thumbnail:last-child { margin-right: 0; }
#thumb-h .sp-thumbnails .slick-current .sp-thumbnail { border-color: #333; }

.becal-box {
    background-color: #d8dfb6;
    padding: 40px 15px;
    font-size: 13px;
    margin: 2rem auto;
}
#cpage .becal-wrap .becal-box table { margin-top: 1.5rem;}
#cpage .becal-wrap .becal-box table tr th, #cpage .becal-wrap .becal-box table tr td {
    background: transparent;
    color: #333;
    border-top: 1px solid var(--normal-color);
}
#cpage .becal-wrap .becal-box table tr:last-child th, #cpage .becal-wrap .becal-box table tr:last-child td {
    border-bottom: 1px solid var(--normal-color);
}
.becal-box .btn-list ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.becal-box .btn-list ul li {
    margin-bottom: 10px;
}
.becal-box .btn-list a {
    background-color: #fff;
    padding: 7px 20px;
    width: 100%;
    display: block;
    font-weight: bold;
    font-size: 15px;
    color: #333;
    text-align: center;
    border-radius: 100vmax;
    letter-spacing: 1px;
}
/* .becal-page h6 {
    padding: 0;
    margin: 0 0 40px;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 600;
} */
.work-wrap img { margin-bottom: 1rem;}


#cpage .becal-wrap table th, #cpage .becal-wrap table td {
    line-height: 1.8;
}
#cpage .becal-wrap table th { 
    color: #fff;
    background: var(--asahi-green-light);
}

.c_fax, .c_address {
    margin: 5px 0;
}

.freearea01 .stfimg01 {
    margin: 0 !important;
}
.freearea01 .stfname01 {
    text-align: center;
    background: var(--asahi-green-light);
    color: #fff;
    font-size: 13px !important;
    line-height: 1.2 !important;
    padding: 10px 0;
    margin-top: 0 !important;
    margin-bottom: 1rem;
}
.freearea01 .stfname01 strong {
    font-size: 14px;
    padding-bottom: 8px;
}

.other-content .row, .freearea01 {
    display: block !important;
}

.other-content .row > * {
    width: 100% !important;
}

.feature-wrap > * + img, .single-content img, .feature-wrap .movie-wrap { margin-bottom: 1rem;}
.feature-wrap > div:not(.sns-wrap) {
    border: 1px solid #333;
    padding: 1rem;
}


@media(max-width:767px) {
	.listanchor01 li {
        width: 100%;
	}
    .listanchor01 li a {
        padding: 10px 15px;
        justify-content: flex-start;        
    }
}
@media(max-width:575px) {
    .matomekiji h1, .matomekiji .h1 { font-size: 22px !important; }
    .matomekiji h2, .matomekiji .h2 { font-size: 20px !important; }
    .matomekiji h3, .matomekiji .h3 { font-size: 19px !important; }
    .matomekiji h4, .matomekiji .h4 { font-size: 18px !important; }
    .matomekiji h5, .matomekiji .h5 { font-size: 17px !important; }
    .matomekiji h6, .matomekiji .h6 { font-size: 16px !important; }
    blockquote { padding: 10px; border-left: 3px solid #eee; }
    blockquote > p:first-of-type strong { font-size: 18px!important; }
}

.matomekiji, .matomekiji div.row {
    margin-bottom: 15px!important;
    margin-right: -15px!important;
    margin-left: -15px!important;
}
.matomekiji, .matomekiji div.col-sm-5,
.matomekiji, .matomekiji div.col-sm-6,
.matomekiji, .matomekiji div.col-sm-7 {
    padding-right: 15px!important;
    padding-left: 15px!important;
}
.matomekiji blockquote {
    margin: 0 auto 15px!important;
    padding-top: 0!important;
    padding-bottom: 0!important;
}


@media (min-width: 1300px) {
    .sec-inline-start, .sec-inline-end {
        padding: 0;
    }


}
@media (max-width: 991px) {
        
    .breadcrumb ul {
        padding-inline: initial;
    }
    .sec-inline-start {
        padding-inline: initial;
        padding-left: 7.5%;
    }
    .sec-inline-end {
        padding-inline: initial;
        padding-right: 7.5%;
    }
    /* .sec-inline {
        padding-inline: initial;
        padding-left: 6%;
        padding-right: 6%;
    } */
    .rank-wrap, .pc-menu { display: none;}
    .grid-box {
        grid-gap: 1.5vw;
    }
    
    /* :root {
        --btn-width: 155px;
        --btn-height: 45px;
    } */


}

/* SPサイズ */
@media (max-width: 767px) {
    /* 基礎設定 */
    html, body { 
        /* overflow-x: hidden; */
        /* font-size: 16px; */
    }
    
    a.anchorpoint {
        padding-top: 100px;
        margin-top: -100px;
    }

    .main-wrap, .menu-wrap {
        width: auto;
    }

    /* TOP */


    .breadcrumb ul li span > span:last-child {
        vertical-align: bottom;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .anchor-list, .lcc-list .item-flex {
        flex-direction: column;
    }

    .contact-form dl dt {
        width: 100%;
        margin-right: 0;
        margin-bottom: auto;
        padding: 10px 0;
    }
    .contact-form dl dd {
        width: 100%;
    }
    .contact-form dl dd input, .contact-form dl dd textarea {
        max-width: 100%;
    }
    .contact-form dl > .contact-short-item {
        display: block;
    }
    
}

@media (max-width: 575px) {
    /* .top-page h3 {
        margin: 0;
    } */
    .grid2 { grid-template-columns: repeat(1, 1fr) !important; }
    .grid3 { grid-template-columns: repeat(1, 1fr) !important; }
    .grid4 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid5 { grid-template-columns: repeat(2, 1fr) !important; }
    .top-page p { font-size: 14px;}
    
    #head, #head.dnone { height: 55px;}

    .h-logo .brand { width: 185px;}

    .main-wrap::before, .main-wrap::after { content: none;}

    .sec-wrap {
        width: 85%;
    }
    .table th, .table td {
        display: block;
        width: 100%;
    }
    .box-wh, .box-gray, .box-grad { padding: 2rem; }
    /* .sec-inline { padding-inline: initial; padding-left: 7%; padding-right: 7%; } */
    
    .js-scrollable {
        width: 100%;
        overflow: scroll;
    }

    .block-sm-center {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #contact p {
        font-size: 16px;
    }
    .contact-wrap {
        align-items: stretch;
    }

    #aform_btn_back {
        font-size: 0.9em;
        margin-bottom: 1rem;
    }
}

@media (max-width: 400px) {
    #sec03 hgroup h2 { font-size: 27px;}
    #sec03 .sec-tit { max-width: 180px;}

    /* .edit-wrap .edit-box { 
        flex-direction: column;
        margin-bottom: .5rem;
    }
    .edit-img { 
        max-width: none;
        max-height: none;
        aspect-ratio: initial;
    }
    .edit-img img { aspect-ratio: initial;} */
}

@media (any-hover: hover) {

   .btn01:hover a, .btn02:hover, .btn:hover {
        background: #FCB200;
   }
   .btn:hover {
        border-color: #333;
   }

   .sns-wrap ul li:nth-of-type(1):hover { background: var(--asahi-red-light);}
   .sns-wrap ul li:nth-of-type(2):hover { background: var(--asahi-blue);}
   .sns-wrap ul li:nth-of-type(3):hover { background: var(--asahi-green-light);}


    .rank-list li.life a:hover,
    .pc-menu nav li.life:hover a,
    .sp-menu > ul > li.life:hover a { color: var(--asahi-red);}

    .rank-list li.gourmet a:hover,
    .pc-menu nav li.gourmet:hover a,
    .sp-menu > ul > li.gourmet:hover a { color: var(--asahi-blue);}

    .rank-list li.special a:hover,
    .pc-menu nav li.special:hover a,
    .sp-menu > ul > li.special:hover a { color: var(--asahi-green);}

    .rank-list li.trip a:hover,
    .pc-menu nav li.trip:hover a,
    .sp-menu > ul > li.trip:hover a { color: var(--asahi-yellow);}

    .rank-list li.becal a:hover,
    .pc-menu nav li.becal:hover a,
    .sp-menu > ul > li.becal:hover a { color: var(--asahi-green-light);}

    .rank-list li.bm a:hover,
    .pc-menu nav li.bm:hover a,
    .sp-menu > ul > li.bm:hover a { color: var(--asahi-dblue);}


    .rank-list li a:hover .rank-img img {
        transform: scale(1.1);
    }

    .breadcrumb ul li a:hover { opacity: .5;}

    #cpage .sec-inline > div .pnavi a:hover {
        color: var(--main-color);
        background: transparent;
    }
    #cpage .sec-inline > div .pnavi a:hover img {
        filter: none;
    }


    .wpcf7-submit:hover {
        background: var(--main-color);
    }

    .ft-m-box ul a:hover {
        color: #fff;
        opacity: 1;
    }
}