@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Vollkorn|Roboto);
body { margin: 0; position: relative; font-weight: 500; font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; -webkit-text-size-adjust: none; }

img { max-width: 100%; height: auto; }

a { text-decoration: none; transition: 300ms; color: inherit; }
a:hover { text-decoration: none; opacity: 0.8; }

p { margin-top: 0; margin-bottom: 1rem; }

h1, h2, h3, h4, h5 { margin-top: 0; margin-bottom: 1rem; }

@media (max-width: 767px) { .forpc { display: none; } }

@media (min-width: 768px) { .formobile { display: none; } }

.container-slim { max-width: 720px; width: 100%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; }

.no-ul-style { list-style: none; padding-left: 0; }

.kome-list { list-style: none; padding-left: 1rem; }
.kome-list > li::before { content: "＊"; }

header .logo { background-color: rgba(226, 242, 246, 0.1); padding: 0; box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.7); border-bottom: 3px solid #23B6BC; }
@media (max-width: 767px) { header .logo .tc { text-align: center; } }
header .logo img { height: 6rem; width: auto; }
@media (min-width: 768px) { header .logo img { margin-left: 30px; } }
header .logo .navul { display: block; padding-left: 0; margin: 0; height: 100%; color: #333; }
@media (min-width: 768px) { header .logo .navul { padding-right: 30px; display: flex; justify-content: flex-end; align-items: center; } }
header .logo .navul li { display: block; padding: 10px; text-align: center; }

.nav { background-color: #23B6BC; }
.nav .log { background-image: url(../img/logo.png); background-repeat: no-repeat; background-size: contain; background-position: center; min-height: 100px; min-width: 180px; }
.nav ul { padding: 0; margin: 0; list-style: none; }
@media (max-width: 767px) { .nav ul { margin-left: -15px; width: calc(100% + 30px); } }
.nav ul > li { display: block; padding: 5px; text-align: center; }
@media (min-width: 768px) { .nav ul > li { padding: 10px; } }
.nav ul > li img { height: 35px; width: auto; }
@media (min-width: 768px) { .nav ul > li img { height: 40px; } }

.menulist > ul { height: 0; overflow: hidden; transition: 500ms; margin: 0 !important; }
.menulist > ul > li { opacity: 0; }
.menulist:hover > ul { height: auto; display: block; margin: 15px 0 !important; }
.menulist:hover > ul > li { opacity: 1; }

.menulist-pc { position: relative; }
.menulist-pc .menuul { display: none; position: absolute; padding-left: 0; background-color: #fff; z-index: 1; left: -5rem; right: -5rem; border: 1px solid #23B6BC; }

.mainimg { background-image: url(../img/main.jpg); background-size: cover; background-position: 30% 50%; min-height: 80vh; position: relative; border-bottom: 3px solid #fac55e; }
.mainimg p { position: absolute; top: 0; bottom: 0; right: 0; left: 0; font-size: 1.5rem; text-align: center; height: 6rem; margin: auto; }
@media (min-width: 768px) { .mainimg p { left: auto; right: 4rem; font-size: 2rem; text-align: right; } }

main { min-height: 100vh; }

.pict { min-height: 300px; background-size: cover; position: relative; margin-bottom: 2rem; }
.pict.p1 { background-image: url(../img/1.jpg); background-position: top; }
.pict.p2 { background-image: url(../img/2.jpg); background-position: center; }
.pict.p3 { background-image: url(../img/4.jpg); background-position: center; }
.pict.p4 { background-image: url(../img/3.jpg); background-position: center; }
.pict .h-pict { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; color: #333; margin: auto; height: 4rem; padding: 1rem; }
@media (min-width: 768px) { .pict .h-pict { left: 5rem; right: auto; }
  .pict .h-pict.p2, .pict .h-pict.p3 { right: 5rem; left: auto; }
  .pict .h-pict.p4 { color: #fff; } }

.h-menu { font-size: 1.5rem; font-weight: normal; padding-left: 2rem; position: relative; z-index: 1; display: inline-block; margin: 1rem auto 1rem; }
.h-menu::before { display: block; content: ""; width: 4rem; height: 4rem; background-color: #e3d0c3; border-radius: 2rem; position: absolute; left: 0rem; top: -1.5rem; z-index: -1; }
.h-menu::after { display: block; content: ""; position: absolute; left: calc(2rem + 10px); right: -10px; bottom: 10px; top: calc(100% - 15px); background-color: #fac55e; z-index: -1; }

.h-profile { font-weight: normal; text-align: center; }
.h-profile i { display: inline-block; width: 1rem; height: 1rem; border-radius: 0.5rem; background-color: #fac55e; margin: 0 2rem; opacity: 0.9; position: relative; }
.h-profile i::before, .h-profile i::after { display: inline-block; content: ""; background-color: #fac55e; position: absolute; }
.h-profile i.first::before, .h-profile i.last::after { opacity: 1; width: 1.2rem; height: 1.2rem; border-radius: 0.6rem; }
.h-profile i.first::after, .h-profile i.last::before { opacity: 0.8; width: 0.8rem; height: 0.8rem; border-radius: 0.4rem; }
.h-profile i.first::before { top: -0.1rem; left: -1.5rem; }
.h-profile i.first::after { top: 0.1rem; right: -1.2rem; }
.h-profile i.last::before { top: 0.1rem; left: -1.2rem; }
.h-profile i.last::after { top: -0.1rem; right: -1.5rem; }

.time { font-size: 0.8rem; display: inline-block; }

.value { text-align: right; }
@media (min-width: 768px) { .value { margin-top: 2rem; } }
.value::before { content: "――― "; }

.footer { background-color: #23B6BC; padding: 30px 0; }
.footer .copy { text-align: center; color: #fff; padding: 10px; }
.footer ul { display: block; padding-left: 0; margin: 0; color: #fff; }
@media (min-width: 768px) { .footer ul { padding-right: 30px; display: flex; justify-content: flex-end; } }
.footer ul li { display: block; padding: 10px; text-align: center; }

.h-under { margin-top: 1.5rem; margin-bottom: 2rem; padding: 1rem 0; text-align: center; position: relative; background: none; color: inherit; font-size: 1.5rem; }
.h-under::after { content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -1em; width: 2em; border-top: 2px solid; }

.box-link { text-align: center; max-width: 500px; margin: 2rem auto; }
.box-link a, .box-link input { display: inline-block; text-decoration: none; transition: 0.3s ease-in-out; color: inherit; border: 1px solid #000; border-radius: 0 !important; background: none; position: relative; padding: 1em 2.5em; min-width: 55%; cursor: pointer; }
.box-link a:hover, .box-link input:hover { opacity: 0.4; transform: translate3d(0px, 3px, 1px); }
.box-link input { -webkit-appearance: none !important; text-align: center; }
.box-link input:focus { outline: none; }
.box-link input:hover { cursor: pointer; }

.send-disable input { border-color: #AAA; color: #AAA; }
.send-disable input:hover { opacity: 1; transform: none; cursor: default; }

/*
tab .tab_list li の％で横並びの数が変わります。 各タブのデザインをする際は　.tab_list li をコピーして横並び数を変更 デフォルトは分岐が　@media(min-width:768px)　で１列　→４列
*/
.tab_list li { transition: 0.3s; }
.tab_list li.select { background-color: rgba(255, 255, 255, 0.2); }
.tab_list li:hover { background-color: rgba(255, 255, 255, 0.2); cursor: pointer; }

.hide { display: none; }

.form { background-color: #F4EFE1; margin: 0 auto; }
.form > div { padding: 15px; max-width: 960px; margin: 0 auto; }
.form > div input, .form > div textarea, .form > div select { padding: 10px; width: 100%; }
.form > div input[type="text"], .form > div input[type="email"], .form > div textarea { font-size: 16px; }
.form > div textarea { height: 10rem; overflow: auto; }
.form > div input[type="radio"], .form > div input[type="checkbox"] { width: auto; }

.formtr { max-width: 960px; margin: 0 auto; }
.formtr th { text-align: right; }
@media (max-width: 767px) { .formtr th { border-bottom: 1px solid #23B6BC; padding-bottom: 0 !important; } }
.formtr td { text-align: left; }
.formtr th, .formtr td { padding: 10px; width: 50%; }
@media (max-width: 767px) { .formtr th, .formtr td { display: block; width: 100%; text-align: center; } }

input:required:invalid { background-color: rgba(255, 0, 0, 0.1); }

.ameblo { background-color: #F4EFE1; padding-bottom: 2rem; border-top: 3px solid #fac55e; }

.ggmap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.ggmap iframe, .ggmap object, .ggmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.shopli { list-style: none; padding-left: 0; max-width: 690px; margin: 0 auto; }
.shopli li { padding: 10px; border-top: 1px solid #000; }
.shopli li:last-child { border-bottom: 1px solid #000; }
.shopli .date { display: block; }
@media (min-width: 768px) { .shopli .date { display: inline-block; width: 8rem; } }

#campain { background-color: #F4EFE1; padding: 1rem 0; border-bottom: 3px solid #fac55e; }

/* nav.css */
.button_container { position: fixed; top: 13px; right: 2%; height: 27px; width: 35px; cursor: pointer; z-index: 100; -webkit-transition: opacity .25s ease; transition: opacity .25s ease; }

.button_container:hover { opacity: .7; }

.button_container.active .top { -webkit-transform: translateY(11px) translateX(0) rotate(45deg); transform: translateY(11px) translateX(0) rotate(45deg); background: #FFF; }

.button_container.active .middle { opacity: 0; background: #FFF; }

.button_container.active .bottom { -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg); transform: translateY(-11px) translateX(0) rotate(-45deg); background: #FFF; }

.button_container span { background-color: #23B6BC; border: none; height: 2px; width: 100%; border-radius: 1px; position: absolute; top: 0; left: 0; -webkit-transition: all .35s ease; transition: all .35s ease; cursor: pointer; }

.button_container span:nth-of-type(2) { top: 11px; }

.button_container span:nth-of-type(3) { top: 22px; }

.ooverlay { z-index: 2; position: fixed; background: #000000 !important; top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; -webkit-transition: opacity .35s, visibility .35s, height .35s; transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; }

.ooverlay.open { opacity: .9; visibility: visible; height: 100%; }

.ooverlay.open li { -webkit-animation: fadeInRight .5s ease forwards; animation: fadeInRight .5s ease forwards; -webkit-animation-delay: .35s; animation-delay: .35s; }

.ooverlay.open li:nth-of-type(2) { -webkit-animation-delay: .4s; animation-delay: .4s; }

.ooverlay.open li:nth-of-type(3) { -webkit-animation-delay: .45s; animation-delay: .45s; }

.ooverlay.open li:nth-of-type(4) { -webkit-animation-delay: .50s; animation-delay: .50s; }

.ooverlay nav { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; overflow-y: scroll; }

.ooverlay ul { list-style: none; padding: 0; margin: 10vh auto; }

.ooverlay ul li { display: block;   /*  height: 25%;
height: calc(100% / 4);
min-height: 50px; */ font-size: 1.2em; position: relative; opacity: 0; }

.ooverlay ul li a { display: block; position: relative; color: #FFF; text-decoration: none; overflow: hidden; padding: 10px; }

.ooverlay ul li a:hover:after, .ooverlay ul li a:focus:after, .ooverlay ul li a:active:after { width: 100%; }

.ooverlay ul li a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 1px; background: #FFF; -webkit-transition: .35s; transition: .35s; }

.ooverlay div a { color: #fff; text-decoration: none; overflow: hidden; font-size: 1.5em; padding: 30px; }

@-webkit-keyframes fadeInRight { 0% { opacity: 0; left: 20%; }
  100% { opacity: 1; left: 0; } }
@keyframes fadeInRight { 0% { opacity: 0; left: 20%; }
  100% { opacity: 1; left: 0; } }