:root {
	--link-color: #392f2e;
	--primary-color: #d9d1b1;
	--secondary-color: #e0e0e2;
	--tertiary-color: #fafeff;
  --headline: #323434;
  --lead: #3b3f40;
  --paragraph-primary: #403D3B;
  --paragraph-seconday: #58585a;
	--highlight: #004c71;
	--pale-highlight: #E0E0E2;
    --sans-serif: "Helvetica Neue", "Helvetica", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

html {
	font-size: 62.5%;
	font-weight: 400;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
	color: inherit;
	font-family: inherit;
}
b,strong {
    font-weight: 700;
}
:root .has-black-color,
.wp-block-cover .wp-block-cover__inner-container {
	color: inherit;
}
body {
	margin: 0 auto;
	background-color: #FFF200;
	font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: .1em;
	color: #000;
	line-height: 1.75;
	-webkit-text-size-adjust: 100%;
	-ms-overflow-style: none;
	scrollbar-width: none;
    @media only screen and (min-width: 960px) {
        font-size: 1.8rem;
    }
    @media only screen and (min-width: 1200px) {
        font-size: 2.4rem;
    }
}
html body {
	font-family: "Helvetica Neue", "Helvetica", "Zen Kaku Gothic Antique", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 700;
}
body::-webkit-scrollbar {
	display: none;
}
button,
input,
select,
textarea {
	color: #392f2e;
	font-size: 14px; /* sizes= 21px to 11px */
}
a,a:hover {
	color: inherit;
	text-decoration: none;
}
.read {
    margin: 0;
    font-style: oblique;
    line-height: 2.325;
    small {
        font-size: 60%;
        font-weight: 900;
    }
}
.read-large {
    font-size: 1.8rem;
    @media only screen and (min-width: 960px) {
        font-size: 2.2rem;
    }
    @media only screen and (min-width: 1200px) {
        font-size: 2.4rem;
    }
}
.read-xlarge {
    font-size: 2.4rem;
    @media only screen and (min-width: 960px) {
        font-size: 2.8rem;
    }
    @media only screen and (min-width: 1200px) {
        font-size: 3.6rem;
    }
}

/* Components
------------------ */
.box-cover {
    position: relative;
    z-index: 1;
}
.box01 {
    position: relative;
    display: block;
    padding: 40px;
    border-radius: 20px;
    background-color: #DFC89E;
    &::before {
        content: '';
        pointer-events: none;
        position: absolute;
        left: 20px; top: 20px;
        display: block;
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        border: #422D07 2px dashed;
        border-radius: 16px;
        background-image :
    linear-gradient(to right, #422D07, #422D07 3px, transparent 3px, transparent 8px),  /* 上の線 */
    linear-gradient(to bottom, #422D07, #422D07 3px, transparent 3px, transparent 8px), /* 右の線 */
    linear-gradient(to left, #422D07, #422D07 3px, transparent 3px, transparent 8px),  /* 下の線 */
    linear-gradient(to top, #422D07, #422D07 3px, transparent 3px, transparent 8px);   /* 左の線 */
  background-size:
    8px 2px,  /* 上の線 */
    2px 8px, /* 右の線 */
    8px 2px,  /* 下の線 */
    2px 8px;   /* 左の線 */
  background-position:
    left top,  /* 上の線 */
    right top, /* 右の線 */
    right bottom,  /* 下の線 */
    left bottom;   /* 左の線 */
  background-repeat:
    repeat-x,  /* 上の線 */
    repeat-y, /* 右の線 */
    repeat-x,  /* 下の線 */
    repeat-y;   /* 左の線 */
    }
    &::after {
        content: '';
        pointer-events: none;
        position: absolute;
        right: -10px; bottom: -10px;
        z-index: -1;
        display: block;
        width: 100%; height: 100%;
        background-color: #ffffff00;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
        border-radius: 20px;
    }
    @media only screen and (min-width: 1200px) {
        &::after {
            right: -20px; bottom: -20px;
        }
    }
    .list {
        counter-reset: number 0;
        padding-left: 0;
    }
    .list li {
        position: relative;
        margin-right: 35px;
        padding: 0 0 0 35px;
        list-style: none;
    }
    .list li::after {
        counter-increment: number 1;
        content: counter(number)'';
        position: absolute;
        left: 7px; top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 21px; height: 21px;
        background-color: #000;
        border-radius: 50%;
        font-size: 1.2rem;
        letter-spacing: 0;
        color: #fff;
        @media only screen and (min-width: 960px) {
            font-size: 1.6rem;
            width: 28px; height: 28px;
        }
    }
    .list li:not(:first-child) {
        margin-top: 7px;
        border-top: 2px dotted #422D07;
    }
    .list-food li:not(:first-child) {
        margin-top: 0px;
    }
    .list li:not(:first-child) dl {
        padding-top: 9px;
    }

}
.activity .box01 {
    background-color: #FFF200;
    & .heading {
        padding-bottom: 10px;
        border-bottom: 2px solid #000;
        font-size: 3.5rem;
        font-weight: bold;
    }
}
.list dl {
    padding-right: 7px;
    .item-desc {
        font-size: 1.8rem;
        line-height: 1.25;
        letter-spacing: 0.025rem;
        @media only screen and (min-width: 960px) {
            font-size: 2.1rem;
        }
    }
    .item-name {
        margin: 0;
        font-size: 1.2rem;
        opacity: .8;
        @media only screen and (min-width: 960px) {
            font-size: 1.4rem;
        }
        &::before {
            content: '【';
        }
        &::after {
            content: '】';
        }
    }
}
.hero-cover {
    position: relative;
    &::before {
        content: '';
        position: absolute;
        left: 0; top: 0;
        z-index: 1;
        display: block;
        width: 20px; height: 100%;
        background: url(../images/hero/frame-border-left.svg) repeat-y top left/ contain;
    pointer-events: none;
    }
    &::after {
        content: '';
        position: absolute;
        right: 0; top: 0;
        z-index: 1;
        display: block;
        width: 20px; height: 100%;
        background: url(../images/hero/frame-border-right.svg) repeat-y top right/ contain;
        pointer-events: none;
    }
}
.hero::before,
.hero::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    z-index: 1;
    display: block;
    width: 100%; height: 20px;
    background: url(../images/hero/frame-border-top.svg) repeat-x top center/ 200%;
    pointer-events: none;
    @media only screen and (min-width: 960px) {
        background-size: contain;
    }
}
.hero::before {
    top: auto; bottom: 0;
    background: url(../images/hero/frame-border-bottom.svg) repeat-x bottom center/ 200%;
    @media only screen and (min-width: 960px) {
        background-size: contain;
    }
}
.hero_read-cover {
    position: relative;
    margin: auto;
    &::before {
        content: '';
        position: absolute;
        left: -20px; top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: block;
        width: 37px; height: 42px;
        background: url(../images/hero/hero_read_obj-left.svg) no-repeat center center / contain;
    }
    &::after {
        content: '';
        position: absolute;
        right: -20px; top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: block;
        width: 37px; height: 42px;
        background: url(../images/hero/hero_read_obj-right.svg) no-repeat center center / contain;
    }
    @media only screen and (min-width: 1200px) {
        width: 100%;
    }
    .read {
        line-height: 1.25;
        text-wrap: nowrap;
        @media only screen and (min-width: 1200px) {
            line-height: 1.75;
        }
    }
}
.hero_read-bottom {
    .read {
        letter-spacing: 0;
        -webkit-transform: rotateY(45deg);
        transform: rotateY(45deg);
        font-weight: 900;
        font-size: 1.8rem;
        @media only screen and (min-width: 960px) {
            font-size: 4.8rem;
        }
    }
}
.section01 .hero_read .read {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-wrap: nowrap;
}
.section01 .hero_read span {
    padding: 7px 21px;
    background-color: #fff;
    box-shadow: 4px 4px 0 #555;
}
.section01 .hero_read span mark {
    color: #000;
}
.hero_read span.read-bottom {
    margin-top: 7px;
}
@media only screen and (min-width: 1200px) {
    .hero-cover::before,
    .hero-cover::after,
    .hero::before,
    .hero::after {
        position: fixed;
        z-index: 1000;
    }
    .hero::before,
    .hero::after {
        background-size: contain;
    }
}
.section02_heading {
    position: absolute;
    left: 40px; top: -50px;
    width: 225px;
    @media only screen and (min-width: 1200px) {
        left: 120px; top: -120px;
        width: 445px;
    }
}
.section02_list-cover {
    position: relative;
    min-height: 135px;
    @media only screen and (min-width: 1200px) {
        padding-top: 60px;
        min-height: 380px;
    }
}
.section02_list {
    left: 0; top: 0;
    width: 100%;
    @media only screen and (min-width: 1600px) {
        transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        width: 1600px;
    }
    .item {
        padding: 35px 0 24px;
    }
    .item-heading {
        position: absolute;
        left: 50%; top: 0px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        margin: 0; padding: 14px 21px;
        &::before {
            content: '';
            position: absolute;
                left: 0; top: 0;
                z-index: -1;
                width: 100%; height: 100%;
                background-color: #EBB731;
                -webkit-transform: skewX(-12deg);
                transform: skewX(-12deg);
                box-shadow:  4px 4px 0 #000;
                
            }

        }
        .heading {
            margin: 0;
            color: #111;
            text-shadow: 1px -1px 0px #EBB731, -1px -1px 0 #EBB731,1px 1px 0 #EBB731, -1px 1px 0 #EBB731;
            text-wrap: nowrap;
            font-weight: 700;
            font-size: 2.4rem;
            @media only screen and (min-width: 1200px) {
                font-size: 3.6rem;
        }
    }
    .item-desc {
        position: absolute;
        left: 50%; bottom: 0px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
        padding: 14px 21px;
        background-color: #fff;
        border-radius: 14px;
        border: 1px solid #000;
        text-wrap: nowrap;
        font-size: 1.4rem;
        @media only screen and (min-width: 1200px) {
            font-size: 1.8rem;
        }
    }
}

.section03_list-cover {
    .item {
        position: relative;
        display: block;
        min-height: 180px;
        padding: 10px;
        border-radius: 20px;
        background-color: #ddd;
        @media only screen and (min-width: 640px) {
            min-height: 320px;
        }
        @media only screen and (min-width: 960px) {
            min-height: 360px;
        }
        @media only screen and (min-width: 1200px) {
            min-height: 420px;
        }
        &::before {
            content: '';
            position: absolute;
            left: 10px; top: 10px;
            z-index: 0;
            display: block;
            width: 100%; height: 100%;
            background-color: #fff;
            border-radius: 20px;
        }
        &::after {
            content: '';
            position: absolute;
            left: 0; top: 0;
            width: 100%; height: 100%;
            border-radius: 20px;
            border: 4px solid #fff;
            box-sizing: border-box;
        }
        .item-img {
            position: absolute;
            left: 0; top: 0;
            display: block;
            width: 100%; height: 100%;
            border-radius: 20px;
        }
        .item-heading {
            position: absolute;
            left: 50%; bottom: -20px;
            z-index: 1;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            display: block;
            height: auto;
            width: auto;
            padding: 7px 14px;
            line-height: 1.25;
            text-align: center;
            text-wrap: nowrap;
            font-style: oblique;
            font-weight: 700;
            font-size: 1.8rem;
            color: #111;
            text-shadow: 1px -1px 0px #EBB731, -1px -1px 0 #EBB731,1px 1px 0 #EBB731, -1px 1px 0 #EBB731;
            @media only screen and (max-width: 375px) {
                font-size: 1.6rem;
            }
            @media only screen and (min-width: 640px) {
                font-size: 2.6rem;
                padding: 14px 21px;
                
            }
            @media only screen and (min-width: 1200px) {
                font-size: 3.6rem;
            }
            &::after {
                content: '';
                position: absolute;
                left: 0; top: 0;
                z-index: -1;
                width: 100%; height: 100%;
                background-color: #EBB731;
                -webkit-transform: skewX(-12deg);
                transform: skewX(-12deg);
            }
        }
    }
}
.section03 {
    .section_heading {
        display: flex;
        justify-content: center;
    }
    .section_heading .heading {
        max-width: 80%;
        @media only screen and (min-width: 960px) {
            max-width: 100%;
        }
    }
}
.section03 .box01 .heading {
    padding: 21px 0 14px;
    margin: 0;
            line-height: 1.25;
            text-wrap: nowrap;
            font-style: oblique;
            font-weight: 900;
            font-size: 3.2rem;
            color: #EBB731;
            -webkit-text-stroke: 1px #000;
            text-shadow: 4px 4px #000;
            @media only screen and (min-width: 640px) {
                font-size: 3.8rem;
            }
            @media only screen and (min-width: 1200px) {
                font-size: 4.8rem;
                -webkit-text-stroke: 2px #000;
            }
}
.section03 .box01,
.section05 .box01 {
    padding: 40px;
    @media only screen and (min-width: 1200px) {
        padding: 60px;
    }
    .list {
        margin: 21px 0 0;
        height: 340px;
        overflow-y: scroll;
        font-size: 2.4rem;
        -ms-overflow-style: none;
        scrollbar-width: none;
        @media only screen and (max-width: 375px) {
            font-size: 1.8rem;
        }
        @media only screen and (min-width: 960px) {
            font-size: 2.8rem;
        }
        &::-webkit-scrollbar{
            display: none;
          }
        .simplebar-track.simplebar-vertical {
            width: 20px;
            background-color: #FFFBC0; 
        }
        .simplebar-scrollbar:before {
            background: #EBB731;
            border-radius: 0;
        }
    }
}

.section04 {
    .heading-cover {
        position: relative;
        z-index: 1;
        pointer-events: none;
        @media only screen and (max-width: 430px) {
            max-width: 50%;
        }
    }
    .section04_list {
        .item {
            padding-bottom: 100px;
        }
        .item-heading {
            position: absolute;
            right: -20px; bottom: 20px;
            width: 90%;
            @media only screen and (max-width: 375px) {
                width: 105%;
            }
            @media only screen and (min-width: 960px) {
                bottom: 0;
            }
            
        }
    }
}
@media only screen and (max-width: 430px) {
    .section04_list  .uk-slider-items {
        .item {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transition: all .3s .2s;
            transition: all .3s .2s;
        }
    }
    .section04_list  .uk-active .item {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}
.section06 {
    .section_heading {
        position: absolute;
        left: -24px; top: -24px;
        z-index: 1;
    }
    .box01 {
        padding-top: 84px;
    }
    .access_heading {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 42px 0;
        background-color: #FFFBC0;
        &::before {
            content: '';
            position: absolute;
            left: 0; top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            width: 100%; height: calc(100% - 36px);
            border: 2px dashed #422D07;
            border-left: none; border-right: none;
        }
        .heading {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 700;
            @media only screen and (max-width: 375px) {
                font-size: 1.6rem;
            }
            @media only screen and (min-width: 640px) {
                font-size: 2.4rem;
            }
            @media only screen and (min-width: 960px) {
                font-size: 2.4rem;
            }
        }
    }
    .map {
        margin-top: 24px;
    }
    .access {
        margin: 42px 0 24px;
        padding: 24px 14px;
        border: 2px dashed #422D07;
        border-left: none; border-right: none;
        @media only screen and (min-width: 640px) {
            font-size: 2.4rem;
        }
    }
}
.section07 {
    .section_heading {
        .heading {
            font-size: 3.6rem;
            font-weight: 900;
            @media only screen and (min-width: 640px) {
                font-size: 6.2rem;
            }
            @media only screen and (min-width: 1200px) {
                font-size: 14.4rem;
            }
            small {
                display: block;
                font-size: 2.4rem;
                @media only screen and (min-width: 640px) {
                    font-size: 4.2rem;
                }
                @media only screen and (min-width: 1200px) {
                    font-size: 6.4rem;
                }
            }
        }
    }
    .section07_desc-list {
        border-bottom: 4px solid #000;
        dt,dd {
            padding: 14px 0;
            border-top: 4px solid #000;
        }
        dd {
            padding-top: 0;
            border: none;
        }
        @media only screen and (min-width: 640px) {
            font-size: 2.4rem;
        }
        @media only screen and (min-width: 960px) {
            dt,dd {
            padding: 14px 0;
            border-top: 4px solid #000;
        }
        }
    }
}

header {
    position: fixed;
    z-index: 1000;
    width: 100%;
    padding: 21px;
    box-sizing: border-box;
    @media only screen and (min-width: 1200px) {
        padding: 42px;
    }
    h1 {
        display: inline-block;
        pointer-events: all;
    }
    & .global_menu__modal img {
        width: 42px; height: 42px;
        @media only screen and (min-width: 1200px) {
            width: 80px; height: 80px;
        }
    }
}
#modal_menu.uk-modal-container .uk-modal-dialog {
    width: 600px;
    box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.23);
    border-radius: 10px;
}
.modal_menu__link {
    display: flex;
	margin: 0; padding: 0;
	list-style: none;
}
.modal_menu__link li {
	margin: 0;
	border-bottom: 1px solid #ddd;
}
.modal_menu__link li a {
	display: block;
	position: relative;
	padding: 15px 0;
    font-size: 1.5rem;
	font-weight: bold;
}
.modal_menu__link a::after {
	display: block;
	position: absolute;
	right: 20px; top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	content: '\f105';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

footer {
    .footer_meta {
        display: flex;
        justify-content: center;
        font-size: 1.8rem;
        font-weight: 700;
        @media only screen and (min-width: 1200px) {
            font-size: 3rem;
        }
    }
}

.outline_inner-list {
    font-size: 1.2rem;
    list-style: disc;
    list-style-position: inside;
    @media only screen and (min-width: 1200px) {
        font-size: 1.5rem;
    }
}

.s-feature_list {
    & a {
        display: inline-block;
        transition: all .3s;
        &:hover {
            transform: scale(1.025);
        }
    }
}
.s-qa {
    & .uk-accordion-title {
        padding: 14px;
        position: relative;
        background-color: rgb(202, 14, 14);
        border-radius: 20px;
        color: #fafeff;
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
        transition: all .5s;
        &::before {
            content: '\f067';
            font-family: 'Font Awesome 5 Free';
            float: none;
            position: absolute;
            right: 20px; top: 50%;
            width: 30px; height: 30px;
            display: flex;
            justify-content: center;
            padding-left: 0;
            line-height: 30px;
            background-color: #fff;
            background-image: none;
            border-radius: 50%;
            color: rgb(202, 14, 14);
            transform: translateY(-50%);
        }
    }
    & .uk-open .uk-accordion-title {
        border-radius: 20px 20px 0 0;
        &::before {
            content: '\f068';
        }
    }
    & .uk-accordion-content {
        margin: 0; padding: 20px;
        background-color: #fff;
        border-radius: 0 0 14px 14px;
    }
    & .inner-item {
        margin-bottom: 20px;
        font-size: 1.5rem;
        &::before {
            content: 'Q:';
            margin-right: 14px;
            color: rgb(202, 14, 14);
        }
    }
    & dd.inner-item {
        margin-bottom: 32px;
        font-weight: normal;
        &::before {
            content: 'A:';
            font-weight: bold;
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
}

.btn {
    padding: 14px 21px;
    background-color: #FFF200;
    border: 2px solid #a47808;
    border-radius: 200px;
    box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.23);
    font-size: 1.5rem;
    font-weight: bold;
    transition: all .3s;
    &:hover {
        box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.42);
    }
}