@charset "utf-8";

/***** 共通 *****/
/*      *      */
/*      img    */
/*      ul     */
/*      a      */
/***************/
* {
    margin: 0;
    padding: 0;
    font-family: serif;
    color: #311200;
}

img {
    vertical-align: bottom;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    width: 100%;
}

/***** 共通 *****/




/**********topボタン**********/
html {
    scroll-behavior: smooth;
}

.pagetop_arrow {
    height: 55px;
    width: 55px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 5;
}

.pagetop {
    display: block;
    width: 100%;
    height: 55px;
    background-image: url(../img/top.png);
    background-repeat: no-repeat;
}

.pagetop:hover {
    background-image: url(../img/top-hover.png);
    background-repeat: no-repeat;
}

/**********topボタン**********/



/***** index.ntml *****/
/***** トップページ *****/
/*    トップイメージ    */
/*   class = topimg   */
/*   背景画像の埋め込み  */
/*ロゴとインスタの位置設定*/

.topimg {
    width: 100%;
    aspect-ratio: 16/8;
    /* height: 100vh; */
    object-fit: cover;
    background-image: url(../img/topimage5.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 999;
}

.toppage-header {
    margin-left: 55%;
}

.toppage-header .main-logo {
    width: 100%;
}

.toppage-header .main-logo img {
    width: 100%;
}

.toppage-header .sns-header {
    width: 15%;
    margin-top: 23%;
    margin-left: 47%;
}

.toppage-header .sns-header a {
    display: block;
    width: 100%;
}

.toppage-header .sns-header img {
    width: 100%;
}

/*    トップイメージ    */
/**********************/



@media (max-width: 800px) {

}



/****** トップページ ******/
/*       ヘッダー        */
/* class = main-header */
/*       横並び         */
/*        hover       */
/**********************/
.main-header {
    width: 100%;
    height: 60px;
    background-color: #ffe469;
    box-shadow: 0 3px 5px rgb(255, 255, 255);
    position: sticky;
    right: 0;
    top: 0;
    z-index: 10;
}

.main-header ul {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.main-header ul li {
    font-size: 36px;
    font-weight: bold;
}

.main-header ul li a {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    position: relative;
    text-decoration: none;
}

.main-header ul li a::after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #f00;
    transition: all .3s ease 0s;
}

.main-header ul li a:hover {
    /* cursor: pointer; */
    text-shadow: 2px 2px 0px rgba(87, 33, 1, 0.5), 8px 8px 0px rgba(0, 0, 0, 0.2);
}

.main-header ul li a:hover::after {
    width: 100%;
}

/*      ヘッダー        */
/***** トップページ *****/
/**********************/







/**********メイン**********/
/*  class = toppage-main */
/**ドッグアベニューについて***/
/*   class = dagavenuse  */
/********Dog Avenue*******/
/*   class = maintitle   */
/*    擬似要素で横棒作成    */
/*   fade toRightを作成   */
/*********紹介文***********/
/*  class = fade toTop   */
/*    fade toTopを作成    */
/*******View more...******/
/* class = slide toRight */
/*************************/
.toppage-main {
    width: 100%;
    padding-top: 5%;
}

.dogavenu .maintitle {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dogavenu .maintitle h2 {
    font-size: 48px;
    margin-left: 10%;
}

.dogavenu .maintitle h2::after {
    content: "";
    display: block;
    width: 110px;
    height: 1px;
    background-color: #311200;
    margin-left: -30%;
    position: absolute;
    top: 40px;
    left: 370px;
    opacity: 0;
    transform: translate(-100px, 0);
    transition: all 2s;
}

.dogavenu .maintitle h2.active::after {
    opacity: 1;
    transform: translate(0, 0);
}

.dogavenu .maintitle p {
    font-size: 20px;
}

.bold {
    font-weight: bold;
    background-color: #ebdda470;
}

.dogavenu .fade.toTop {
    width: 80%;
    height: 300px;
    display: flex;
    justify-content: space-around;
    margin-top: 5%;
    margin-left: 7%;
}

.dogavenu .toTop .concept {
    width: 50%;
    background-color: #ffd929;
    padding: 3%;
}

.dogabenue-bc {
    width: 90%;
    background-color: #fff;
    margin: 0 auto;
    padding: 5%;
}

.dogavenu .toTop .concept .p2 {
    display: flex;
    margin-top: 2%;
}

.dogavenu .toTop .concept .p2 .bold {
    width: 27%;
}

.dogavenu .toTop .concept .p2 .nomal {
    width: 73%;
}


.dogavenu .toTop .concept .p3 {
    display: flex;
    margin-top: 2%;
}

.dogavenu .toTop .concept .p4 {
    display: flex;
    margin-top: 2%;
}

.dogavenu .slide a {
    margin-left: 20%;
}

.slide a {
    padding: 1% 2%;
    background-color: #0086cc;
    box-shadow: 0 6px 2px 0px rgba(0, 2, 84, 0.4);
    text-align: center;
    position: relative;
    transition: all ease .3s;
    font-size: 32px;
}

.slide a span {
    position: relative;
    z-index: 1;
    color: #fff;
}

.slide a:hover span {
    color: #0086cc;
}

.slide a::before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    transition: all ease .3s;
}

.slide a:hover::before {
    width: 100%;
}

/*************************/

/******fade作成*******/
.fade {
    opacity: 0;
    transition: all 2s;
}

.fade.toTop {
    transform: translate(0, 100px);
}

.fade.toRight {
    transform: translate(-100px, 0);
}

.fade.toLeft {
    transform: translate(100px, 0);
}

.fade.active {
    opacity: 1;
    transform: translate(0, 0);
}

/*************************/



/******slide作成******/
.slide {
    opacity: 0;
    transition: all 2s;
    margin-top: -2%;
}

.slide.toTop {
    transform: translate(0, 100px);
    font-size: 56px;
    text-align: center;
    display: block;
    margin-top: 5%;
}

.slide.toRight {
    transform: translate(-100px, 0);
}

.slide.toLeft {
    transform: translate(100px, 0);
    font-size: 32px;
}

.slide.active {
    opacity: 1;
    transform: translate(0, 0);
}

/*************************/






/**********コンテンツ*********/
/*     親 toppage-main      */
/*    class = contents     */
/*********CONTENTS**********/
/*   class = slide toTop   */
/*     擬似要素で下棒作成     */
/***********種類別***********/
/* class = kinds-contents  */
/*       背景色をつける      */
/*********wrap範囲**********/
/*      class = kinds     */
/*   display: wrapを使用   */
/*     hover 画像変化      */
/**************************/
.toppage-main .contents {
    width: 100%;
}


h2::after {
    content: "";
    display: block;
    width: 110px;
    height: 1px;
    background-color: #311200;
    position: absolute;
    top: 130px;
    left: 700px;
    opacity: 0;
    transform: translate(0, 100px);
    transition: all 2s 0.5s;
}

h2.active::after {
    opacity: 1;
    transform: translate(0, 0);
}

.toppage-main .contents .kinds-contents {
    background-color: #ffe46950;
    width: 100%;
    margin-top: 10%;
}

.toppage-main .contents .kinds-contents .kinds {
    width: 60%;
    margin: 0 auto;
    padding: 3% 0 0;
    display: flex;
    flex-wrap: wrap;
}

.toppage-main .contents .kinds-contents .kinds .kind {
    margin-left: 5%;
    margin-bottom: 5%;
}

.toppage-main .contents .kinds-contents .kinds a {
    display: block;
    width: 365px;
    aspect-ratio: 3/2;
    border-radius: 30px;
}

.toppage-main .contents .kinds-contents .kinds .kind:nth-child(1) a {
    background-image: url(../img/contents1.png);
    background-repeat: no-repeat;
}

.toppage-main .contents .kinds-contents .kinds .kind:nth-child(2) a {
    background-image: url(../img/contents2.png);
    background-repeat: no-repeat;
}

.toppage-main .contents .kinds-contents .kinds .kind:nth-child(3) a {
    background-image: url(../img/contents3.png);
    background-repeat: no-repeat;
}

.toppage-main .contents .kinds-contents .kinds .kind:nth-child(4) a {
    background-image: url(../img/contents4.png);
    background-repeat: no-repeat;
}

.toppage-main .contents .kinds-contents .kinds .kind:nth-child(1) a:hover {
    background-image: url(../img/contents1-1.png);
    background-repeat: no-repeat;
}

.toppage-main .contents .kinds-contents .kinds .kind:nth-child(2) a:hover {
    background-image: url(../img/contents2-1.png);
    background-repeat: no-repeat;
}

.toppage-main .contents .kinds-contents .kinds .kind:nth-child(3) a:hover {
    background-image: url(../img/contents3-1.png);
    background-repeat: no-repeat;
}

.toppage-main .contents .kinds-contents .kinds .kind:nth-child(4) a:hover {
    background-image: url(../img/contents4-1.png);
    background-repeat: no-repeat;
}

/***********************/







/***********写真***********/
/*     親 toppage-main   */
/*    class = photo     */
/*********PHOTO**********/
/*  class = slide toTop */
/*   擬似要素で下棒作成    */
/* CONTENTSで作成している */
/******スライドショー******/
/*   class = parent    */
/*  視界に入る範囲を設定  */
/*   class = photoes   */
/*  視界以外の範囲を指定  */
/*    同じulを二つ作成   */
/*  アニメーションの設定  */
/***********************/
.toppage-main .photo {
    width: 100%;
}

.toppage-main .photo .parent {
    width: 100%;
    overflow: hidden;
    margin: 10% auto 0;
}

.toppage-main .photo .parent .photoes {
    position: relative;
    width: 200%;
    display: flex;
    animation: looploop 30s linear infinite;

}

.toppage-main .photo .parent .photoes ul {
    list-style: none;
    width: 50%;
    display: flex;
}

.toppage-main .photo .parent:hover .photoes {
    animation-play-state: paused;
}

.toppage-main .photo .parent .photoes ul li {
    width: 20%;
}

.toppage-main .photo .photoes ul li a {
    display: block;
    width: 232px;
    height: 312px;
    font-size: 100px;
    color: #fff;
}

.toppage-main .photo .photoes ul li a img {
    width: 100%;
    height: 100%;
}

@keyframes looploop {
    0% {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/***********************/





/********予約ボタン*********/
/*     親 toppage-main   */
/*    class = button     */
/*   aタグにボタンを作成    */
/*  contact.html以外共通  */
/*************************/
.button a {
    color: #fff;
    font-size: 45px;
    font-weight: bold;
    background: #f00;
    padding: 2% 3%;
    border: 3px solid #333;
    box-shadow: 0 6px 0 rgba(195, 2, 2, 0.4);
    border-radius: 70px;
    display: inline-block;
    transition: .3s;
    margin: 10% 33% 0;
}

.button a:hover {
    background-color: #b00;
    transform: translateY(5px);
    box-shadow: 0 0 0 rgba(195, 2, 2, 0.4);
}

/*************************/
/***********メイン*********/




/**********フッター（共通）*******/
/************場所の情報**********/
/*     class = footer-info    */
/*      display: flex使用      */
/*    googlemapの大きさ指定     */
/*     tableタグで情報作成      */
/********インスタのロゴ配置*******/
/*     class = sns-footer     */
/************フッター***********/
/*   class = footer-contents  */
/*      display: flex使用     */
/*    ロゴとコピーライトの配置   */
/*****************************/

.footer-info {
    margin-top: 10%;
    display: flex;
    background-color: #fce165;
    width: 100%;
}

.footer-info iframe {
    width: 60%;
    aspect-ratio: 2/1;
}

.footer-info table {
    width: 40%;
    border-collapse: collapse;
}

.footer-info table tbody {
    width: 40%;
    height: 360px;
}

.footer-info table tbody tr {
    width: 70%;
    border-bottom: 2px solid #311200;
}

.footer-info table tbody tr:last-child {
    border-bottom: none;
}

.footer-info table tbody tr th {
    font-size: 36px;
    font-weight: bold;
    text-align: left;
    padding-left: 5%;
}

.footer-info table tbody tr td {
    padding-left: 5%;
}

.footer-info table tbody tr td:last-child {
    font-size: 24px;
}

.footer-info table tbody tr td .p-footer .info {
    font-size: 18px;
}

.footer-info table tbody tr td .p-footer .thin {
    font-weight: bold;
    padding-left: 3%;
    margin-top: 3%;
    font-size: 13px;
}

.footer-info table tbody tr td .p-footer dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.footer-info table tbody tr td .p-footer dl dt {
    width: 20%;
}

.footer-info table tbody tr td .p-footer dl dd {
    margin-left: 3%;
}

.sns-footer {
    margin-top: -6%;
    margin-left: 88%;
}

.sns-footer a {
    display: block;
    width: 100px;
    height: 100px;
}

.sns-footer a img {
    width: 100px;
    height: 100px;
}

footer .footer-contents {
    background-color: #ffd929;
    margin-top: -0.7%;
}

footer .footer-contents nav {
    width: 100%;
    height: 60px;
}

footer .footer-contents nav ul {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

footer .footer-contents nav ul li {
    font-size: 36px;
    font-weight: bold;
}

footer .footer-contents nav ul li a {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    position: relative;
    text-decoration: none;
}

footer nav ul li a::after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #f00;
    transition: all .3s ease 0s;
}

footer nav ul li a:hover {
    cursor: pointer;
    text-shadow: 2px 2px 0px rgba(87, 33, 1, 0.5), 8px 8px 0px rgba(0, 0, 0, 0.2);
}

footer nav ul li a:hover::after {
    width: 100%;
}

footer h1 {
    margin-top: 5%;
    margin-left: 35%;
}

footer .cathcopy {
    width: 100%;
    margin-top: 3%;
    margin-left: 48%;
    padding-bottom: 10px;
}

/**********フッター（共通）*******/
/*********index.html*******/





/********ヘッダー(index.html以外)*********/
/*       class = common-header         */
/*          display: flex使用           */
/***************************************/

.common-header {
    width: 100%;
    margin: 0 auto;
}

.common-header .sub-header {
    width: 100%;
    height: 60px;
    background-color: #ffe469;
    display: flex;
    justify-content: space-between;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
    box-shadow: 0 3px 5px rgb(255, 255, 255);
}

.common-header .sub-header .sub-logo {
    width: 30%;
}

.look a {
    color: #fff;
    -webkit-text-stroke: 1px #311200;
}

.look a:hover {
    color: #311200;
}

.common-header .sub-header .sub-logo img {
    width: 100%;
    object-fit: cover;
}

.common-header .sub-header ul {
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.common-header .sub-header ul li {
    width: 20%;
    font-size: 24px;
    /* font-weight: bold; */
    text-align: center;
}

.common-header .sub-header ul li a {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    position: relative;
    text-decoration: none;
}

.common-header .sub-header ul li a::after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #f00;
    transition: all .3s ease 0s;
}

.common-header .sub-header ul li a:hover {
    cursor: pointer;
    text-shadow: 2px 2px 0px rgba(87, 33, 1, 0.5), 8px 8px 0px rgba(0, 0, 0, 0.2);
}

.common-header .sub-header ul li a:hover::after {
    width: 100%;
}

/***********ヘッダー(index.html以外)***************/







/*********メイン(index.html以外)*********/
/*        class = common-main         */
/*        headerとの隙間を空ける         */
/**************************************/
.common-main {
    padding-top: 5%;
}

/*********メイン(index.html以外)*********/





/*********concept.html**********/
/*       class = concept       */
/************CONCEPT************/
/*   class = backimg-concept   */
/*         背景画像を挿入        */
/*   それぞれの文章を横並びにする  */
/*   文章の位置を真ん中揃えにする  */
/******************************/
.common-main .concept {
    width: 100%;
}

.common-main .concept .backimg-concept {
    background-image: url(../img/background2-1.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    aspect-ratio: 16/5;
}

.concept-p {
    width: 80%;
    margin: 10% auto 0;
    /* margin-top: 10%;
    margin-left: 18%; */
}

.p1-concept {
    display: flex;
    align-items: center;
    font-size: 20px;
    letter-spacing: 15px;
    margin-left: 6%;
}


.p2-concept {
    display: flex;
    align-items: center;
    font-size: 24px;
    line-height: 40px;
    letter-spacing: 15px;
    margin-left: 7%;
}


.p3-concept {
    display: flex;
    align-items: center;
    font-size: 20px;
    line-height: 40px;
    letter-spacing: 15px;
}

/************CONCEPT************/




/************ABOUT************/
/*   class = concept-about   */
/*****************************/
.about-concept {
    width: 90%;
    margin-top: 10%;
    background-color: #ffe46950;
    padding: 5%;
}

/************背景色************/
/*   class = about-concept   */
/***********猫も可能***********/
/*    class = cat-concept    */
/*    画像と文章を横並びにする   */
/**************文章***********/
/*     class = p-concept    */
/*     各文章を横並びにする    */
/******お問い合わせボタン*******/
/*    class = fade toLeft  */
/*      ボタンの位置を指定    */
/***************************/
.about-concept .cat-concept {
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffd929;
    margin: 0 auto;
    padding: 5%;
}

.about-concept .cat-concept .catimg {
    width: 40%;
}

.about-concept .cat-concept .catimg  img {
    width: 100%;
}

.about-concept .cat-concept .p-concept {
    width: 50%;
    height: 150px;
    padding: 3%; 
    font-size: 18px;
    background-color: #fff;
}

.about-concept .cat-concept .p-concept .p2 {
    display: flex;
    margin-top: 2%;
}


.about-concept .cat-concept .p-concept .p3 {
    margin-top: 2%;
}

.slide.toLeft {
    margin: -2% 0 5% 55%;
}

/***********猫も可能***********/





/**************背景色**************/
/*     class = about-concept     */
/*************多頭割引*************/
/*      class = dogandcat       */
/*      画像と文章を横並びにする    */
/***************文章*************/
/*       class = p-concept     */
/*       各文章を横並びにする     */
/***********メニューボタン********/
/*    class = slide toRight   */
/*       ボタンの位置を指定      */
/******************************/

.dogandcat {
    width: 70%;
    background-color: #ffd929;
    margin: 10% auto 0;
    padding: 5%;
}

.dogandcat-contents {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.p-concept {
    width: 50%;
    height: 100px;
    background-color: #fff;
    padding: 3%;
    font-size: 18px;
}

.p-concept .p1 {
    display: flex;
}

.p-concept .p2 {
    margin-top: 2%;
}

.dogandcat-img {
    width: 40%;
}

.dogandcat-img img {
    width: 100%;
}

.about-concept .slide.toRight {
    margin-left: 20%;
}

/************多頭割引************/
/**********concept.html*********/






/**************menu&price.html***************/
/*            class = menu-price            */
/**************01.トリミングメニュー************/
/*                class = menu              */
/*                display: flex             */
/*             class = fade toRight         */
/*            afterで文字を入れ、位置調整       */
/*               class = menu-img           */
/*                   配置調整                */
/*******************メニュー表****************/
/*                  tableタグ               */
/*            奇数行だけ背景色をつける         */
/*          初めの行だけ背景色をつけない        */
/*          初めの行だけ二重下線をつける        */
/************シャンプー + 仕上げの内容**********/
/* class = postscript */
/*                  h4の大きさ               */
/*              pタグ 背景色と位置指定         */
/*********************写真*******************/
/*              class = img-flex           */
/*               display: flex             */
/*******************************************/

.menu-price {
    width: 100%;
}

.menu-title {
    width: 100%;
    background-color: #ffe46950;
    margin: 5% auto 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1% 0;
}

.menu-title .fade {
    position: relative;
    font-size: 36px;
    margin-left: 5%;
}

.menu-title .fade::after {
    position: absolute;
    left: 380px;
    top: 5px;
    content: "¥2,000〜";
    display: block;
    color: #a90000;
    opacity: 0.7;
    transform: rotate(-15deg);
}

.menu table {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.menu table tr {
    width: 20%;
    height: 50px;
    font-size: 18px;
}

.menu table tr:nth-child(even) {
    background-color: #ffe46960;
}

.menu table tr:nth-child(1) {
    font-size: 28px;

}

.menu table tr:nth-child(2) {
    height: 0px;
    background-color: #fff;
}

.menu table tr:nth-child(2) th {
    border-top: 1px solid #311200;
    border-bottom: 1px solid #311200;
    height: 3px;
}

.postscript {
    width: 100%;
}

.postscript .fade {
    margin: 5% 0 0 5%;
    font-size: 36px;
}

.postscript p {
    width: 50%;
    margin: 3% 0 0 10%;
    padding: 1%;
    background-color: #ffe46960;
    font-size: 18px;
}

.img-flex {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 5%;
}

.img-flex .img1 {
    width: 15%;
    object-fit: cover;
    transform: rotate(-10deg);
}

.img-flex .img2 {
    width: 15%;
    transform: rotate(15deg);
    margin-top: 5%;
}

.img-flex .img3 {
    width: 15%;
    transform: rotate(-5deg);
}

.img-flex img {
    width: 100%;
}

/**************01.トリミングメニュー************/








/************************単品メニュー*******************/
/*                    class = single                 */
/*                     display: flex                 */
/*********************02.単品メニュー*******************/
/*                   class = single-menu             */
/*                        h3の大きさ                  */
/*                      afterで文字挿入               */
/*                      tableタグの整理               */
/****************************************************/

.single {
    width: 90%;
    background-color: #ffe46950;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5%;
    margin: 5% 0 0;
}

.single .single-img {
    width: 40%;
    object-fit: cover;
    margin-left: 5%;
}

.single .single-img img {
    width: 100%;
}

.single-menu {
    width: 50%;
    margin-right: 5%;
}

.single-menu .fade {
    position: relative;
    text-align: right;
    font-size: 36px;
    margin-right: 15%;
}

.single-menu .fade::after {
    position: absolute;
    content: "各¥500";
    display: block;
    width: 30%;
    color: #a90000;
    opacity: 0.7;
    left: 600px;
    top: 5px;
    transform: rotate(-15deg);
}

.single-menu table {
    width: 70%;
    background-color: #fff;
    margin: 3% auto 0;
    padding: 5%;
    text-align: left;
    font-size: 18px;
}

.single-menu table tr {
    height: 40px;
}

/************************単品メニュー*******************/








/************************セットメニュー*******************/
/*                      class = set                   */
/*                      display: flex                 */
/***********************03.3点セット********************/
/*                    class = set-contents            */
/*                         h3の大きさ                  */
/*                       afterで文字挿入               */
/*                       tableタグの整理               */
/****************************写真**********************/
/*                        class set-img              */
/*                        回転と位置配置               */
/*****************************************************/

.set {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5%;
}

.set .set-contents {
    width: 50%;
    margin-left: 5%;
}

.set .set-contents .fade {
    font-size: 36px;
}

.set .set-contents .fade::after {
    position: absolute;
    left: 250px;
    top: 5px;
    content: "¥1,200";
    display: block;
    color: #a90000;
    opacity: 0.7;
    transform: rotate(-15deg);
}


.set-contents table {
    width: 70%;
    margin-top: 5%;
    background-color: #ffe46960;
    padding: 5%;
    text-align: left;
}

.set-contents table tr {
    width: 100%
}

.set-contents table tr th:first-child {
    width: 50%;
}

.set .set-img {
    width: 40%;
    margin: 5% 5% 0 0;
    transform: rotate(10deg);
}

/************************セットメニュー*******************/







/*****************************シャンプー**********************/
/*                       class = shampoo                   */
/***********************04. 薬浴シャンプー********************/
/*                            h3の大きさ                    */
/*                          afterで文字挿入                 */
/*****************************皮膚**************************/
/*                        class = shampoo1                */
/*                         display: flex                  */
/*                            背景色設定                    */
/*                        画像の回転と位置配置               */
/*                             pタグの設定                 */
/****************************フケ症************************/
/*                         class  shampoo2               */
/*                           背景色設定                    */
/*                           pタグの設定                   */
/*                        画像の回転と位置配置               */
/**********************************************************/

.shampoo {
    width: 90%;
    background-color: #ffe46950;
    margin-top: 10%;
    padding: 5% 0;
}

.shampoo .fade {
    margin: 0 0 0 70%;
    font-size: 36px;
    position: relative;
}

.shampoo .fade::after {
    position: absolute;
    left: 300px;
    top: 5px;
    content: "+￥500";
    display: block;
    color: #a90000;
    opacity: 0.7;
    transform: rotate(-15deg);
}

.shampoo1 {
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 3% auto 0;
    padding: 5%;
    background-color: #ffd929;
}

.shampoo1 .shampoo1-img {
    width: 40%;
    object-fit: cover;
}

.shampoo1 .shampoo1-img img {
    width: 100%;
    aspect-ratio: 2/1;
}

.shampoo1 p {
    width: 30%;
    padding: 5%;
    background-color: #fff;
    text-align: center;
    font-size: 24px;
}

.shampoo .postscript {
    width: 60%;
    font-size: 36px;
    color: #f00;
    margin: 3% auto;
    text-align: center;
    font-weight: bold;
}

.shampoo2 {
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    margin: 3% auto 0;
    padding: 5%;
    background-color: #ffd929;
}

.shampoo2 .shampoo2-img {
    width: 40%;
    object-fit: cover;
}

.shampoo2 .shampoo2-img img {
    width: 100%;
    aspect-ratio: 2/1;
}

.shampoo2 p {
    width: 30%;
    padding: 5%;
    background-color: #fff;
    font-size: 24px;
    text-align: center;
}

/*****************************シャンプー**********************/









/*****************************ATTENTION**********************/
/*                       class = attention                  */
/****************************画像埋め込み**********************/
/*                         class = bacimg1                  */
/*                            リピートあり                    */
/*****************************注意事項************************/
/*                             h3の大きさ                    */
/*                            afterで横棒作成                */
/*                            pタグの位置設定                 */
/************************************************************/

.attention {
    width: 100%;
    margin-top: 10%;
}

.attention .bacimg1 {
    width: 100%;
    height: 768px;
    background-image: url(../img/warning1.png);
    background-repeat: repeat-x;
}

.attention .flex {
    display: flex;
    /* align-items: center; */
    justify-content: space-around;
    padding-top: 10%;
}

.attention .flex .flex-img {
    width: 50%;
    margin-left: 10%;
}

.attention .flex .flex-img img {
    width: 100%;
}

.attention-contents {
    width: 50%;
    margin-top: 5%;
}

.attention-contents .flex-p {
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.attention-contents .flex-p .fade {
    font-size: 42px;
    position: relative;
}

.attention-contents .flex-p h3::after {
    content: "";
    display: block;
    width: 80px;
    height: 1px;
    background-color: #311200;
    position: absolute;
    top: 30px;
    left: 390px;
    opacity: 1;
    transform: translate(-100px, 0);
    transition: all 2s;
}

.attention-contents .flex-p .p-red {
    color: #f00;
    font-size: 24px;
}

.attention-p {
    width: 80%;
    font-size: 18px;
    line-height: 40px;
    margin: 3% 0 0 3%;
}




/******************SERVICE***************/
/*            class = service           */
/*****************コンテンツ**************/
/*        class = service-contents     */
/*             背景色をつける            */
/*             class = baccolor       */
/*            背景色をつける            */
/*         画像と文章を横並びにする       */
/*            それぞれの位置指定         */
/******************文章*****************/
/*           class = service-p        */
/*            背景色をつける            */
/*          各文章を横並びにする         */
/**************************************/

.service {
    width: 100%;
    margin-top: 10%;
}

.service-contents {
    width: 90%;
    background-color: #ffe46950;
    margin: 10% auto 0;
    padding: 5%;
}

.baccolor {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffd929;
    margin: 3% auto;
    padding: 3%;
}

.service-img {
    width: 40%;
}

.service-img img {
    width: 100%;
}

.service-p {
    width: 45%;
    background-color: #fff;
    padding: 3%;
}

.service-p .p1 {
    width: 46%;
    text-align: center;
    margin-left: -0.5%;
}

.service-p .p2 {
    display: flex;
    margin-top: 1%;
    font-weight: bold;
}

.service-p .p-red {
    color: #f00;
}

.service-p .p3 {
    display: flex;
    margin-top: 1%;
    font-weight: bold;
}

.service-p .p-small {
    margin-top: 3%;
}







/************transport.html************/
/*          class = transport         */
/**************送迎について**************/
/*      class = contents-transport    */
/*            背景色をつける            */
/*         画像と文章を横並びにする       */
/*         注意書きの文章の位置指定       */
/******************文章*****************/
/*         class = p-transport        */
/*          各文章を横並びにする         */
/****************料金ボタン**************/
/*         class = slide toLeft       */
/*           ボタンの位置を指定          */
/**************************************/
.transport-contents {
    width: 90%;
    margin-top: 5%;
    background-color: #ffe46950;
    padding: 5%;
}

.contents-transport {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffd929;
    margin: 0 auto;
    padding: 3%;
}

.contents-transport .img-transport {
    width: 40%;
}

.contents-transport .img-transport img {
    width: 100%;
}

.contents-transport .p-small {
    margin-left: 5%;
    margin-top: 2%;
}

.contents-transport .p-transport {
    width: 45%;
    padding: 3%;
    font-size: 20px;
    background-color: #fff;
}

.contents-transport .p-transport .p-transport1 .p2 {
    display: flex;
}

.contents-transport .p-transport .p-transport2 {
    margin-top: 3%;
}

.transport .slide.toLeft {
    margin-top: -2%;
    margin-left: 60%;
}

/************transport.html************/







/************goods.html************/
/***************GOODS**************/
/*          class = goods         */
/***************文章****************/
/*          class = goods-p       */
/*           文字を中央に配置        */
/*       注意書きとの間に隙間を作る    */
/**************電話番号**************/
/*         class = goods-info      */
/*       画像と番号を横並びにする      */
/**********************************/
.goods-p {
    width: 80%;
    margin: 10% auto;
    font-size: 24px;
    text-align: center;
}

.goods-p .bold {
    margin-top: 3%;
}

.reserve-coll {
    width: 80%;
    display: flex;
    align-items: center;
    margin: 3% auto 0;
}

.reserve-coll .coll {
    width: 20%;
}

.reserve-coll .coll img {
    width: 100%;
}

.reserve-coll .p-info {
    width: 75%;
    font-size: 36px;
    color: #f00;
    letter-spacing: 15px;
}

/***************GOODS**************/






/*****************料金***************/
/*       class = goods-price       */
/*           背景色をつける          */
/*      class = contents-goods     */
/*       画像と文章を横並びにする      */
/***************Price***************/
/*        class = price-goods      */
/*          文字を横並びにする        */
/*          擬似要素で横棒作成        */
/*  fade toLeft でアニメーション作成  */
/****************値段***************/
/*        class = foodprice        */
/*             after:白            */
/*         tableタグで位置指定       */
/*         注意書きの位置指定         */
/***********************************/
.goods-price {
    width: 90%;
    margin: 5% auto 0;
    padding: 5%;
    background-color: #ffe46950;
}

.goods-price .contents-goods {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.goods-price .contents-goods .img-goods {
    width: 40%;
}

.goods-price .contents-goods .img-goods img {
    width: 100%;
    object-fit: cover;
} 

.contents-goods .price-goods {
    width: 40%;
    margin: 0 auto;
}

.contents-goods .price-goods .food-h3 h3 {
    font-size: 48px;
}

.goods-price .contents-goods .price-goods {
    width: 40%;
    font-size: 20px;
}


.goods-price .contents-goods .price-goods .food-h3 {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-left: -30%; */
    position: relative;
}

.goods-price .contents-goods .price-goods h3::after {
    content: "";
    display: block;
    width: 80px;
    height: 1px;
    background-color: #311200;
    position: absolute;
    top: 40px;
    left: 130px;
    opacity: 0;
    transform: translate(100px, 0);
    transition: all 3.5s;
}

.goods-price .contents-goods .price-goods h3.active::after {
    opacity: 1;
    transform: translate(0, 0);
}

.goods-price .contents-goods .price-goods .food-h3 p {
    font-size: 24px;
}

.goods-price .contents-goods .price-goods .foodprice {
    width: 90%;
    background-color: #fff;
    margin: 3% auto 0;
    padding: 3%;
}

.goods-price .contents-goods .price-goods .foodprice .kinds {
    text-align: left;
    height: 50px;
}

.goods-price .contents-goods .price-goods .foodprice .dotted {
    width: 250px;
}

.foodprice p {
    margin-top: 10%;
}

/*****************料金***************/
/************goods.html************/





/************contact.html************/
/**************RESERVE***************/
/*         class = contact1         */
/*      それぞれの文字の大きさ指定      */
/*        各文章の間に隙間を作る       */
/***********************************/
.reserve {
    width: 100%;
}

.reserve-info {
    width: 80%;
    text-align: center;
    margin: 5% auto;
    font-size: 24px;
}

.reserve-info .reserve-p {
    margin-top: 3%;
}


.start-p {
    font-size: 24px;
}



/**************RESERVE***************/





/**************トリミングの予約***************/
/*        class = triming-reserve         */
/*              display: flex             */
/***********01.トリミングのご予約*************/
/*          class = triming-info          */
/*           h3の文字の大きさの指定          */
/*               背景色をつける             */
/******************電話番号*****************/
/*              display: flex            */
/*                 位置調整               */
/******************注意書き****************/
/*                 位置調整               */
/*****************************************/
.triming-reserve {
    width: 90%;
    margin: 3% 0;
    padding: 5%;
    background-color: #ffe46950;
    display: flex;
    justify-content: space-around;
}

.triming-info {
    width: 50%;
}

.common-main h3 {
    font-size: 48px;
}

.triming-bc {
    width: 75%;
    background-color: #fff;
    padding: 3%;
    margin: 3% auto;
}

.triming-bc .triming-p {
    width: 80%;
    height: 100px;
    margin: 0 auto;
    font-size: 20px;
}

.triming-bc .coll {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 3% auto 0;
}

.triming-bc .coll .coll-img {
    width: 20%;
}

.triming-bc .coll img {
    width: 100%;
}

.triming-bc .coll p {
    font-size: 24px;
    letter-spacing: 8px;
}

.triming-img {
    width: 40%;
    margin-top: 2%;
}

.triming-img img {
    width: 100%;
}

.warming-p {
    margin-top: 3%;
    margin-left: 15%;
    padding-bottom: 5%;
}

/**************トリミングの予約***************/








/*****************送迎の予約*****************/
/*        class = transfer-reserve        */
/*              display: flex             */
/*************02.送迎のご予約****************/
/*          class = transfer-info         */
/*           h3の文字の大きさの指定          */
/*               背景色をつける             */
/******************************************/
.transfer-reserve {
    width: 90%;
    margin: 5% auto;
    padding: 5%;
    background-color: #ffe46950;
    display: flex;
    justify-content: space-around;
}

.transfer-img {
    width: 40%;
}

.transfer-img img {
    width: 100%;
}

.transfer-info {
    width: 50%;
}

.transfer-bc {
    width: 85%;
    background-color: #fff;
    padding: 3%;
    margin: 3% auto;
}

.transfer-p {
    width: 80%;
    height: 100px;
    margin: 5% auto 0;
    font-size: 20px;
}

.transfer-coll {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: -25%;
    margin-left: 20%;
}

.transfer-bc .coll {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 3% auto 0;
}

.transfer-bc .coll .coll-img {
    width: 20%;
}

.transfer-bc .coll img {
    width: 100%;
}

.transfer-bc .coll p {
    font-size: 24px;
    letter-spacing: 8px;
}

.transfer-coll .p-info {
    font-size: 18px;
    letter-spacing: 8px;
}

/*****************送迎の予約*****************/






/*****************HOLIDAY*****************/
/*             class = holiday           */
/*                 文字の配置             */
/*****************************************/
.holiday-info {
    margin-top: 5%;
    text-align: center;
}

.holiday-info .nomal {
    font-size: 24px;
    margin-top: 1.5%;
}

/*****************HOLIDAY*****************/
/************contact.html************/