@charset "UTF-8";

/* A Modern CSS Reset */ 
*,
*::before,
*::after{
  box-sizing:border-box
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd{
  margin:0
}
ul[role="list"],
ol[role="list"]{
  list-style:none
}
/*
html:focus-within{
  scroll-behavior:smooth
}
*/
body{
  min-height:100vh;
  text-rendering:optimizeSpeed;
}
a:not([class]){
  text-decoration-skip-ink:auto
}
img,
picture{
  max-width:100%;
  display:block
}
input,
button,
textarea,
select{
  font:inherit
}
@media(prefers-reduced-motion:reduce){
  html:focus-within{
    scroll-behavior:auto
  }
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important
  }
}


/* --------------------------------------
-----------------------------------------
COMMON
-----------------------------------------
----------------------------------------- */ 

body {
  font-family: "Klee One", cursive;
  font-weight: 400;
  color: #070606;
  font-size: 12px;
  line-height:1.5;
  background: url("../images/BG.jpg") repeat;
  background-position: center;
  background-size: 200px auto;
}

body.addstyle {
  height: 100%;
  overflow: hidden;
}
@media screen and (min-width: 960px) {
  body {
    font-size: 16px;
    background-size: 300px auto;
  }
}

a {
  color: #070606;
  text-decoration: none;
  transition: 0.3s;
}
a:hover {
  color: #df1966;
  transition: 0.3s;
}

/* --------------------------------------
FONT
----------------------------------------- */ 

.F_handwrite {
  font-family: "Homemade Apple", cursive;
  font-weight: 400;
}

.F_w_400 {
  font-weight: 400;
}
.F_w_600 {
  font-weight: 600;
}

.al_C {
  text-align: center;
}

/* --------------------------------------
COLOR
----------------------------------------- */ 

.color_bk {
  color: #070606;
}
.color_bk_bg {
  background: #070606;
}
.color_lbk_bg {
  background: rgb(7, 6, 6,.1);
}
.color_wh_bg {
  background: #fff;
}
.color_pk {
  color: #df1966;
}
.color_pk_bg {
  background: #df1966;
}
.color_lpk_bg {
  background: rgba(223, 25, 101, 0.2);
}
.color_flwr_pk_bg {
  background-image: url(../images/bg_pk.png);
  background-repeat: repeat;
  background-position: center;
  background-size: 100px;
}
.color_flwr_bk_bg {
  background-image: url(../images/bg_bk.png);
  background-repeat: repeat;
  background-position: center;
  background-size: 100px;
}


/* --------------------------------------
.vsbl____
----------------------------------------- */ 
.vsbl_pc,
.vsbl_pc.flex,
.vsbl_pc.flex_C {
  display: none;
}

.vsbl_sp {
  display: block;
}

@media screen and (min-width: 960px) {
  .vsbl_pc {
    display: block;
  }
  .vsbl_sp{
    display: none;
  }
  .vsbl_pc.flex,
  .vsbl_pc.flex_C {
    display: flex;
  }
}

/* --------------------------------------
POSITION
----------------------------------------- */ 

.p_rltv {
  position: relative;
}
.p_abslt {
  position: absolute;
}

/* --------------------------------------
FLEX
----------------------------------------- */ 
.flex {
  display: flex;
}
.flex_C {
  display: flex;
  align-items: center;
}
.flex_T {
  display: flex;
  align-items:start;
}
.flex_sb {
  justify-content: space-between;
}
.flex_sa {
  justify-content: space-around;
}
.flex_rev {
  flex-direction: row-reverse;
}
.flex_wrap {
  flex-wrap: wrap;
}
@media screen and (min-width: 960px) {
  .flex_part {
    display: flex;
  }
  .flex_part_flex_C {
    display: flex;
    align-items: center;
  }
}

/* --------------------------------------
.scrlitem
----------------------------------------- */ 

.scrlitem{
  transform: translateY(40px);
  opacity: 0;
  transition: .8s;
}
.scrlitem.addstyle{
  transform: translateY(0);
  opacity: 1;
}

/* --------------------------------------
-----------------------------------------
header
-----------------------------------------
----------------------------------------- */ 

header {
  width: 100%;
  position: fixed;
  z-index: 10;
  transition: all 0.3s 0.3s; 
  padding: 15px 20px;
}

header.hide {
  transform: translateY(-66px); 
}
header.addstyle {
    background: rgb(255, 255, 255,.8);
}

header h1 {
  width: 100px;
}
header h1 a {
  display: block;
}
header h1 a:hover {
  background: url(../images/logo_p.svg) no-repeat;
  background-size: 100% auto;
}
header h1 img {
  display: block;
  width: 100%;
  height: auto;
}
header h1 a:hover img {
  opacity: 0;
  transition: 0.3s;
}

@media screen and (min-width: 960px) {
  header {
    padding: 10px;
  }
  header > div {
    max-width: 1430px;
    margin: 0 auto;
  }
  header h1 {
    width: 160px;
  }
}

/* --------------------------------------
G_navi
----------------------------------------- */ 
/* menu list
----------------------------------------- */ 

.menu_content li a {
  display: block;
  padding: 10px 0;
  font-size: 18px;
}
.menu_content li.ico a {
  width: 50px;
  margin-right: auto;
  background: url(../images/insta.svg) no-repeat ;
  background-size: 100% auto;
  background-position: center;
}
.menu_content li.ico img {
  transition: 0.3s;
}
.menu_content li.ico img:hover {
  opacity: 0;
  transition: 0.3s;
}
.menu_content li.tel {
  margin-top: 10px;
}
.menu_content li.tel a {
  max-width: 500px;
  vertical-align:sub;
  font-size: 20px;
  border: solid 2px;
  border-radius: 8px;
  margin-top: 3px;
}
.menu_content li.tel .material-symbols-outlined {
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;
  vertical-align:sub;
  font-size: 24px;
}

@media screen and (min-width: 428px) {
  .menu_content li.tel a {
    font-size: 28px;
  }
  .menu_content li.tel .material-symbols-outlined {
    font-size: 32px;
  }
}

@media screen and (min-width: 960px) {
  .menu_content li a {
    padding: 10px 20px;
  }
  .menu_content li.ico a {
    padding: 8px 0;
    width: 30px;
    margin-left: 10px;
  }
}

/* .menu_btn and menu toggle
----------------------------------------- */ 
.menu_btn{
	position: fixed;
	top: 10px;
	right: 16px;
	z-index: 9999;
	width: 40px;
	height: 40px;
	cursor: pointer;
}
.menu_btn i{
	display: block;
	position: absolute;
	left: 0;
	width: 40px;
	height: 2px;
	background: #070606;
	opacity: 1;
	transition: 0.3s;
}
.menu_btn i:nth-child(1){
	top: 5px;
}
.menu_btn i:nth-child(2),.menu_btn i:nth-child(3){
	top: 50%;
	transform: translateY(-50%);
}
.menu_btn i:nth-child(4){
	bottom: 5px;
}
.menu_btn.close i:nth-child(1),.menu_btn.close i:nth-child(4){
	opacity: 0;
}
.menu_btn.close i:nth-child(2){
	transform: rotate(45deg);
}
.menu_btn.close i:nth-child(3){
	transform: rotate(-45deg);
}
.menu_wrap{
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgb(7, 6, 6,.5);
	opacity: 0;
	transition: 0.3s;
}
.menu_wrap.open{
	visibility: visible;
	opacity: 1;
}
.menu_wrap .menu_content{
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	right: 0;
	transform: translateX(100%);
	width: 68vw;
	max-width: 640px;
	height: 100vh;
	padding: 60px 20px 20px;
  margin: 0;
	background: #fff;
	transition: 0.5s;
}
.menu_wrap.open .menu_content{
	transform: translateX(0);
}

@media screen and (min-width: 960px) {
  .menu_wrap{
    visibility: visible;
    position: relative;
    top: inherit;
    left: inherit;
    width: auto;
    height: auto;
    background:transparent;
    opacity: 1;
  }
  .menu_wrap.open{
    visibility: visible;
    opacity: 1;
  }
  .menu_wrap .menu_content{
    flex-direction:inherit;
    position: relative;
    top: inherit;
    right: inherit;
    transform:none;
    width: auto;
    max-width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .menu_wrap.open .menu_content{
    transform: none;
  }
}

/* --------------------------------------
-----------------------------------------
main
-----------------------------------------
----------------------------------------- */
/* --------------------------------------
main_COMMON
----------------------------------------- */ 
.inner {
  max-width: 1430px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

h2 {
  font-size: 180%;
}
h2.engstyle {
  padding: 35px 0 40px 0;
}
h2.engstyle strong {
  font-size: 200%;
  opacity: .2;
  left: 0;
  top: 0;
  transform: rotate(-8deg);
}
h2.engstyle.al_C strong {
  left: 50%;
  margin-left: -180px;
}
h2.engstyle span {
  border-top: solid 1px;
}

h3 {
  font-size: 160%;
}
h3.engstyle::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  background: rgb(223, 25, 102);
  position: absolute;
  left: -10px;
  top: -10px;
}
h3.engstyle {
  padding: 30px 0 40px 55px;
}
h3.engstyle strong {
  font-size: 130%;
  opacity: .2;
  left: 5px;
  top: 0;
}
h3.engstyle span {
  position: relative;
}
h3.engstyle span::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background: rgb(7, 6, 6,1);
  position: absolute;
  left: -35px;
  top: 0;
}

.atn p {
  padding: 5px 0 0 20px;
  position: relative;
}
.atn p::before {
  content: '＊';
  position: absolute;
  left: 0;
  top: 5px;
}
@media screen and (min-width: 428px) {
h2.engstyle strong {
}
}
@media screen and (min-width: 960px) {
  h2.engstyle {
    padding: 50px 0 80px 0;
  }
  h2.engstyle.al_C strong {
    margin-left: -250px;
  }
  h3.engstyle::before {
    width: 100px;
    height: 100px;
    left: -30px;
    top: -30px;
  }
  h3.engstyle {
    padding: 40px 0 60px 100px;
  }
  h3.engstyle strong {
    left: 30px;
  }
  h3.engstyle span::before {
    width: 60px;
    height: 60px;
    left: -70px;
    top: 0;
  }
}

/* --------------------------------------
#KV
----------------------------------------- */ 
.kv_height {
  height: 500px;
}

#KV .cover {
  width: 100%;
  background-image: url(../images/KV_bg_960.png);
  background-repeat: no-repeat;
  background-size: 960px auto;
  background-position: top left;
  left: 0;
  top: 0;
}
  #KV .cover p {
    left: 30px;
    bottom: 30px;
    width: 280px;
  }

@media screen and (min-width: 960px) {
  .kv_height {
    height: 630px;
  }
  #KV .cover {
    background-image: url(../images/KV_bg_1430.png);
    background-size: 1430px auto;
  }
  #KV .cover p {
    left: 60px;
    width: 380px;
  }
}

@media screen and (min-width: 1430px) {
  .kv_height {
    height: 730px;
  }
  #KV .cover {
    max-width: 1800px;
    background-image: url(../images/KV_bg_1430-.png);
    background-size: 1800px auto;
    background-position: center -120px;
    left: 50%;
    margin-left: -900px;
  }
  #KV .cover p {
    left: 300px;
    bottom: 30px;
    width: 460px;
  }
}

/* #SLIDE
----------------------------------------- */ 

.slide div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -250px bottom;
  margin: 0;
}

.slide .slide_01 {
  background-image: url(../images/KV_001.png);
}
.slide .slide_02 {
  background-image: url(../images/KV_002.png);
}
.slide .slide_03 {
  background-image: url(../images/KV_003.png);
}

@media screen and (min-width: 428px) {
  .slide div {
    background-position: right bottom;
    margin: 0;
  }
}

@media screen and (min-width: 1430px) {
  .slide div {
    background-size: 1430px auto;
    background-position: center bottom;
  }
}
/* --------------------------------------
#C_01  ABOUT
----------------------------------------- */ 
#C_01 {
  padding: 40px 0;
}

#C_01 .content_01 h2 span:first-of-type{
  padding-right: 40px;
}
#C_01 .content_01 h2 span:last-of-type {
  display: block;
  padding-left: 30px;
}
#C_01 .content_01 .txt div {
  line-height: 2;
  padding: 20px 0;
}
#C_01 .content_01 .img {
  height: 90vw;
}
#C_01 .content_01 .img .img_01 {
  width: 50%;
  height: auto;
  right: 0;
  top: 0;
}
#C_01 .content_01 .img .img_02 {
  width: 45%;
  height: auto;
  left: 10%;
  top: 10%;
}
#C_01 .content_01 .img .img_03 {
  width: 65%;
  height: auto;
  left: 0;
  top: 50%;
}

#C_01 .content_02 {
  padding-bottom: 200px;
  background: url("../images/C_01_prof.png") no-repeat;
  background-size: 50% auto;
  background-position: right bottom;
}
#C_01 .content_02 h2 {
  padding: 35px 0 40px 40px;
}
#C_01 .content_02 ul {
  margin: 20px 0 0;
  padding-left: 20px;
}
#C_01 .content_02 li:not(:first-child) {
  padding-top: 10px;
}

@media screen and (min-width: 960px) {
  #C_01 {
    padding: 80px 0 150px;
  }
  #C_01 .inner {
    background: url("../images/C_01_prof.png") no-repeat;
    background-size: 300px auto;
    background-position: 26% bottom;
  }

  #C_01 .content_01 {
    margin-bottom: 100px;
  }
  #C_01 .content_01 .txt {
    padding: 80px 0 100px;
    width: 50%;
  }
  #C_01 .content_01 .img {
    height: auto;
    width: 40%;
    margin-right: auto;
  }
  #C_01 .content_01 .img .img_01 {
    width: 250px;
  }
  #C_01 .content_01 .img .img_02 {
    width: 180px;
    left: -30px;
    top: 100px;
  }
  #C_01 .content_01 .img .img_03 {
    width: 350px;
    top: inherit;
    bottom: 0;
  }

  #C_01 .content_02 {
    padding-bottom: 0;
    width: 50%;
    margin: 60px 5% 0 auto;
    background: none;
  }
}

@media screen and (min-width: 1430px) {
  #C_01 .content_01 .txt {
    padding: 80px 0 140px;
  }
  #C_01 .content_01 .img .img_01 {
    width: 280px;
  }
  #C_01 .content_01 .img .img_02 {
    width: 260px;
    left: -60px;
    top: 40px;
  }
  #C_01 .content_01 .img .img_03 {
    width: 400px;
    top: inherit;
    bottom: 0;
  }
}
/* --------------------------------------
#C_02  RECOMMEND
----------------------------------------- */ 

#C_02 {
  padding-bottom: 40px;
}

#C_02 .content_01,
#C_02 .content_02 {
  padding-bottom: 40px;
}
#C_02 .content_02 {
  margin-top: 40px;
}

#C_02 .content_01 .spa_flow {
  margin-top: 30px;
  padding: 60vw 0 0;
  background: url("../images/C_02-001_sp.jpg") no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
#C_02 .content_01 h4 {
  font-size: 180%;
  background: rgba(223, 25, 101, 1);
  color: #fff;
}
#C_02 .content_01 h4 span {
  font-size: 180%;
  padding: 0 5px 0 10px;
}
#C_02 .content_01 h4 small {
  font-size: 60%;
}
#C_02 .content_01 ul {
  margin: 0 auto ;
  padding: 0;
  font-size: 130%;
}
#C_02 .content_01 li {
  padding: 10px 0;
  background: rgba(223, 25, 101, 0.05);
  margin-top: 20px;
  border-radius: 6px 6px 0 0;
  border-bottom: solid 2px rgba(223, 25, 101, 0.6);
  position: relative;
}
#C_02 .content_01 li::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-bottom: 0 solid transparent;
  border-top: 8px solid rgba(223, 25, 101, 0.6);
  left: 50%;
  margin-left: -20px;
  bottom: -10px;
}
#C_02 .content_01 li:last-child::after {
  display: none;
}

#C_02 .content_02 .txt h4 {
  font-size: 120%;
  background: rgba(223, 25, 101, 1);
  color: #fff;
  line-height: 1.3;
  padding: 10px;
  margin: 0 auto 30px;
}
#C_02 .content_02 .txt h4 span {
  font-size: 220%;
  padding: 0 5px 0 10px;
}
#C_02 .content_02 .txt h4 small {
  font-size: 60%;
}
#C_02 .content_02 .txt h4 > small {
  font-size: 80%;
}
#C_02 .content_02 .recommend {
  border: dashed 1px rgba(223, 25, 101, .5);
  margin: 30px auto 0;
}
#C_02 .content_02 .recommend h4 {
  margin: 0 auto ;
  padding: 0;
  font-size: 180%;
  background: rgba(223, 25, 101, 0.05);
  padding: 10px 0;
}
#C_02 .content_02 ul {
  margin: 20px ;
  padding: 0;
  font-size: 120%;
}
#C_02 .content_02 li {
  padding: 10px 0 10px 36px ;
  border-bottom: dashed 1px rgba(223, 25, 101, .5);
  position: relative;
}
#C_02 .content_02 li i {
  position: absolute;
  left: 0;
  margin-top: -16px;
  top: 50%;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;
  font-size: 32px;
  color: rgba(223, 25, 101, 1);
}
#C_02 .content_02 li:last-child {
  border:none;
}

@media screen and (min-width: 428px) {
  #C_02 .content_01 ul {
    margin: 0 auto ;
    padding: 0;
    font-size: 140%;
  }
  #C_02 .content_02 .txt h4 br {
    display: none;
  }
}

@media screen and (min-width: 960px) {
  #C_02 {
    padding-bottom: 80px;
  }

  #C_02 .content_01 {
    max-width: 960px;
  }
  #C_02 .content_02 {
    max-width: 960px;
    margin-left: auto;
  }

  #C_02 .content_01 .inner p {
    text-align: center;
    margin-bottom: 40px;
  }

  #C_02 .content_01 .spa_flow {
    padding: 0;
    margin: 0;
    background: url("../images/C_02-001.jpg") no-repeat;
    background-position: left center;
    background-size: auto 120% ;
  }
  #C_02 .content_01 .spa_flow div {
    width: 50%;
    margin-left: auto;
  }

  #C_02 .content_02 {
    margin-top: 80px;
  }
  #C_02 .content_02 .txt,
  #C_02 .content_02 .img {
    width: 50%;
  }
  #C_02 .content_02 .recommend {
    width: 80%;
  }
}

/* --------------------------------------
#C_03  MENU
----------------------------------------- */ 
#C_03 {
  padding: 40px 0;
}

#C_03 h2.engstyle.al_C strong {
  margin-left: -120px;
}

#C_03 table {
  width: 100%;
  display: block;
  font-size: 120%;
  margin-top: 20px;;
}

#C_03 caption {
  display: block;
  width: 100%;
  font-size: 180%;
  position: relative;
  padding: 5px 0 0 20px;
  text-align: left;
  border-bottom: solid 2px rgb(7, 6, 6,.05);
  margin-bottom: 10px;
}
#C_03 caption span {
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(223, 25, 101, .2);
}
#C_03 caption small {
  font-weight: 600;
}

#C_03 tbody {
  display: table;
  width: 100%;
}
#C_03 th,
#C_03 td {
  text-align: right;
  padding: 5px 0;
}
#C_03 th {
  width: 75%;
}
#C_03 td {
  width: 25%;
}

#C_03 .atn {
  margin-top: 20px;
}

@media screen and (min-width: 960px) {
  #C_03 {
    padding: 80px 0;
  }
  #C_03 .inner {
    max-width: 1200px;
  }

  #C_03 table {
    width: 47%;
    margin-top: 40px;
  }
  #C_03 table:nth-of-type(odd) {
    margin-right: 6%;
  }
  #C_03 caption {
    padding: 10px 0 0 36px;
  }
}


/* --------------------------------------
#C_04
----------------------------------------- */ 
/* .map
----------------------------------------- */ 
.map iframe {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  width: 100%;
  height: 300px;
  border: none;
}
.map {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  width: 100%;
}
.map > div {
  position: relative;
}
.map > div::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: rgb(223, 25, 102,.1);
}

/* address
----------------------------------------- */ 
#C_04 .inner {
  padding-top: 40px;
  padding-bottom: 40px;
}
#C_04 h2 {
  margin-bottom: 20px;
}

@media screen and (min-width: 960px) {
  .map iframe {
    height: 400px;
  }
  #C_04 .inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* --------------------------------------
#C_05
----------------------------------------- */ 
#C_05 {
  padding: 40px 0 0;
}

#C_05 .img {
  max-width: 500px;
  margin: 0 auto 30px;
}

#C_05 .open p:first-of-type {
  font-size: 300%;
}
#C_05 .open p:nth-of-type(2) {
  font-size: 200%;
}
#C_05 .open p:last-of-type {
  font-size: 160%;
}

#C_05 .entryhours {
  width: 80%;
  max-width: 400px;
  margin: 30px auto ;
  border: solid 1px rgb(7, 6, 6,.1);
}
#C_05 .entryhours h3 {
  padding: 5px 0;
}

/* .contact
----------------------------------------- */ 
#C_05 .contact{
  margin-top: 30px;
}
#C_05 .contact a{
  display: block;
  padding: 20px 0;
}
#C_05 .contact .material-symbols-outlined {
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;
  vertical-align:sub;
  font-size: 40px;
}
#C_05 .contact p {
  font-size: 36px;
}
@media screen and (min-width: 428px) {
  #C_05 .contact .material-symbols-outlined {
    font-size: 44px;
  }
  #C_05 .contact p {
    font-size: 40px;
  }
}

@media screen and (min-width: 960px) {
  #C_05 {
    padding: 80px 0 0;
  }
  #C_05 .txt {
    width: 60%;
  }
  #C_05 .img {
    width: 30%;
    margin: 0 0 0 auto;
  }
  #C_05 .entryhours {
    max-width: 450px;
    margin: 30px auto 0;
  }
  #C_05 .atn {
    margin-top: 40px;
  }
  #C_05 .contact{
    margin-top: 60px;
  }
  #C_05 .contact a{
    padding: 40px 0;
    transition: 0.3s;
  }
  #C_05 .contact a:hover {
    background: #df1966;
    color: #fff;
    transition: 0.3s;
  }
}


/* --------------------------------------
-----------------------------------------
FOOTER
-----------------------------------------
----------------------------------------- */ 

footer img {
  width: 100%;
  height: auto;
}

footer nav {
  width: 100%;
  z-index: 10;
  transition: transform 0.3s 0.3s;
  left: 0;
  bottom: 5px;
  position: fixed;
  line-height: 1.3;
}
footer nav.hide {
  transform: translateY(75px); 
}

footer nav .tel {
  width: calc(100% - 70px);
  font-size: 25px;
  padding: 3px 0 ;
  border-radius: 10px;
}
footer nav .tel .material-symbols-outlined {
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;
  vertical-align:sub;
  font-size: 29px;
}
footer nav .tel:hover {
  color: #070606;
}
footer nav small {
  display: block;
  font-size: 12px;
}
footer nav .ico {
  width: 60px;
  padding: 15px;
  border-radius: 50px;
}

footer .logo a {
  display: block;
  width: 250px;
  margin: 30px auto 5px;
  transition: 0.3s;
}
footer .logo a:hover {
  background: url("../images/logo_p.png");
  background-size: 100% auto;
  transition: 0.3s;
}
footer .logo a img{
  opacity: 1;
}
footer .logo a:hover img{
  transition: 0.3s;
  opacity: 0;
}

footer .copy {
  display: block;
  margin-bottom: 100px;
}

@media screen and (min-width: 428px) {
  footer nav .tel {
    width: calc(100% - 80px);
    font-size: 32px;
  }
  footer nav .tel .material-symbols-outlined {
    font-size: 36px;
  }
}

@media screen and (min-width: 960px) {
  footer .logo a {
    margin: 60px auto 30px;
  }
  footer .copy {
    margin-bottom: 10px;
  }
}