@charset "UTF-8";

body { font-size: 14px!important; font-family: "Meiryo"!important; color: #444444; margin: 0px; padding: 0px; word-wrap: break-word; word-break: break-all; }

header { position: fixed; top: 0px; left: 0px; width: 100%; height: 45px; background-color: #08C7C9; text-align: center; z-index: 1000; }
header .h_inner {max-width:1080px; width:100%; margin:0 auto; text-align:right;}
header .h_inner .empty {float:right; display:inline-block; width:13em; height:100%;}
header .text { font-size: 17px; font-weight: bold; color: #fff; padding: 9px 10px 0px 0px; display: inline-block; vertical-align: middle; }
header .telephone { font-size: 26px; font-family: "Serif"; font-weight: bold; color: #fff; padding: 3px 20px 0px 0px; display: inline-block; vertical-align: middle; }
header button.reservation { font-size: 14px; font-family: "Meiryo"; color: #C28E2E; border: 2px solid #DCDCDC; border-radius: 5px; background-color: #F8FEFE; margin:5px 0px 0px; padding: 3px 10px; display: inline-block; vertical-align: middle; cursor: pointer; }
header .back-top { position: fixed; bottom: 30px; right: 30px; }

footer { color: #fff; background-color: #009193; padding: 20px 0px 20px 0px; text-align: right; }

a:link { color: #4A7AB2; text-decoration: none; }
a:active { color: #4A7AB2; text-decoration: none; }
a:visited { color: #4A7AB2; text-decoration: none; }
a:hover { color: #4A7AB2; text-decoration: none; }

#map { width: 98%; height: 500px; margin: 10px 0px 10px 0px; }
.container { width: 1080px; margin: 0 auto; }
.pc { display: block; }
.sp { display: none; }
.spacer { margin-top: 20px; }

#area-top { width: 100%; background: url(/public/images/template/1/1/back.jpg) no-repeat; background-position: 0% 70%; }
#area-top .lace { width: 100%; height: 10px; margin-top: 45px; background: url(/public/images/template/1/1/lace_down.svg); }
#area-top .container { text-align: center; }
#area-top .main-image { width: 100%; }
#area-top .store-name { display: table; margin: 2% auto; }
#area-top .store-name h1 { font-size: 40px; font-family: "游明朝", "ヒラギノ明朝"; font-weight: bold; margin: 0 auto; padding-left: 20px; display: table-cell; vertical-align: middle; }
#area-top .store-name a { color: #444444;}
#area-top nav { width: 1060px; border: 2px solid #C6DBE1; background-color: #fff; margin: 8px auto; padding: 8px; text-align: center; display: flex; display: -webkit-flex; }
#area-top nav a { font-size: 16px; font-family: "游明朝", "ヒラギノ明朝"; color: #fff; background-color: #1598BE; margin: 1px; padding: 12px 0px; flex: 1; -webkit-flex: 1; }
#area-top h2 { font-size: 34px; font-family: "游明朝", "ヒラギノ明朝"; margin-top: 40px; }
#area-top h3 { font-size: 20px; font-family: "游明朝", "ヒラギノ明朝"; margin: 0px; line-height: 2em; }

#area-banner { width: 100%; margin: 0px 0px 30px 0px; text-align: center; }
#area-banner .banner-cost { max-width: 941px; width:100%; height: 275px; position: relative; margin: 0 auto; }
#area-banner .banner-cost img { position: absolute; top: 0px; left: 0px; z-index: 100; }
#area-banner .banner-cost .cost-area { position: absolute; top: 37%; left: 19%; z-index: 101; }
#area-banner .banner-cost .cost-area .limitation { font-size: 34px; font-weight: bold; color: #fff; background-color: #F4225E; border-radius: 5px; margin: 10px 20px 0px 0px; padding: 6px 20px 5px 20px; display: inline-block; vertical-align: middle; }
#area-banner .banner-cost .cost-area .unit { font-size: 34px; font-family: "游明朝", "ヒラギノ明朝"; font-weight: bold; color: #000; padding-bottom: 10px; display: inline-block; vertical-align: bottom; }
#area-banner .banner-cost .cost-area .cost { font-size: 85px; font-family: "Serif"; font-weight: bold; color: #F4225E; display: inline-block; vertical-align: middle; }
#area-banner .banner-cost .cost-area .surtax { font-size: 34px; font-family: "游明朝", "ヒラギノ明朝"; color: #000; font-weight: bold; padding-bottom: 10px; display: inline-block; vertical-align: bottom; }
#area-banner .banner-cost .text { position: absolute; bottom: 5%; left: 4%; font-size: 22px; font-weight: bold; color: #000; text-shadow: 1px 0px 3px #fff; z-index: 101; }
#area-banner .banner-cost .text strong { color: #0883A6; }
#area-banner .banner-contact { display:flex; align-items:center; justify-content:space-around; flex-wrap:wrap; max-width: 911px; width: calc(100% - 30px); font-size: 30px; color: #444; font-weight: bold; background-color: #eee; margin: 0 auto; padding:10px 15px; text-align: center; }
#area-banner .banner-contact span { font-size: 36px; color: #C28816; }
#area-banner .banner-contact button.reservation { font-size: 16px; font-family: "Meiryo"; color: #fff; border: 2px solid #FFC450; border-radius: 5px; background-color: #C08106; margin: 0px 0px 2px 10px; padding: 8px 15px; display: inline-block; vertical-align: middle; cursor: pointer; }

#area-media { width: 100%; margin: 30px 0px 0px 0px; text-align: center; }
#area-media h2 { font-size: 40px; font-family: "游明朝", "ヒラギノ明朝"; }
#area-media iframe { max-width: 800px; width:100%; height: 450px; }

#area-merit { width: 100%; margin: 30px 0px 0px 0px; text-align: center; }
#area-merit h2 { font-size: 40px; font-family: "游明朝", "ヒラギノ明朝"; }
#area-merit ul { list-style: none; margin: 0px; padding: 0px; display: flex; display: -webkit-flex; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
#area-merit ul li { border-radius: 5px; flex: 1; -webkit-flex: 1; margin-bottom: 20px; padding: 10px;
background: -webkit-gradient(radial, 100% 46%, 0, 100% 46%, 241, color-stop(1.00, #2CC6F2), color-stop(0.00, #23DADC));
background: -webkit-radial-gradient(100% 46%, circle, #23DADC, #2CC6F2);
background: -moz-radial-gradient(100% 46%, circle, #23DADC, #2CC6F2);
background: -o-radial-gradient(100% 46%, circle, #23DADC, #2CC6F2);
background: -ms-radial-gradient(100% 46%, circle, #23DADC, #2CC6F2);
background: radial-gradient(100% 46%, circle, #23DADC, #2CC6F2); }
#area-merit ul li:first-child { margin-right: 10px; }
#area-merit ul li:last-child { margin-left: 10px; }
#area-merit ul li dl { background-color: #fff; border-radius: 5px; margin: 0px; padding: 10px; text-align: justify; }
#area-merit ul li dl dt { font-size: 22px; font-weight: bold; color: #198EB0; margin: 0px; padding: 0px; display: table; }
#area-merit ul li dl dt .icon { display: table-cell; vertical-align: top; }
#area-merit ul li dl dt .icon img { margin: 10px 15px 0px 15px; }
#area-merit ul li dl dt .title { display: table-cell; vertical-align: top; padding-top: 15px; }
#area-merit ul li dl dt .title strong { font-size: 26px; font-family: "游明朝", "ヒラギノ明朝"; color: #BE881D; }
#area-merit ul li dl dd { font-size: 15px; color: #666; font-weight: bold; margin: 0px; padding: 10px; }

#area-effect { padding-bottom: 60px; }
#area-effect .container { background-color: #bff2f3; border-radius: 5px; padding: 10px 0px; }
#area-effect .container .inner { background-color: #fff; border: 1px solid #08c7c9; margin: 0px 10px; text-align: center; }
#area-effect .container .inner h2 { font-size: 28px; font-weight: bold; }
#area-effect .container .inner ul.effect-box { width: 90%; list-style: none; margin: 0 auto; padding: 0px; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; }
#area-effect .container .inner ul.effect-box li { font-weight: bold; position: relative; border: 2px solid #ccc; border-left-width: 0px; background: url(/public/images/icon_tooth.png) no-repeat 50% 25%; padding: 90px 0px 10px 0px; vertical-align: bottom; flex: 1; -webkit-flex: 1; }
#area-effect .container .inner ul.effect-box li:first-child { border-left-width: 2px; }
#area-effect .container .inner ul.effect-box li br { content: ""; }
#area-effect .container .inner ul.effect-box li b { position: absolute; top: 22%; left: 45%; font-size: 20px; color: #daaa3a; }
#area-effect .container .inner .desc { font-size: 12px; margin: 10px 55px 20px 0px; text-align: right; }
#area-effect .container .inner .detail { padding: 10px 0px; background-color: #bff2f3; text-align: center; }
#area-effect .container .inner .detail ul.effect-detail { list-style: none; margin: 0 auto; padding: 0px; display: table; }
#area-effect .container .inner .detail ul.effect-detail li { padding: 10px 0px 2px 8px; vertical-align: middle; display: table-cell; }

#area-sequence .lace { width: 100%; height: 10px; background: url(/public/images/template/1/1/lace_up.svg); }
#area-sequence .inner { width: 100%; background-color: #08C7C9; text-align: center; padding: 10px 0px 20px 0px; }
#area-sequence .inner h2 { font-size: 28px; color: #fff; }
#area-sequence .inner h2 div { font-size: 17px; color: #fff; padding-top: 10px; }
#area-sequence .inner img { padding: 0px 5px; }

#area-example { width: 100%; background-color: #BFF2F3; padding: 30px 0px; text-align: center; }
#area-example img { margin: 0 auto; }
#area-example .area-case-button { width: 1036px; border: 2px solid #08c7c9; background-color: #08c7c9; margin: 10px auto; padding: 6px 0px; cursor: pointer; }
#area-example button { font-size: 14px; font-family: "Meiryo"; font-weight: normal; color: #333; border: 0px; border-radius: 5px; background-color: #fff; padding: 6px 10px 5px 10px; }
#area-example button i { font-size: 12px; font-style: normal; color: #1aa3a4; padding-right: 15px; }
#area-example button i:before { content: "▼"; }
#area-example button.active { color: #fff; background-color: #999; }
#area-example button.active i:before { content: "▲"; color: #fff; }
#area-example button.btn-case-close { width: 1038px; color: #fff; border: 0px; border-radius: 0px; background-color: #999; margin: 0 auto; padding: 10px 0px; display: none; }
#area-example .area-case { width: 1036px; border: 2px solid #C5DADA; border-bottom-width: 0px; background-color: #fff; margin: 3px auto 0px; padding-bottom: 20px; display: none; }
#area-example .area-case .case-title { width: 95%; font-size: 18px; font-weight: bold; background-color: #bff2f3; margin: 2% auto; padding: 7px 0px; display: block; }
#area-example .area-case .case-content { width: 95%; font-size: 14px; margin: 0 auto; padding-bottom: 5px; text-align: center; }
#area-example .area-case .inner { width: 640px; margin: 0 auto; display: block; text-align: center; }
#area-example .area-case .inner .case-photo { width: 280px; height: 150px; overflow: hidden; border: 2px solid #bff2f3; border-radius: 10px; margin-top: 5px; display: inline-block; }
#area-example .area-case .inner .case-photo img { width: 100% }
#area-example .area-case .inner .case-arrow { width: 60px; font-size: 20px; color: #aaa; display: inline-block; vertical-align: top; text-align: center; padding-top: 60px; }
#area-example .area-case ul { width: 640px; margin: 0 auto; padding: 0px; list-style: none; text-align: left; }
#area-example .area-case ul li { width: 280px; display: inline-block; }
#area-example .area-case ul li.spacer { width: 60px; display: inline-block; }

#area-cost { width: 100%; text-align: center; }
#area-cost h2 { font-size: 40px; font-family: "游明朝", "ヒラギノ明朝"; margin: 50px 0px 30px 0px; }
#area-cost .surtax { width: 1040px; margin: 0 auto; text-align: right; }
#area-cost .inner { width: 1040px; border-radius: 10px; background-color: #08C7C9; margin: 0 auto; padding: 20px; }
#area-cost .table-cost, #area-cost .table-ticket, #area-cost .table-total { width: 100%; display: table; }
#area-cost .table-cost .title { width: 25%; font-size: 24px; font-weight: bold; color: #fff; background-color: #F0B87D; display: table-cell; text-align: left; vertical-align: middle; }
#area-cost .table-cost .title .icon { display: inline-block; vertical-align: middle; padding: 10px 10px 0px 20px; }
#area-cost .table-cost .title .text { display: inline-block; vertical-align: middle; text-align: left; }
#area-cost .table-cost .content { width: 75%; display: table-cell; }
#area-cost .table-cost .content dl { width: 100%; height: 54px; font-size: 18px; border: 1px solid #ccc; border-bottom-width: 0px; margin: 0px; padding: 0px; display: table; }
#area-cost .table-cost .content dl.wide { height: 110px; }
#area-cost .table-cost .content dl:last-child { border-bottom-width: 1px; }
#area-cost .table-cost .content dl dt { width: 26%; font-weight: bold; background-color: #FFE5CA; padding-left: 30px; display: table-cell; vertical-align: middle; text-align: justify; }
#area-cost .table-cost .content dl dd { width: 74%; border-left: 1px solid #ccc; background-color: #fff; display: table-cell; text-align: center; vertical-align: middle; }
#area-cost .table-cost .content dl dd strong { font-size: 30px; color: red; }
#area-cost .table-cost .content dl dd strong.big { font-size: 40px; }
#area-cost .table-cost .content dl dd span { font-size: 24px; font-weight: bold; color: red; }
#area-cost .table-ticket .title { width: 25%; font-size: 24px; font-weight: bold; color: #fff; background-color: #C690A3; display: table-cell; text-align: left; vertical-align: middle; }
#area-cost .table-ticket .title .icon { display: inline-block; vertical-align: middle; padding: 10px 10px 0px 20px; }
#area-cost .table-ticket .title .text { display: inline-block; vertical-align: middle; text-align: left; }
#area-cost .table-ticket .title .text span:before { content: "\A"; white-space: pre; }
#area-cost .table-ticket .content { width: 75%; display: table-cell; }
#area-cost .table-ticket .content ul { width: 100%; height: 54px; font-size: 18px; border: 1px solid #ccc; border-bottom-width: 0px; margin: 0px; padding: 0px; display: table; list-style: none; }
#area-cost .table-ticket .content ul:last-child { border-bottom-width: 1px; }
#area-cost .table-ticket .content ul li { width: 37%; border: 1px solid #ccc; border-width: 0px 0px 0px 1px; background-color: #fff; padding: 0px 30px 0px 30px; display: table-cell; vertical-align: middle; text-align: justify; }
#area-cost .table-ticket .content ul li:first-child { width: 26%; border-width: 0px; }
#area-cost .table-ticket .content ul li:last-child { border-width: 0px 0px 0px 1px; }
#area-cost .table-ticket .content ul.header li { font-weight: bold; background-color: #F8DDE6; }
#area-cost .table-ticket .content ul li strong.red { font-size: 20px; color: red; }
#area-cost .table-ticket .table-background { background-color: #F0B87D; }
#area-cost .table-total .title { width: 25%; font-size: 24px; font-weight: bold; color: #fff; background-color: #F0B87D; display: table-cell; text-align: left; vertical-align: middle; }
#area-cost .table-total .title .icon { display: inline-block; vertical-align: middle; padding: 10px 10px 0px 20px; }
#area-cost .table-total .title .text { display: inline-block; vertical-align: middle; text-align: left; }
#area-cost .table-total .content { width: 75%; display: table-cell; }
#area-cost .table-total .content ul { width: 100%; height: 54px; font-size: 18px; border: 1px solid #ccc; border-bottom-width: 0px; margin: 0px; padding: 0px; display: table; list-style: none; }
#area-cost .table-total .content ul:last-child { border-bottom-width: 1px; }
#area-cost .table-total .content ul li { width: 63%; border: 1px solid #ccc; border-width: 0px 0px 0px 1px; background-color: #fff; padding: 0px 30px 0px 30px; display: table-cell; vertical-align: middle; text-align: justify; }
#area-cost .table-total .content ul li:first-child { border-width: 0px; }
#area-cost .table-total .content ul li:last-child { width: 37%; border-width: 0px 0px 0px 1px; }
#area-cost .table-total .content ul.header li { font-weight: bold; background-color: #F8DDE6; }
#area-cost .table-total .table-background { background-color: #F0B87D; }

#area-intro { width: 100%; background-color: #FFE7CC; margin-top: 60px; padding: 20px 0px; }
#area-intro .inner { width: 1093px; margin: 0 auto; padding: 0px; background: url(/public/images/template/1/1/intro_2.png); }
#area-intro .inner .intro-header, #area-intro .inner .intro-footer { width: 100%; height: 30px; }
#area-intro .inner .intro { display: flex; padding: 15px 50px 10px 50px; }
#area-intro .inner .intro .text { flex: 1; padding-right: 25px; }
#area-intro .inner .intro .text .title { clear: both; }
#area-intro .inner .intro .text .title h2 { font-size: 40px; font-family: "游明朝", "ヒラギノ明朝"; font-weight: bold; color: #0E8EB4; margin: 0px; padding-bottom: 20px; float: left; }
#area-intro .inner .intro .text .title ul { list-style: none; margin: 12px 10px 0px 0px; padding: 0px; float: right; }
#area-intro .inner .intro .text .title ul li { display: inline-block; }
#area-intro .inner .intro .text .title ul li img { width: 40px; }
#area-intro .inner .intro .text .title ul li a:hover { filter: opacity(0.7);  }
#area-intro .inner .intro .text .store-name { clear: both; font-size: 26px; font-family: "游明朝", "ヒラギノ明朝"; font-weight: bold; }
#area-intro .inner .intro .text .store-intro { font-size: 14px; padding-top: 20px; text-align: justify; }
#area-intro .inner .intro .photo { flex: 1; height: 360px; overflow: hidden; }
#area-intro .inner .intro .slick-prev { background: url(/public/images/icon_arrow_left.svg) 50% 50%; background-size: 100%; top: 160px; left: 10px; transform: none; color: none; z-index: 100; }
#area-intro .inner .intro .slick-prev:before { content: ""; }
#area-intro .inner .intro .slick-prev:hover { filter: opacity(0.8); }
#area-intro .inner .intro .slick-next { background: url(/public/images/icon_arrow_right.svg) 50% 50%; background-size: 100%; top: 160px; right: 10px; transform: none; color: none; z-index: 100; }
#area-intro .inner .intro .slick-next:before { content: ""; }
#area-intro .inner .intro .slick-next:hover { filter: opacity(0.8); }
#area-intro .inner .message { border: 10px solid #FFE5CA; margin: 30px 35px 20px 35px; }
#area-intro .inner .message .box { border: 1px solid #fff; background-color: #FFF1E2; padding: 20px; }
#area-intro .inner .message .box .photo { width: 190px; height: 140px; margin: 0 auto; overflow: hidden; display: inline-block; vertical-align: top; text-align: center; }
#area-intro .inner .message .box .photo img { height: 100%; }
#area-intro .inner .message .box .text { width: 750px; display: inline-block; vertical-align: top; padding-left: 10px; }
#area-intro .inner .message .box .text_full { width: 100%; display: block; text-align: justify; }
#area-intro .inner .message .box .text_full .title { text-align: center; }
#area-intro .inner .message .box h2 { font-size: 26px; font-family: "游明朝", "ヒラギノ明朝"; font-weight: bold; margin: 0px; padding-bottom: 10px; }
#area-intro .inner .notice { margin: 30px 45px 10px 45px; }
#area-intro .inner .notice .title { font-size: 24px; font-weight: bold; float: left; }
#area-intro .inner .notice .list { font-size: 12px; padding-top: 10px; float: right; }
#area-intro .inner .notice dl { clear: both; width: 100%; border: 1px solid #efefef; border-width: 1px 0px 0px 0px; margin: 0 auto; padding: 5px 0px 5px 0px; display: table; }
#area-intro .inner .notice dl:last-child { border-width: 1px 0px; }
#area-intro .inner .notice dl dt { width: 15%; color: #666; font-weight: bold; background-color: #efefef; margin: 0px; padding: 10px 0px 10px 0px; display: table-cell; vertical-align: middle; text-align: center; }
#area-intro .inner .notice dl dd { width: 85%; background-color: #fff; margin: 0px; padding: 0px 0px 0px 20px; display: table-cell; vertical-align: middle; }
#area-intro .inner .notice dl dd img { vertical-align: top; }

#area-review { margin: 60px 0px; }
#area-review h2 { font-size: 30px; font-family: "游明朝", "ヒラギノ明朝"; font-weight: bold; border-bottom: 1px solid #aaa; margin: 0px; padding-bottom: 10px; }
#area-review h2 img { vertical-align: middle; }
#area-review dl { font-size: 16px; margin: 20px 0px 20px 0px; }
#area-review dl dt { font-size: 20px; font-family: "游明朝", "ヒラギノ明朝"; font-weight: bold; background-color: #d6f8f9; padding: 3px 10px 3px 10px; }
#area-review dl dd { width: 100%; display: table; margin: 20px 0px; }
#area-review dl dd .photo { width: 25%; display: inline-block; vertical-align: top; text-align: center; }
#area-review dl dd .photo .photo-height { width: 200px; height: 150px; margin: 0 auto; overflow: hidden; }
#area-review dl dd .photo .photo-height img { height: 100%; }
#area-review dl dd .photo .name { padding: 5px 0px 0px; }
#area-review dl dd .text { width: 70%; padding-left: 20px; display: inline-block; vertical-align: top; }

#area-information { background-color: #eee; padding: 30px 0px 30px 0px; }
#area-information .inner { border: 1px solid #ddd; border-radius: 5px; background-color: #fff; padding: 30px; }
#area-information .inner h2 { font-size: 30px; font-family: "游明朝", "ヒラギノ明朝"; margin: 0px; }
#area-information .inner dl { width: 100%; font-size: 16px; border: 1px solid #ddd; border-bottom-width: 0px; display: table; margin: 0px; }
#area-information .inner dl:last-child { border-bottom-width: 1px; }
#area-information .inner dl dt { width: 15%; font-weight: bold; background-color: #eee; padding: 10px 0px 10px 20px; display: table-cell; }
#area-information .inner dl dd { width: 85%; padding: 10px 0px 10px 20px;  display: table-cell; }

#area-contact { font-size: 30px; font-weight: bold; background-color: #FFE7CC; margin: 0 auto; padding: 40px 0px 0px 0px; text-align: center; }
#area-contact img { margin: 0 auto; }
#area-contact span { font-size: 36px; color: #C28816; }
#area-contact .lace { width: 100%; height: 10px; margin-top: 40px; background: url(/public/images/template/1/1/lace_up.svg); }

/* Smartphone */
@media only screen and (max-width: 1130px) {

    header { height: 45px; line-height: 1.2em; }
    header .text { width: 150px; font-size: 12px; padding: 6px 0px 0px 10px; display: block; text-align: left; }
    header .telephone { font-size: 13px; padding: 0px 0px 0px 10px; display: block; text-align: left; }
    header button.reservation { font-size: 12px; margin:0; padding:4px 5px; position:absolute; top:7px; right:5px;}
    header .back-top { display: none; }

    footer { font-size: 11px; text-align: center; }
    .container { width: 100%; }
    #map { width: 98%; height: 500px; margin: 10px 0px 10px 0px; }

    #area-top { background-position: 50% 90%; padding-bottom: 10px; }
    #area-top .store-name { display: table; margin: 2% auto; }
    #area-top .store-name h1 { font-size: 5.0vw; padding: 0px; }
    #area-top .main-image { width: 95%; margin: 0 auto; }
    #area-top nav { width: 90%; text-align: left; flex-wrap: wrap; -webkit-flex-wrap: wrap; }
    #area-top nav a { flex-basis: 40%; padding: 7px 0px 7px 20px; }
    #area-top h3 span:before { content: "\A"; white-space: pre; }

    #area-merit h2 { font-size: 19px; }
    #area-merit ul { margin: 10px; display: block; }
    #area-merit ul li:first-child { margin-right: 0px; }
    #area-merit ul li:last-child { margin-left: 0px; }
    #area-merit ul li dl { padding: 0px; }
    #area-merit ul li dl dt { font-size: 18px; }
    #area-merit ul li dl dt .icon img { margin: 10px 10px 0px 10px; }
    #area-merit ul li dl dt .title { padding: 10px 10px 0px 0px; }
    #area-merit ul li dl dt .title strong { font-size: 22px; line-height:1.3em; letter-spacing: -1px; }
    #area-merit ul li dl dd { font-size: 14px; font-weight: normal; }

    #area-sequence .inner h2 { font-size: 20px; padding: 0px 10px 0px 10px; }
    #area-sequence .inner h2 div { font-size: 14px; font-weight: normal; }
    #area-sequence .inner h2 div span:before { content: "\A"; white-space: pre; }
    #area-sequence .inner img { width: auto; padding: 0px; }

    #area-example { padding: 10px 0px; }
    #area-example img { width: 95%; margin: 0 auto; }
    #area-example .area-case-button { width: 95%; }
    #area-example button { width: 95%; }
    #area-example button.btn-case-close { width: 96%; }
    #area-example .area-case { width: 95%; }
    #area-example .area-case .case-content { padding: 10px 0px 10px 0px;}
    #area-example .area-case .inner { width: 95%; margin: 0 auto; }
    #area-example .area-case .inner .case-photo { width: 40%; height: 200px; }
    #area-example .area-case .inner .case-photo img { width: 100%; height: auto; }
    #area-example .area-case .inner .case-arrow { width: 8%; font-size: 16px; padding-top: 100px; }
    #area-example .area-case ul { width: 95%; text-align: center; }
    #area-example .area-case ul li { width: 38%; }
    #area-example .area-case ul li.spacer { width: 8%; }

    #area-cost h2 { font-size: 24px; }
    #area-cost h2 span:before { content: "\A"; white-space: pre; }
    #area-cost .surtax { width: 100%; }
    #area-cost .inner { width: 80%; border-radius: 10px; background-color: #08C7C9; margin: 0 auto; padding: 20px; }
    #area-cost .table-cost, #area-cost .table-ticket, #area-cost .table-total { width: 100%; display: table; border: 1px solid #ccc; }
    #area-cost .table-cost .title { width: 100%; display: table-row; }
    #area-cost .table-cost .title .icon { display: none; }
    #area-cost .table-cost .title .text { display: block; text-align: center; padding: 5px; }
    #area-cost .table-cost .content { width: 100%; display: table-cell; }
    #area-cost .table-cost .content dl { border-width: 1px 0px 0px 0px; }
    #area-cost .table-cost .content dl:last-child { border-width: 1px 0px 0px 0px; }
    #area-cost .table-cost .content dl dt { width: 52%; font-size: 14px; padding-left: 10px; }
    #area-cost .table-cost .content dl dd { width: 48%; text-align: left; padding-left: 10px; }
    #area-cost .table-cost .content dl dd strong { font-size: 24px; }
    #area-cost .table-cost .content dl dd span { font-size: 17px; }
    #area-cost .table-ticket .title { width: 100%; display: table-row; }
    #area-cost .table-ticket .title .icon { display: none }
    #area-cost .table-ticket .title .text { display: block; text-align: center; padding: 5px; }
    #area-cost .table-ticket .title .text span:before { content: ""; white-space: pre; }
    #area-cost .table-ticket .content { width: 100%; display: table-cell; }
    #area-cost .table-ticket .content ul { border-width: 1px 0px 0px 0px; }
    #area-cost .table-ticket .content ul:last-child { border-width: 1px 0px 0px 0px; }
    #area-cost .table-ticket .content ul li { width: 35%; font-size: 14px; padding: 0px 5px 0px 5px; }
    #area-cost .table-ticket .content ul li:first-child { width: 30%; border-width: 0px; }
    #area-cost .table-ticket .content ul li:last-child { width: 35%; border-width: 0px 0px 0px 1px; }
    #area-cost .table-total .title { width: 100%; display: table-row; text-align: center; }
    #area-cost .table-total .title .icon { display: none; }
    #area-cost .table-total .title .text { display: inline-block; vertical-align: middle; text-align: left; padding: 5px; }
    #area-cost .table-total .content { width: 100%; display: table-cell; }
    #area-cost .table-total .content ul { width: 100%; }
    #area-cost .table-total .content ul li { width: 50%; font-size: 14px; padding: 0px 5px 0px 5px; }
    #area-cost .table-total .content ul li:last-child { width: 50%; border-width: 0px 0px 0px 1px; }
    #area-cost .table-total .content ul.header li { background-color: #FFE5CA; }

    #area-intro { padding: 10px 0px; }
    #area-intro .inner { width: 95%; background: none; background-color: #fff; padding-bottom: 10px; }
    #area-intro .inner .intro-header, #area-intro .inner .intro-footer { display: none; }
    #area-intro .inner .intro { width: 95%; margin: 0 auto; padding: 0px; display: block; background-color: #fff; }
    #area-intro .inner .intro .text { display: block; padding: 15px 10px 0px 10px; }
    #area-intro .inner .intro .text .title h2 { font-size: 30px; }
    #area-intro .inner .intro .text .store-name { font-size: 4.5vw; text-align: center; }
    #area-intro .inner .intro .text .title ul { margin-right: 0px; }
    #area-intro .inner .intro .text .title ul li img { width: 25px; }
    #area-intro .inner .intro .photo { width: 620px; height: 460px; margin: 2% auto; }
    #area-intro .inner .intro .slick-prev, #area-intro .inner .intro .slick-next { top: 220px; }
    #area-intro .inner .message { margin-top: 10px; }
    #area-intro .inner .message .box .photo { width: 100%; height: 140px; margin: 10px 0px; }
    #area-intro .inner .message { margin: 40px 10px 30px 10px; }
    #area-intro .inner .message .box { padding: 10px; }
    #area-intro .inner .message .box .text { width: 100%; padding: 0px; }
    #area-intro .inner .message .box .text_full { width: 100%; display: block; text-align: justify; }
    #area-intro .inner .message .box .text_full .title { text-align: center; }
    #area-intro .inner .message .box h2 { font-size: 17px; }
    #area-intro .inner .notice { margin: 10px; }
    #area-intro .inner .notice dl dt { width: 35%; font-size: 11px; font-weight: normal; }
    #area-intro .inner .notice dl dd { width: 65%; font-size: 11px; padding: 0px 10px 0px 10px; }

    #area-review { margin: 30px 0px; }
    #area-review h2 { font-size: 18px; padding-left: 10px; }
    #area-review h2 img { width: 20px; }
    #area-review dl { width: 95%; font-size: 16px; margin: 5% auto; }
    #area-review dl dt { font-size: 18px; }
    #area-review dl dd .photo { width: 100%; display: block; }
    #area-review dl dd .photo .name { padding: 5px 0px 0px; }
    #area-review dl dd .text { width: 100%; padding: 20px 0px 0px 0px; display: block; }

    #area-information { background-color: #eee; padding: 30px 10px 30px 10px; }
    #area-information .inner { border: 1px solid #ddd; border-radius: 5px; background-color: #fff; padding: 30px 10px; }
    #area-information .inner h2 { font-size: 30px; text-align: center; }
    #area-information .inner dl { font-size: 14px; border: 1px solid #ddd; border-bottom-width: 0px; margin: 0px; padding: 0px; display: block; }
    #area-information .inner dl:last-child { border-bottom-width: 1px;  }
    #area-information .inner dl dt { width: auto; margin: 0px; padding: 10px; display: block; }
    #area-information .inner dl dd { width: auto; margin: 0px; padding: 10px; display: block; }

    #area-contact { font-size: 20px; }
    #area-contact img { width: 90%; margin: 0 auto; }
    #area-contact span { font-size: 28px; color: #C28816; }
    #area-contact span:before { content: "\A"; white-space: pre; }
}

/* iPad Pro */
@media only screen and (max-width: 1024px) {
    .pc { display: none; }
    .sp { display: block; }
    
    header .h_inner .empty {display:none;}

    #area-sequence .inner img { width: 150px; }
    
    #area-banner {width:95%; margin:0 auto 30px;}
    #area-banner .banner-cost {height:auto;}
    #area-banner .banner-cost img {position:static; width:100%;}
    #area-banner .banner-cost .cost-area {left:4%;}
    #area-banner .banner-cost .cost-area .surtax {text-shadow:0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff;}
    #area-banner .banner-cost .text {left:3%; font-size:calc(1.125rem + ((1vw - 7.68px) * 1.1719)); text-shadow:0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff;}
    
    #area-cost .inner { width: 95%; }

    #area-effect { padding-bottom: 40px; }
    #area-effect .container { width: 95%; }
	#area-effect .container .inner h2 {font-size:3.0vw;}
    #area-effect .container .inner ul.effect-box li { flex-basis: 40%; border-width: 1px; background-position: 8% 50%; background-size: 11%; padding: 20px 0px 20px 0px; text-align: left; }
    #area-effect .container .inner ul.effect-box li:first-child { border-width: 1px; }
    #area-effect .container .inner ul.effect-box li b { top: 22%; left: 11%; font-size: 18px; }
    #area-effect .container .inner ul.effect-box li.desc-sp { font-size: 12px; border-right-color: #fff; border-bottom-color: #fff; background: none; padding: 10px 0px 0px 0px; text-align: right; }
    #area-effect .container .inner ul.effect-box li .text { padding: 0px 0px 0px 100px; }
    #area-effect .container .inner .desc { font-size: 12px; margin: 10px 55px 20px 0px; text-align: right; }
    #area-effect .container .inner .detail { margin-top: 20px; }
}

/* iPad */
@media only screen and (max-width: 768px) {
    #area-banner .banner-cost .cost-area { position: absolute; top: 32%; z-index: 101; }
    #area-banner .banner-cost .cost-area .limitation { margin:0.2em 0.2em 0 0; padding:0.2em 0.5em 0.1em; vertical-align: middle; font-size:calc(0.75rem + ((1vw - 3.2px) * 4.9107));}
    #area-banner .banner-cost .cost-area .unit { font-size:calc(0.875rem + ((1vw - 3.2px) * 4.4643)); padding-bottom:0; letter-spacing:-0.3em; }
    #area-banner .banner-cost .cost-area .cost { font-size:calc(1.75rem + ((1vw - 3.2px) * 11.6071)); line-height:1em;}
    #area-banner .banner-cost .cost-area .surtax { font-size:calc(0.8125rem + ((1vw - 3.2px) * 4.2411)); padding-bottom: 0; }
    #area-banner .banner-cost .text { width:80%; position:absolute; bottom:3%; left:2%; font-size:calc(0.6875rem + ((1vw - 3.2px) * 2.0089)); text-align: left; }
    #area-banner .banner-cost .text strong { color: #0883A6; }
    #area-banner .banner-contact { font-size: 18px; }
    #area-banner .banner-contact span { font-size: 17px; color: #C28816; letter-spacing: -1px; }
    /*#area-banner .banner-contact span:before { content: "\A"; white-space: pre; }*/
    #area-banner .banner-contact button.reservation { font-size: 12px; margin: 0px; padding: 4px 5px; }

    #area-media iframe { width: 90%; height: 380px; }
    #area-sequence .inner img { width: auto; }
    #area-cost .inner { width: 90%; }

    #area-effect .container .inner ul.effect-box li { background-size: 12%; padding: 10px 0px 10px 0px; }
    #area-effect .container .inner ul.effect-box li b { top: 18%; }
    #area-effect .container .inner ul.effect-box li .text { padding: 0px 0px 0px 80px; }
    #area-effect .container .inner .detail img {width:auto; max-width:95%;}
    
    #area-example .area-case .inner .case-photo { height: 150px; }
    #area-example .area-case .inner .case-arrow { padding-top: 70px; }
}

/* iPhone 7 Plus, iPhone 8, iPhone 8 Plus, iPhone X */
@media only screen and (max-width: 414px) {
    #area-top h2 { font-size: 17px; margin-top: 20px; letter-spacing: -1px; }
    #area-top h3 { font-size: 13px; padding: 0px 10px 0px 10px; }
    #area-banner .banner-contact { font-size: 18px; }

    #area-media h2 { font-size: 24px; } #area-media iframe { width: 95%; height: 210px; }
    #area-cost .inner { width: 80%; }

    #area-effect .container .inner h2 { font-size: 5.0vw; }
    #area-effect .container .inner ul.effect-box li { background-size: 30%; padding: 10px 0px 10px 0px; }
    #area-effect .container .inner ul.effect-box li b { top: 23%; left: 17%; }
    #area-effect .container .inner ul.effect-box li .text { padding: 0px 0px 0px 70px; }
    #area-effect .container .inner ul.effect-box li br:before { content: "\A"; white-space: pre; }
    #area-effect .container .inner .desc { font-size: 12px; margin: 10px 55px 20px 0px; text-align: right; }
    #area-effect .container .inner .detail { margin-top: 20px; }
    #area-effect .container .inner .detail .sp img { max-width:100%; width: 95%; margin: 0px; padding-top: 8px; }

    #area-example .area-case .inner .case-photo { height: 80px; }
    #area-example .area-case .inner .case-arrow { padding-top: 40px; }

    #area-intro .inner .intro .photo { width: auto; height: 280px; }
    #area-intro .inner .intro .slick-prev, #area-intro .inner .intro .slick-next { top: 130px; }
    #area-intro .inner .message { margin-top: 10px; }
    #area-intro .inner .message .box .photo { width: 100%; height: 140px; margin: 10px 0px; }
}

/* iPhone 7 */
@media only screen and (max-width: 375px) {
    #area-top h2 { font-size: 20px; }
    #area-top h3 { font-size: 14px; padding: 0px 10px 10px 10px; }
    #area-banner .banner-contact { font-size: 18px; }

    #area-merit ul li dl dt .title strong { font-size: 21px; }

    #area-media iframe { width: 95%; height: 190px; }
    #area-effect .container .inner ul.effect-box li b { left: 16%; }
    #area-effect .container .inner ul.effect-box li .text { padding: 0px 0px 0px 60px; }

    #area-example .area-case .inner .case-photo { height: 73px; }
    #area-example .area-case .inner .case-arrow { padding-top: 35px; }

    #area-intro .inner .intro .photo { height: 250px; }
    #area-intro .inner .intro .slick-prev, #area-intro .inner .intro .slick-next { top: 118px; }
}

/* Galaxy S5 */
@media only screen and (max-width: 360px) {
    #area-top h2 { font-size: 18px; }
    #area-top h3 { font-size: 14px; padding: 0px 10px 10px 10px; }

    #area-effect .container .inner ul.effect-box li b { top: 24%; }
    #area-effect .container .inner ul.effect-box li .text { padding: 0px 0px 0px 50px; font-size:12px;}

    #area-example .area-case .inner .case-photo { height: 70px; }
    #area-example .area-case .inner .case-arrow { padding-top: 30px; }

    #area-intro .inner .intro .photo { height: 240px; }
    #area-intro .inner .intro .slick-prev, #area-intro .inner .intro .slick-next { top: 110px; }
}

/* iPhone 5, iPhone SE */
@media only screen and (max-width: 320px) {
    #area-top h2 { font-size: 17px; margin-top: 20px; letter-spacing: -1px; }
    #area-top h3 { font-size: 13px; padding: 0px 10px 0px 10px; }

    #area-media iframe { width: 95%; height: 160px; }
    #area-sequence .inner img { width: 150px; padding: 0px; }

    #area-example .area-case .inner .case-photo { height: 62px; }
    #area-example .area-case .inner .case-arrow { padding-top: 25px; }

    #area-intro .inner .intro .photo { height: 220px; }
    #area-intro .inner .intro .slick-prev, #area-intro .inner .intro .slick-next { top: 100px; }
}