html, body { height: 100%; font-size: 100%; margin: 0 auto; padding: 0; text-align: center; line-break: anywhere; font-family: sans-serif; }
a { display: inline-block; text-decoration: none; zoom: 1; }
img, object, embed, picture { display: block; max-width: 100%; height: auto; width : auto; vertical-align: bottom; border: 0; margin: 0; padding: 0; }

.character,.navbar,.sub-navbar,.footer-nav,.pc-carousel-slider,.tab-radio { display: none; }

.egaocolor { color: #eb5d2e; }
.afurerucolor { color: #0082c9; }
.miraicolor { color: #8559a2; }
.tukurucolor { color: #94c522; }

.m-plus-rounded-1c-thin { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 100; font-style: normal; }
.m-plus-rounded-1c-light { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 300; font-style: normal; }
.m-plus-rounded-1c-regular { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 400; font-style: normal; }
.m-plus-rounded-1c-medium { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 500; font-style: normal; }
.m-plus-rounded-1c-bold { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 700; font-style: normal; }
.m-plus-rounded-1c-extrabold { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-style: normal; }
.m-plus-rounded-1c-black { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 900; font-style: normal; }
.zen-maru-gothic-light { font-family: "Zen Maru Gothic", sans-serif; font-weight: 300; font-style: normal; }
.zen-maru-gothic-regular { font-family: "Zen Maru Gothic", sans-serif; font-weight: 400; font-style: normal; }
.zen-maru-gothic-medium { font-family: "Zen Maru Gothic", sans-serif; font-weight: 500; font-style: normal; }
.zen-maru-gothic-bold { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-style: normal; }
.zen-maru-gothic-black { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-style: normal; }

header { position: relative; height: auto; width: 100%; margin: 0 auto; padding-bottom: 0.2em; background-color: #ffdab9; }
h1 { display: inline-block; position: relative; font-size: 0.8em; font-weight: normal; margin: 0 auto; padding-top: 0.2em; }
.headlogo { position: relative; width: 90%; margin: 0 auto; }

.hamburger-morph { position: fixed; top: 5em; right: 1em; z-index: 1000; width: 3em; height: 3em; padding: 0; border: none; background: transparent; cursor: pointer; background-color: rgba(0, 166, 59, 0.5); border-radius: 3em; }
.hamburger-morph__icon { width: 100%; height: 100%; }
.hamburger-morph__line { fill: none; stroke: #000; stroke-width: 6; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); }
.hamburger-morph__line:nth-child(1) { stroke-dasharray: 60 207; }
.hamburger-morph__line:nth-child(2) { stroke-dasharray: 60 60; }
.hamburger-morph__line:nth-child(3) { stroke-dasharray: 60 207; }
.hamburger-morph.active .hamburger-morph__line:nth-child(1) { stroke-dasharray: 90 207; stroke-dashoffset: -134; }
.hamburger-morph.active .hamburger-morph__line:nth-child(2) { stroke-dasharray: 1 60; stroke-dashoffset: -30; }
.hamburger-morph.active .hamburger-morph__line:nth-child(3) { stroke-dasharray: 90 207; stroke-dashoffset: -134; }
.nav-morph { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 166, 59, 0.7); clip-path: circle(0% at calc(100% - 44px) 6.5em); transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1); z-index: 900; }
.nav-morph.active { clip-path: circle(150% at calc(100% - 44px) 44px); }
.nav-morph__wrapper { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.nav-morph__list { margin: 0; padding: 0; list-style: none; text-align: center; }
.nav-morph__item { opacity: 0; transform: translateY(10em); transition: opacity 0.4s ease, transform 0.4s ease; }
.nav-morph.active .nav-morph__item { opacity: 1; transform: translateY(0);}
.nav-morph.active .nav-morph__item:nth-child(1) { transition-delay: 0.3s; }
.nav-morph.active .nav-morph__item:nth-child(2) { transition-delay: 0.4s; }
.nav-morph.active .nav-morph__item:nth-child(3) { transition-delay: 0.5s; }
.nav-morph.active .nav-morph__item:nth-child(4) { transition-delay: 0.6s; }
.nav-morph.active .nav-morph__item:nth-child(5) { transition-delay: 0.7s; }
.nav-morph.active .nav-morph__item:nth-child(6) { transition-delay: 0.8s; }
.nav-morph.active .nav-morph__item:nth-child(7) { transition-delay: 0.9s; }
.nav-morph.active .nav-morph__item:nth-child(8) { transition-delay: 1s; }
.nav-morph.active .nav-morph__item:nth-child(9) { transition-delay: 1.1s; }
.nav-morph.active .nav-morph__item:nth-child(10) { transition-delay: 1.2s; }
.nav-morph.active .nav-morph__item:nth-child(11) { transition-delay: 1.3s; }
.nav-morph.active .nav-morph__item:nth-child(12) { transition-delay: 1.4s; }
.nav-morph.active .nav-morph__item:nth-child(13) { transition-delay: 1.5s; }
.nav-morph.active .nav-morph__item:nth-child(14) { transition-delay: 1.6s; }
.nav-morph.active .nav-morph__item:nth-child(15) { transition-delay: 1.7s; }
.nav-morph.active .nav-morph__item:nth-child(16) { transition-delay: 1.8s; }
.nav-morph.active .nav-morph__item:nth-child(17) { transition-delay: 1.9s; }
.nav-morph__link { position: relative; display: inline-block; font-size: 1.2em; color: #fff; text-decoration: none; overflow: hidden; -webkit-text-stroke: 0.1em #00a63b; text-stroke: 0.1em #00a63b; paint-order: stroke; }
.nav-morph__text,
.nav-morph__link:hover .nav-morph__text { transform: translateY(-100%); }
.nav-morph__link:hover .nav-morph__hover { transform: translateY(-100%); }

main { position: relative; height: auto; width: 100%; margin: 0 auto; padding-bottom: 1em; }

.main-image { display: block; width: 100%; height: auto; margin: 0 auto; }

.main-content01 { position: relative; height: auto; width: 100%; margin: 0 auto; padding-bottom: 1.1em; background-color: #ffdab9; }
.main-content0101 { position: absolute; bottom: 1em; left: 50%; transform: translate(-50%, 0); height: 4em; width: 8em; border-top-left-radius: 4em; border-top-right-radius: 4em; margin: 0 auto; background-color: #ffdab9; }
.main-guide { display: block; width: 44%; height: auto; margin: 0 auto; }
.page-title { position: relative; display: inline-block; width: 140%; right: 20%; bottom: 0; height: auto; margin: 0 auto; padding: 0; font-size: 1em; color: #808080; -webkit-text-stroke: 0.2em #ffdab9; text-stroke: 0.2em #ffdab9; paint-order: stroke; }

.smt-carousel-slider { position: relative; width: 100%; overflow: hidden; background-color: #ffdab9; }
.smt-carousel-slider img { width: 100%; height: auto; vertical-align: top; }
.smt-carousel-slider .slide-wrap { position: absolute; display: flex; width: 300%; /* 画像数*100%を設定*/ top: 0; left: 0; z-index: 0; animation: smt-carousel-slider 15s infinite; /*スライダーアニメーション全体時間*/ animation-delay: 1s; /*スライダー開始時間*/}
.smt-carousel-slider .slide-wrap-main { width: 100%; z-index: 1; animation: smt-carousel-slider-main 15s infinite; animation-delay: 1s; }
.smt-carousel-slider .slide { width: 100%; }

@keyframes smt-carousel-slider { 0% { transform: translateX(0); }
 31.3% { transform: translateX(calc(1 / 3 * -100%)); }
 33.3% { transform: translateX(calc(1 / 3 * -100%)); }
 64.6% { transform: translateX(calc(2 / 3 * -100%)); }
 66.6% { transform: translateX(calc(2 / 3 * -100%)); }
 98% { transform: translateX(calc(3 / 3 * -100%)); }
 100% { transform: translateX(calc(3 / 3 * -100%)); } }

@keyframes smt-carousel-slider-main { 0% { transform: translateX(100%); }
 66.6% { transform: translateX(100%); }
 98% { transform: translateX(0%);} }

.element-maincopy { position: relative; width: 90%; height: auto; padding: 1em 0; margin: 0 auto; text-align: left; color: #7f4f21; font-weight: 700; }

/* タブエリア全体 */
.tab-area { width: 95%; margin: 1em auto 0; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
/* タブメニュー部分 */
.tab-menu { display: block; float: left; width: calc(100% / 3); /* タブの数で割る */ text-align: center; padding: 1em 0; background-color: #f2f2f2; border-bottom: 3px solid #ccc; cursor: pointer; /* クリックできることを示す */ transition: background-color 0.2s; /* 背景色の変化を滑らかに */ }
/* タブメニューにカーソルが乗った時 */
.tab-menu:hover { opacity: 0.8; }
/* コンテンツは最初はすべて非表示 */
.tab-content-item { display: none; padding: 1em; clear: both; /* floatを解除 */ }

/* ▼ここからが切り替えの核となる部分▼ */
/* チェックされたラジオボタンに続くコンテンツを表示 */
#tab01:checked ~ #tabContent01,
#tab02:checked ~ #tabContent02,
#tab03:checked ~ #tabContent03 { display: block; }

/* チェックされたラジオボタンに対応するタブメニューのスタイルを変える */
#tab01:checked ~ #tabMenu01,
#tab02:checked ~ #tabMenu02,
#tab03:checked ~ #tabMenu03 { background-color: #FF9999; border-color: #FF6666; color: white; }


.tab-content { width: 100%; height: auto; margin: 0 auto; padding-bottom: 1em; }
.tab-content-photo { width: 90%; height: auto; margin: 0 auto; }
.tab-content-text { width: 100%; height: auto; margin: 0 auto; }
.tab-content-copy { text-align: left; width: 100%; height: auto; margin: 0 auto; padding-top: 0.5em; }


.element-title { display: flex; position: relative; width: 100%; height: auto; font-size: 1.2em; align-items: center; justify-content: center; padding-bottom: 0.2em; margin: 0 auto; color: #7f4f21; }
.element-title::before,.element-title::after { border-radius: 5px; content: ""; height: 5px; width: 60px; }
.element-title::before { background: linear-gradient(to right, #ffe600, #e478ab); margin-right: 15px; }
.element-title::after { background: linear-gradient(to right, #e478ab, #ffe600); margin-left: 15px; }


footer { position: relative; height: auto; width: 100%; bottom: 0; margin: 0 auto; padding: 0.5em 0; background-color: #ffdab9; }

.main-content05 { display: flex; position: relative; flex-wrap: wrap; height: auto; width: 90%; margin: 0 auto; padding: 0 0 0.5em; justify-content: space-between; }

.main-content0501 { position: relative; height: auto; width: 80%; margin: 0 auto; padding: 0; }
.contentitem06 { width: 80%; height: auto; margin: 0; padding: 0; }
.contentitem07 { width: 100%; height: auto; text-align: left; font-size: 0.8em; margin: 0; padding: 0; }

.main-content0502 { position: relative; height: auto; width: 20%; margin: 0 auto; padding: 0; }
.sns { width: 100%; margin: 0; padding: 0; }
.contentitem08 { width: 70%; height: auto; margin: 0; padding: 0.5em 0; }

footer a { color: #000000; }
.copyright { position: relative; height: auto; width: auto; bottom: 0; margin: 0 auto; padding: 0; font-size: 0.7em; }




/* PC */
@media screen and (min-width:768px) {
.smtdrone,.brsmt,.hamburger-morph,.smt-carousel-slider { display: none; }
.brpc { display: inline-block; }

.pcdrone { display: block; }
main { padding-bottom: 5em;  }
h1 { font-size: 1em; left: 25%; }
.character { display: block; position: absolute; width: 13%; top: 2em; right: 4%; z-index: 5; }

.navbar { display: inline-block; width: 95%; padding: 0; }
.menu { display: flex; justify-content: center; list-style: none; margin: 0 auto; padding: 0; }
.menu-item { display: block; position: relative; font-size: 1em; width: auto; padding: 0 1em; }
.menu-link { display: block; color: #000000; text-decoration: none; padding: 0.7em 0.1em; margin-top: 1em; }
.menu-link:hover { background-color: #ffe5ce; }
.dropdown { position: absolute; top: 100%; left: 0; background-color: #ffdab9; list-style: none; margin: 0; padding: 0; min-width: 14em; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 5; }
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-link { display: block; color: #000000; text-decoration: none; padding: 1em; transition: background-color 0.3s ease; }
.dropdown-link:hover { background-color: #ffe5ce; }
.dropdown li:last-child .dropdown-link { border-bottom: none; }

.sub-navbar { display: inline-block; width: 100%; padding: 0; background-color: #ffdab9; }
.sub-menu-item { display: block; position: relative; font-size: 1.5em; width: 50%; }
.sub-menu-link { display: block; color: #000000; text-decoration: none; padding: 0.3em 0.1em; margin: 0; }
.sub-menu-link:hover { background-color: #ffe5ce; }

.main-content01 { padding-bottom: 1.1em; }
.main-content0101 { bottom: 1em; height: 15em; width: 30em; border-top-left-radius: 15em; border-top-right-radius: 15em; }
.page-title { font-size: 2em; }

.pc-carousel-slider { display: inline-block; position: absolute; z-index: 30; top: 33em; left: 8%; width: 20%; overflow: hidden; }
.pc-carousel-slider img { width: 100%; height: auto; vertical-align: top; }

.pc-carousel-slider .slide-wrap { width: 300%; /* 画像数*100%*/ position: absolute; display: flex; top: 0; left: 0; z-index: 0; animation: smt-carousel-slider 15s infinite; /*スライダーアニメーション全体時間*/ animation-delay: 1s; /*スライダー開始時間*/}
.pc-carousel-slider .slide-wrap-main { width: 100%; z-index: 1; animation: smt-carousel-slider-main 15s infinite; animation-delay: 1s; }
.pc-carousel-slider .slide { width: 100%; }

@keyframes pc-carousel-slider { 0% { transform: translateX(0); }
 31.3% { transform: translateX(calc(1 / 3 * -100%)); }
 33.3% { transform: translateX(calc(1 / 3 * -100%)); }
 64.6% { transform: translateX(calc(2 / 3 * -100%)); }
 66.6% { transform: translateX(calc(2 / 3 * -100%)); }
 98% { transform: translateX(calc(3 / 3 * -100%)); }
 100% { transform: translateX(calc(3 / 3 * -100%)); } }

@keyframes pc-carousel-slider-main {
 0% { transform: translateX(100%); }
 66.6% { transform: translateX(100%); }
 98% { transform: translateX(0%);} }

.element-maincopy { width: 60%; font-size: 1.5em; padding: 1em 0 0; }

.tab-area { width: 75%; font-size: 1.5em; }

.tab-content { display: flex; }
.tab-content-photo { width: 38%; height: auto; margin: 0 auto; }
.tab-content-text { width: 57%; height: auto; margin: 0 auto; }

.element-title { font-size: 2em; }
.element-title::before,.element-title::after { width: 200px; }


/* ページトップへ戻るボタン */
.page-top { display: none;/* 非表示 */ z-index: 1000; 
            position: fixed;/* ページ右下に固定 */
            right: 7%; width: 80px; height: 80px; border-radius: 50%; justify-content: center; background: rgba(235, 99, 1, 0.7) ; color: #FFF; bottom: 15%; text-decoration: none; text-align: center; margin: 10px 0; 
            cursor: pointer;/* カーソルをポインターに */ }
.pagetop__arrow { height: 35px; width: 35px; border-top: 4px solid #000; border-right: 4px solid #000; transform: translateY(75%) translateX(55%) rotate(-45deg); }

/* activeクラスが付与されたとき */
.page-top.active { display: block; }
/* ホバーしたとき */
.page-top:hover { opacity: 0.8; transition: 0.3s; }

.footer-nav { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-evenly; align-items: center; }
.footer-nav a { width: 33%; padding: 0.5% 0; }

.copyright { bottom: 0; margin: 0; padding: 0.25em 0; font-size: 1em; }


.main-content0501 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 50%; }
.contentitem06 { width: 50%; height: auto; margin: 0; padding: 0; }
.contentitem07 { width: 50%; height: auto; text-align: left; font-size: 1.2em; margin: 0; padding: 0; }

.main-content0502 { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; width: 30%; }
.sns { width: 50%; }
.contentitem08 { width: 45%; }

.main-content06 { display: block; width: 80%; height: auto; margin: 0 auto; padding: 1em 0; }