@charset "UTF-8";
html,
body {
    border: none;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%; /* 1rem = 10px */
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
    scroll-behavior: auto;
}
}
body {
    box-sizing: border-box;
    color: #333;
    font-family: "Garamond" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" ,  "ヒラギノ明朝 ProN W3" , "Hiragino Mincho ProN" , "ＭＳ Ｐ明朝" , "ＭＳ 明朝" , "MS PMincho" , sans-serif;    
    font-size: 1.6rem;
    text-align: left;
    position: relative;
}

body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}
svg,
img,
embed,
object {
    display: block;
    height: auto;
    max-width: 100%;
}
p {
    margin-bottom: 0.5rem;
}


/* ====================
  Header
==================== */

header {
    padding: 1rem 1rem 0;
    transition: .3s;
    background-color: rgba(255,255,255,0);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.is-fixed {
    position:  fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background-color: rgba(255,255,255,0.9);
    -webkit-transition: all .4s ease 0s,background .6s ease .2s;
    transition: all .4s ease 0s,background .6s ease .2s;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    height: 65px;
}

.header-wrap {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align: center; /*IE10*/
    -webkit-box-align: center; /* Android4.3以下、Safari3.1〜6.0 */
    -webkit-align-items: center; /* Safari6.1以降 */
    align-items:center;
    -webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
    -ms-flex-pack:justify;/*--- IE10 ---*/
    -webkit-justify-content:space-between;/*--- safari（PC）用 ---*/
    justify-content:space-between;
    margin-bottom: 1px;
}

.header-wrap h1 {
    font-family: 'Pinyon Script', cursive;
    font-weight: normal;
}
.header-wrap h1 a {
   color: #333;
}

.header-wrap ul {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    list-style: none;
    -ms-flex-align: center; /*IE10*/
    -webkit-box-align: center; /* Android4.3以下、Safari3.1〜6.0 */
    -webkit-align-items: center; /* Safari6.1以降 */
    align-items:center;
}
.header-wrap ul li:not(:last-child) {
    margin-right: 2rem;
}
.header-wrap ul li a {
    letter-spacing: 0.1em;
    font-size: 1.9rem;
    color: #333;
}
.header-wrap h1 a:hover,
.header-wrap ul li a:hover,
.footer-wrap h1 a:hover {
    color: #e3acae;
}
.header-wrap ul li.reserve a {
    background-color: #016FD0;
    border-radius: 25px;
    padding: 0.5em;
    color: #fff;
    font-weight: bold;
    -webkit-transition: 600ms;
            transition: 600ms;
    border: 1px solid #016FD0;
}
.header-wrap ul li.reserve a:hover {
    background: transparent;
    color: #016FD0;
    border: 1px solid #016FD0;
    text-decoration: none;
}

.sp-menu {
    display: none;
}
.outer-menu {
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 100;
}
.outer-menu .checkbox-toggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 200;
    cursor: pointer;
    width: 50px;
    height: 50px;
    opacity: 0;
}
.outer-menu .checkbox-toggle:checked + .hamburger > div {
    transform: rotate(135deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
    top: 0;
    transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
    opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
    pointer-events: auto;
    visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
    transform: scale(1);
    transition-duration: 0.75s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
    opacity: 1;
    transition: opacity 0.4s ease 0.4s;
}
.outer-menu .checkbox-toggle:hover + .hamburger {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
    transform: rotate(225deg);
}
.outer-menu .hamburger {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 50px;
    height: 50px;
    padding: 0.5em 0.8em;
    background: #e3acae;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.4s ease;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.outer-menu .hamburger > div {
    position: relative;
    flex: none;
    width: 100%;
    height: 2px;
    background: #FEFEFE;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -10px;
    left: 0;
    width: 100%;
    height: 2px;
    background: inherit;
    transition: all 0.4s ease;
}
.outer-menu .hamburger > div:after {
    top: 10px;
}
.outer-menu .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    outline: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.outer-menu .menu > div {
    width: 200vw;
    height: 200vw;
    color: #fff;
    background: rgba(227, 172, 174, 0.9);
    border-radius: 50%;
    transition: all 0.4s ease;
    flex: none;
    transform: scale(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.outer-menu .menu > div > div {
    text-align: center;
    max-width: 90vw;
    max-height: 100vh;
    opacity: 0;
    transition: opacity 0.4s ease;
    overflow-y: auto;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.outer-menu .menu > div > div > ul {
    list-style: none;
    padding: 0 1em;
    margin: 0;
    display: block;
    max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
    padding: 0;
    margin: 1em;
    font-size: 24px;
    display: block;
}
.outer-menu .menu > div > div > ul > li > a {
    position: relative;
    display: inline;
    cursor: pointer;
    transition: color 0.4s ease;
    color: #fff;
}
.outer-menu .menu > div > div > ul > li > a:hover {
    text-decoration: none;
}
.outer-menu .menu > div > div > ul > li > a:hover:after {
    width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -0.15em;
    left: 0;
    width: 0;
    height: 2px;
    background: #e5e5e5;
    transition: width 0.4s ease;
}


/* ====================
  Main
==================== */
main {
    margin: 1rem auto;
}
.bg {
    background-color: #F7F7F7;
}
section h1 {
    text-align: center;
    font-size: 7.5rem;
    font-style: italic;
    letter-spacing: 0.03em;
    font-weight: 500;
    font-family: 'Pinyon Script', cursive, "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" ,  "ヒラギノ明朝 ProN W3" , "Hiragino Mincho ProN" , "ＭＳ Ｐ明朝" , "ＭＳ 明朝" , "MS PMincho" , sans-serif;
    padding: 0.5em 0;
}
section h1 span {
    display: block;
    font-size: 2rem;
}

.main-visual {
    height: 0;
    padding-top: 56%;
    background: url("../img/main.jpg") 0 0 no-repeat;
    background-size: contain;
}

.wrap {
    padding: 3em 1em;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.wrap p {
    line-height: 1.8;
    font-size: 1.8rem;
    margin-bottom: 1em;
}
.wrap p span {
    display: block;
}
h2.en {
    font-weight: 500;
    font-family: 'Pinyon Script', cursive;
    font-size: 5rem;
    margin-top: -100px;
    padding-top: 100px;
}
h2.ja {
    margin-bottom: 1em;
    letter-spacing: 0.1em;
}
.wrap h3 {
    margin-top: 2em;
    position: relative;
    display: inline-block;
    padding: 0 3em;
    font-style: italic;
}
.wrap h3:before,
.wrap h3:after {
    content: "";
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 1px;
    background-color: black;
}
.wrap h3:before {
    left:0;
}
.wrap h3:after {
    right: 0;
}
.wrap p.about-txt {
    font-size: 1.5rem;
    font-style: italic;
}
.image-area {
    height: 0;
    padding-top: 43.1%;
    background: url("../img/image01.jpg") 0 0 no-repeat;
    background-size: contain;
}

.profile-area {
    height: 0;
    padding-top: 38.25%;
    background: url("../img/image02.jpg") 0 0 no-repeat;
    background-size: contain;
}

.wrap p.red {
    color: #9b0000;
}
.wrap p.en-txt {

}
.howto-wrap {
    text-align: left;
}
h4.howto-title {
	position: relative;
	padding-top: 30px;
	font-size: 2.5rem;
	border-bottom: 1px solid #333;
    padding-left: 0.5em;
    margin-bottom: 0.8em;
}
h4.howto-title span {
	position: relative;
	z-index: 2;
}
h4.howto-title:before {
	content: attr(data-en);
	position: absolute;
	top: -14px;
	left: 0;
    color: rgba(227,172,174,0.5);
	text-transform: uppercase;
	z-index: 1;
    font-size: 3.8rem;
    letter-spacing: 0.05em;
    font-style: italic;
}
h4.howto-title:not(:first-of-type) {
   margin-top: 2em;
}
.howto-wrap ul,
.guide-txt h5 {
    font-size: 1.8rem;
}
.howto-wrap ul li {
    margin-bottom: 2em;
}

ul.list {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #e3acae;
    padding: 1em 7em 0;
    justify-content: center;
}
ul.list li {
    margin: 0 1em 1em;
}
.guide-txt {
    padding: 0 1em;
}
.wrap p span.tel {
    font-size: 3rem;
    margin: 0 0.5em;
    letter-spacing: 0.05em;
    display: inline;
}
.wrap p span.tel a {
    color: #333;
}
.wrap p span.tel a:hover {
    text-decoration: none;
}
.wrap p.small {
    font-size: 1.5rem;
    padding-left: 1em;
    margin-bottom: 0.5em;
}
.wrap p.small:first-of-type {
    margin-top: 1em;
}
ul.frame li {
    list-style: decimal;
}
ul.img-list {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}
ul.img-list li:first-child {
    margin-right: 1em;
}
ul.item-list {
    list-style: none;
    border: 1px solid #e3acae;
    padding: 1em;
    margin-bottom: 2em;
}

ul.item-list li span {
    font-size: 3rem;
    font-style: italic;
    margin-right: 0.3em;
}

.out-box {
    margin-top: 5em;
    border: 1px solid #ccc;
    padding: 1em;
}
.out-box p {
    font-size: 1.8rem;
    text-align: left;
}
.wrap p span.red,
.out-box p span.red {
    display: inline;
    color: #9b0000;
}

.howto-wrap ul.frame {
    font-size: 2rem;
    font-weight: bold;
}


/* animation */
.fadein {
  opacity: 0;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;

}
.fadein.show {
    opacity : 1;
}


.btn a {
    background-color: #ff757a;
    border-radius: 25px;
    padding: 0.3em;
    color: #fff;
    font-weight: bold;
    -webkit-transition: 600ms;
    transition: 600ms;
    font-size: 2.2rem;
    border: 1px solid #ff757a;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    width: 80%;
    margin: 1em 0 2em;
    justify-content: center;
    align-items: center;
}
.btn a img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(97deg) brightness(103%) contrast(101%);
    margin-left: 0.3em;
}
.btn a:hover {
    background: transparent;
    color: #ff757a;
    border: 1px solid #ff757a;
    text-decoration: none;
}
.btn a:hover img {
    filter: invert(66%) sepia(22%) saturate(6109%) hue-rotate(313deg) brightness(107%) contrast(112%);
}


.photo {

}
.photo img {
    border-radius: 10px;
    margin: 0 auto 2em;
    pointer-events: none;
	    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}

.blink {
    color: #9b0000;
}



/* モーダルウィンドウ */
.modal-wrapper {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 10px;
  text-align: center
}

.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.modal-wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em;
  vertical-align: middle;
  content: ""
}

.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 90%;
  max-width: 1100px;
  padding: 3rem 3rem 4rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle
}

.modal-wrapper .modal-window .modal-content {
  max-height: 80vh;
  overflow-y: auto;
  text-align: left;
  padding: 0 1em 0 0;
}

.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8)
}

.modal-wrapper .modal-close {
  z-index: 20;
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  color: #333 !important;
  font-size: 4rem;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  text-indent: 0
}

.modal-wrapper .modal-close:hover {
  color: #2b2e38 !important
}
.modal-content .main-wrap {
    margin: 1rem auto;
}

.modal-content h3 {
    border-left: 5px solid;
    padding: 0 0 0 0.8rem;
    margin: 4rem 0 1rem;
}
table.repair-list {
    margin: 2em 0 0;
    width: 99%;
}
table.repair-list th {
    width: 7%;
}
table.repair-list td {
    width: 18%;
}
.modal-content .terms-box {
    margin-top: 0;
}
.modal-content dl dt {
    margin: 2rem 0 0.5rem;
}
.modal-content p span.emphasis {
    color: #ea4f5c;
    font-size: 1.8rem;
    font-weight: 700;
}

.modal-content h4 {
    margin-top: 2em;
}
.modal-content h2 {
    border-bottom: 1px solid #333;
}

/* ====================
  Footer
==================== */

footer {
    background-color: #F7F7F7;
    padding: 4rem 2rem;
}
.footer-wrap {
    text-align: center;
}
.footer-wrap h1,
.footer-wrap h2 {
    font-family: 'Pinyon Script', serif;
}
.footer-wrap p.info {
    font-family: 'Playball', cursive;
    font-size: 2.3rem;
}
.footer-wrap h1 {
    font-size: 6rem;
    letter-spacing: 0.05em;
    font-weight: normal;
}
.footer-wrap h2 {
    font-size: 3.2rem;
    letter-spacing: 0.05em;
}
.footer-wrap h2 a:hover {
    text-decoration: none;
}

.footer-wrap a {
    color: #333;
}
ul.link-list {
    list-style: none;
    padding-left: 0;
    margin: 2em 0;
}
ul.link-list li {
   margin-bottom: 1em;
}
ul.link-list li a {
    text-decoration: underline;
}
ul.link-list li a:hover {
    text-decoration: none;
}
p.copy {
    text-align: center;
    padding: 1em 0;
}


table.repair-list {
    margin: 2rem 0 1rem;
    width: 100%;
}

table.repair-list th,
table.repair-list td {
     padding: 10px; 
     border: 1px solid #ddd;
}
table.repair-list th {
     background: #f4f4f4;
    width: 24%;
}
table.repair-list td {
    width: auto;
}







@media screen and (max-width:880px) {
.pc-menu {
    display: none;
}
.sp-menu {
    display: block;
}

.header-wrap {
    display: block;
    position: relative;
}
.sp-menu .reserve-btn {
    position: fixed;
    top: 5px;
    right: 7px;
}
.outer-menu .menu > div > div > ul > li:last-child {
    background-color: #fff;
    border-radius: 20px;
}
.outer-menu .menu > div > div > ul > li:last-child a {
    color: #016FD0;
    font-weight: bold;
    font-size: 2rem;
}
}
@media screen and (max-width:600px) {

.is-fixed {
    height: 60px;
}
header {
    padding: 1rem 1rem 0.5rem;
}

.header-wrap h1 {
    font-size: 2.5rem;
    line-height: 1.8;
}

.outer-menu .hamburger {
    padding: 1em 0.6em;
    top: 0;
    right: 0;
}
.outer-menu .hamburger > div:before {
    top: -9px;
}
.outer-menu .hamburger > div:after {
    top: 9px;
}
.outer-menu .menu > div {
    width: 300vw;
    height: 300vw;
}
.modal-wrapper {
}
.modal-wrapper .modal-window .modal-content {
    max-height: 70vh;
}
table.repair-list th.list-none,
table.repair-list td.list-none {
    display: none;
}

.footer-wrap {
    display: block;
    margin: 0;
}
.footer-wrap ul {
    padding-left: 0;
    margin-top: 2rem;
}
table.repair-list th,
table.repair-list td {
    font-size: 1.4rem;
    display: block;
    width: 100%;
}
section h1 {
    font-size: 4rem;
}
section h1 span {
    font-size: 1.5rem;
}
h2.en {
    font-size: 4rem;
    line-height: 1;
}
h2.ja {
    margin-bottom: 1em;
    font-size: 2rem;
    margin-top: 0.8em;
}
.wrap p {
    text-align: left;
}
.wrap p span {
    display: inline;
}
h4.howto-title {
    font-size: 2rem;
}
h4.howto-title:before {
    top: 1px;
    font-size: 3rem;
}
.footer-wrap h1 {
    font-size: 3rem;
}
.footer-wrap h2 {
    font-size: 2rem;
}
.footer-wrap p.info {
    font-size: 1.8rem;
}
.modal-content h2 {
    font-size: 1.8rem;
}
.wrap h3 {
    margin-top: 1em;
}
ul.list {
    display: block;
    padding: 1em 1em 0;
}
.wrap p span.tel {
    font-size: 2rem;
}
.modal-wrapper .modal-window {
    padding: 3rem 2rem 4rem;
}
ul.item-list li span {
    font-size: 2.5rem;
}
.btn a {
    font-size: 2rem;
    width: 100%;
}
.howto-wrap ul {
    padding-left: 1em;
}
}