﻿@charset "UTF-8";

/*********************
overRide
*********************/
[data-button-name]{ transition: all var(--transition-default);}
[data-button-name]::after{ transition: all var(--transition-default);}
button:not([data-button-name]){ transition: opacity var(--transition-default);}
a:not([data-button-name]){ transition: opacity var(--transition-default);}


:root {
  --hoverTransition : opacity .3s ease;
  --hoverOpacity : .6;
  --headNavOpenHeight: 0;
  --contentsMargin: 10rem;
}

html {
    font-size: 62.5%;
}

@media screen and (max-width: 767px) {
  html {
    font-size: calc((10 * (100vw / 375)));
  }
}

body{
  background: #FDF9F2;
  font-family: var(--font-main);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #454140;
}

#care{

}


@media (hover: none) {
  a:active{
    opacity: var(--hoverOpacity);
  }
}


/**************************************
#header
**************************************/
#headerPalette{
	display: block;
	width: 100%;
  padding-bottom: 7rem;
}

#headerPalette a{text-decoration: none;}

#headerPalette .outer{
  display: block;
  width: calc(100% - 2rem);
  height: 7rem;
  padding: 0;
  position: fixed;
  top: 0;
  left: 1rem;
  z-index: 20;

  border-radius: 1rem;
  background: rgba(253,249,242,0);
  transition: backdrop-filter .3s ease,box-shadow .3s ease,background .3s ease,height .2s ease,top .2s ease;
}

#headerPalette.move .outer{
  background-color: rgba(253,249,242,.9);
	-webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0px 0px 40px rgba(72,61,56,.1);
  top: 1rem;
}


#headerPalette .headMain{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 6rem 0 1.5rem;
}

#headerPalette .headLogo{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 11.5rem;
  height: 100%;
}

#headerPalette .headLogo > a,
#headerPalette .headLogo img{
  display: block;
  width: 100%;
  height: auto;
}

/* headUserPageBtn *************/
#headerPalette .headUserPageBtn{
  display: block;
  width: 4rem;
  height: 4rem;
}
#headerPalette .headUserPageBtn img{
  display: block;
  width: 100%;
  height: auto;
}


/* #headNav *************/
#headNav{
  display: block;
  width: 4rem;
  height: 4rem;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
}

#headNavOpen{
  display: block;
  width: 100%;
  height: 100%;
  transition:  var(--hoverTransition);
}

@media (hover: none) {
  #headNavOpen:active{
    opacity: var(--hoverOpacity);
  }
}

#headNavOpen > img{
  display: block;
  width: 100%;
  height: auto;
}

#headNav .headNavInner{
  display: block;
  width: 100vw;
  height: 100dvh;
  padding: 3.5rem 0 0;
  background: #FDF9F2;
  opacity: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
  transition: transform 0.3s ease,opacity 0.2s ease;
  transform: translate(100vw,0);
  backface-visibility: hidden;
}

#headerPalette.move #headNav .headNavInner{
  top: -1rem;
  right: -1rem;
}

#headNav > .headNavInner::after{
  content: '';
  display: block;
  height: 6rem;
  background: #FDF9F2;
}

#headNav.active > .headNavInner{
  transform: translate(0,0);
  opacity: 1;
  z-index: 1;
}

/** sp */
#headNavClose{
  display: block;
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
  transition:  var(--hoverTransition);
}

@media (hover: none) {
  #headNavClose:active{
    opacity: var(--hoverOpacity);
  }
}

#headNavClose img{
  display: block;
  width: 100%;
  height: 100%;
}


#headNav .navInnerLogo{
  display: block;
  width: 14.5rem;
  margin: 0 auto 3rem;
}
#headNav .navInnerLogo a,
#headNav .navInnerLogo img{
  display: block;
  width: 100%;
  height: auto;
}

/** headUtilityNav */
#headNav .headUtilityNav{
  width: 24.5rem;
  margin: 0 auto 4rem;
}

#headNav .headUtilityNav > ul{
  display: block;
}

#headNav .headUtilityNav > ul > li{
  display: block;
}
#headNav .headUtilityNav > ul > li + li{
  margin-top: 1rem;
}

#headNav .headUtilityNav > ul > li > a,
#headNav .headUtilityNav > ul > li > span{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0 0.5rem;
  height: 5.5rem;
  padding: 0 0 0 1rem;
  border-radius: 5px;
  background: #FD873E;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
  white-space: nowrap;
  color: #FFFFFF;
  cursor: pointer;
  transition: var(--hoverTransition);
  position: relative;
}

#headNav .headUtilityNav > ul > li > a::after,
#headNav .headUtilityNav > ul > li > span::after{
  content: '';
  display: block;
  width: 2rem;
  height: 2rem;
  background: url("../Contents/ThemeImage/common/icon_arrow_right.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: 1.5rem;
  top: 1.8rem;
}

#headNav .headUtilityNav > ul > li > a > span,
#headNav .headUtilityNav > ul > li > span > span{
  padding-top: 0.2rem;
}

#headNav .headUtilityNav > ul > li.user{}
#headNav .headUtilityNav > ul > li.user > a::before,
#headNav .headUtilityNav > ul > li.user > span::before{
  content: '';
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background: url("../Contents/ThemeImage/common/icon_user.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
}

#headNav .headUtilityNav > ul > li.contact{}
#headNav .headUtilityNav > ul > li.contact > a,
#headNav .headUtilityNav > ul > li.contact > span{background: #9EC15B;}

#headNav .headUtilityNav > ul > li.contact > a::before,
#headNav .headUtilityNav > ul > li.contact > span::before{
  content: '';
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background: url("../Contents/ThemeImage/common/icon_mail.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
}

@media (hover: none) {
  #headNav .headUtilityNav > ul > li > a:active,
  #headNav .headUtilityNav > ul > li > span:active{
    opacity: var(--hoverOpacity);
  }
}


/** headUtilityNav */
#headNav .headContentsNav{
  display: block;
}


#headNav .headContentsNav > ul{
  display: block;
}

#headNav .headContentsNav > ul > li{
  display: block;
}


#headNav .headContentsNav > ul > li > .level1{
  display: block;
  padding: 1rem 1rem 0.9rem 2.5rem;
  background: #483D38;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #FFFFFF;
  line-height: 2;
  position: relative;
}

#headNav .headContentsNav > ul > li > .level1 > span{
  display: inline-block;
  margin-right: 0.5em;
}

#headNav .headContentsNav > ul > li.service > .level1{
  background: #FD6A3E;
}

#headNav .headContentsNav > ul > li.care > .level1{
  background: #113D79;
}
#headNav .headContentsNav > ul > li.care > .level1 > span{display: none;}
#headNav .headContentsNav > ul > li.care > .level1::before{
  content: '施設向け';
  display: inline-block;
  margin-right: 0.5rem;
}



/* level2 *********/
#headNav .headContentsNav > ul > li > .level2{
  display: block;
  width: 100%;
}


#headNav .headContentsNav > ul > li > .level2 > .navDetail{
  display: block;
  width: 100%;
}

#headNav .headContentsNav > ul > li > .level2 .nav{
  display: block;
  width: 100%;
}

#headNav .headContentsNav > ul > li > .level2 .nav > dl{
  display: block;
  width: 100%;
}
/*
#headNav .headContentsNav > ul > li > .level2 .nav > dl + dl{
  margin-top: 2rem;
}
*/

#headNav .headContentsNav > ul > li > .level2 .nav > dl > dt{
  display: none;
  margin-top: 2rem;
  padding-left: 2.5rem;
}
#headNav .headContentsNav > ul > li > .level2 .nav > dl > dt.gohan{
  display: block;
  width: 24.5rem;
  margin-bottom: 1rem;
}
#headNav .headContentsNav > ul > li > .level2 .nav > dl > dt.frozen{
  display: block;
  width: 25.013rem;
  margin-bottom: 1rem;
}
#headNav .headContentsNav > ul > li > .level2 .nav > dl > dt.care{
  display: block;
  width: 21.351rem;
  margin-bottom: 1rem;
}
#headNav .headContentsNav > ul > li > .level2 .nav > dl > dt > a{display: block; width: 100%; height: auto; color: #454140;}
#headNav .headContentsNav > ul > li > .level2 .nav > dl > dt img{display: block; width: 100%; height: auto;}


#headNav .headContentsNav > ul > li > .level2 .nav > dl > dd{display: block;}
#headNav .headContentsNav > ul > li > .level2 .nav > dl > dd > ul{
  display: block;
}
#headNav .headContentsNav > ul > li > .level2 .nav > dl > dd > ul > li{
  border-bottom: 1px solid #EBE5E2;
}

#headNav .headContentsNav > ul > li > .level2 .nav > dl > dd > ul > li > a{
  display: block;
  padding: 1.6rem 8rem 1.3rem 2.5rem;
  font-size: 1.3rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #454140;
  text-align: left;
  position: relative;
}
#headNav .headContentsNav > ul > li > .level2 .nav > dl > dd > ul > li > a::after{
  content: '';
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background: url("../Contents/ThemeImage/common/icon_arrow_right_orange.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: 4rem;
  top: calc(50% - 0.6rem);
}

#headNav .headContentsNav > ul > li > .level2 .nav > dl > dd > ul > li > a[target="_blank"]::after{
  background: url("../Contents/ThemeImage/common/icon_blank_nav.svg") center center no-repeat;
  background-size: 100% auto;
}


#headNav .headContentsNav > ul > li > .level2 .img{
  display: none;
}



/* outLink *********/
#headNav .outLink{
  display: block;
  margin-top: 6rem;
  text-align: center;
}

#headNav .outLink > a{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0 0.3rem;
  font-size: 1.2rem;
  line-height: 1.75;
  letter-spacing: 0.12em;
  color: #454140;
  white-space: nowrap;
}
#headNav .outLink > a::after{
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1.15rem;
  background: url("../Contents/ThemeImage/common/icon_blank.svg") center center no-repeat;
  background-size: 100% auto;
}

/* headNavCloseBtn *********/
#headNavCloseBtn{
  display: block;
  width: 20rem;
  margin: 6rem auto 0;
}

#headNavCloseBtn > span{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  width: 100%;
  background: #F7F0E7;
  border-radius: 5px;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;
  color: #454140;
  transition:  var(--hoverTransition);
}

@media (hover: none) {
  #headNavCloseBtn > span:active{
    opacity: var(--hoverOpacity);
  }
}


/* headNavBg  *******/
#headNavBg{
  display: none;
}

/* loginEntryModalBox  *******/
#loginEntryModalBox{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 0 var(--contentsPadding) 0;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  transition: opacity 0.3s ease;
  transform: translate(100vw,0);
  backface-visibility: hidden;
}

#loginEntryModalBox.active{
  transform: translate(0,0);
  opacity: 1;
  pointer-events: inherit;
}

#loginEntryModalBox #loginEntryModalBoxBg{
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  background: rgba(72,61,56,.8);
  opacity: 0.9;
  z-index: -1;
}


#loginEntryModalBox .modalTTL{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  max-width: 32.5rem;
  height: 7rem;
  padding: 0.2rem 1rem 0;
  border-radius: 10px 10px 0 0;
  background: #FDF9F2;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
  font-weight: 600;
  position: relative;
}
#loginEntryModalBox .modalTTL::before{
  content: '';
  display: block;
  width: 3rem;
  height: 3rem;
  background: url("../Contents/ThemeImage/common/icon_user_orange.svg") center center no-repeat;
}


#loginEntryModalBox .modalTTL > #modalCloseBtn{
  display: none;
  width: 4rem;
  height: 4rem;
  position: absolute;
  right: 2rem;
  top: 2.2rem;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
#loginEntryModalBox .modalTTL > #modalCloseBtn > img{display: block; width: 100%; height: auto;}


@media (hover: none) {
  #loginEntryModalBox .modalTTL > #modalCloseBtn:active{
    opacity: var(--hoverOpacity);
  }
}


#loginEntryModalBox .modalMain{
  display: block;
  width: 100%;
  max-width: 32.5rem;
  max-height: calc(90vh - 7rem - 8rem);
  max-height: calc(90dvh - 7rem - 8rem);
  background: #FFFFFF;
  padding: 0 4rem 0;
  border-radius: 0 0 10px 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

#loginEntryModalBox .modalMain::after{
  content: '';
  display: block;
  height: 2rem;
}

#loginEntryModalBox .modalMain > dl{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 3rem 0 3rem;
}

#loginEntryModalBox .modalMain > dl > dt{
  display: block;
  margin-bottom: 3rem;
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  line-height: 1.933333333333333;
  font-weight: 500;
  text-align: center;
}

#loginEntryModalBox .modalMain> dl > dd{
  display: block;
}

#loginEntryModalBox .modalMain> dl > dd > ul{
  display: block;
  width: 100%;
}
#loginEntryModalBox .modalMain> dl > dd > ul > li{
  display: block;
  width: 100%;
}

#loginEntryModalBox .modalMain> dl > dd > ul > li + li{
  margin-top: 1.5rem;
}

#loginEntryModalBox .modalMain> dl > dd > ul > li > a{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 5.5rem;
  padding: 0 3.5rem 0.1rem 3.5rem;
  border-radius: 8px;
  background: #113D79;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.588235294117647;
  white-space: nowrap;
  color: #FFFFFF;
  cursor: pointer;
  transition: var(--hoverTransition);
  position: relative;
}

#loginEntryModalBox .modalMain> dl > dd > ul > li > a::after{
  content: '';
  display: block;
  width: 2rem;
  height: 2rem;
  background: url("../Contents/ThemeImage/common/icon_arrow_right.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: 1.5rem;
  top: calc(50% - 1rem);
  z-index: 1;
}

#loginEntryModalBox .modalMain > dl > dd > ul > li > a[target="_blank"]{
  background: #FD6A3E
}

#loginEntryModalBox .modalMain > dl > dd > ul > li > a[target="_blank"]::after{
  background: url("../Contents/ThemeImage/common/icon_blank_white.svg") left 0.5rem no-repeat;
  background-size: 1.2rem auto;
}

#loginEntryModalBox #modalCloseBtnBottom{
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 3rem auto 0;
  transition:  var(--hoverTransition);
}

@media (hover: none) {
  #loginEntryModalBox #modalCloseBtnBottom:active{
    opacity: var(--hoverOpacity);
  }
}

#loginEntryModalBox #modalCloseBtnBottom > img{
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(100);
}



/**************************************
footerPalette
**************************************/
#footerPalette{
  display: block;
  width: 100%;
  padding: 0 1.5rem;
  background: #454140;
}


#footerPalette .footInner{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 6rem 0 3rem;
}

#footerPalette .footInner > .logo{
  display: block;
  width: 22.5rem;
  margin: 0 auto 5rem;
}
#footerPalette .footInner > .logo > a,
#footerPalette .footInner > .logo > img{
  display: block;
  width: 100%;
  height: auto;
}

#footerPalette .footInner > .footNav{
  display: block;
  text-align: center;
}

#footerPalette .footInner > .footNav .siteNav{
  margin-bottom: 4.9rem;
}

#footerPalette .footInner > .footNav .siteNav > ul{
  display: block;
}

#footerPalette .footInner > .footNav .siteNav > ul > li{}
#footerPalette .footInner > .footNav .siteNav > ul > li + li{
  margin-top: 2rem;
}

#footerPalette .footInner > .footNav .siteNav > ul > li > a{
  display: inline-block;
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  line-height: 1.571428571428571;
  color: #FFFFFF;
  text-decoration: none;
}

#footerPalette .footInner > .footNav .siteNav > ul > li > a[target="_blank"]::after{
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1.15rem;
  margin-left: 0.4rem;
  margin-bottom: 0.1rem;
  background: url("../Contents/ThemeImage/common/icon_blank_white.svg") center center no-repeat;
  background-size: 100% auto;
  vertical-align: middle;
}


#footerPalette .footCopy{
  font-size: 1.1rem;
  font-weight: 400;
  text-align: center;
  color: #FFFFFF;
  letter-spacing: 0.08em;
}

#footerPalette .imgCaution{
  font-size: 1.1rem;
  color: #888888;
  text-align: center;
  margin-bottom: 0.6rem;
}

/**************************************
rerationSiteBlock
**************************************/
.rerationSiteBlock{
  display: block;
  width: 100%;
  padding: 4rem 0 0;
  position: relative;
  z-index: 1;
}

.rerationSiteBlock > .inner{
  display: block;
  margin: 0 auto;
}

.rerationSiteBlock .ttl{
  display: block;
  margin-bottom: 2rem;
  font-size: 1.6rem;
  text-align: center;
  letter-spacing: 0.2em;
  line-height: 1.62;
  font-weight: 600;
}


.rerationSiteBlock .rerationSiteList{
  display: block;
  width: calc(100% - 3rem);
  margin: 0 auto;
  padding: 3rem 2.5rem;
  background: #FFFFFF;
  border-radius: 30px;
}


.rerationSiteBlock .rerationSiteList > ul{
  display: block;
}


.rerationSiteBlock .rerationSiteList > ul > li{
  display: block;
  width: 100%;
}
.rerationSiteBlock .rerationSiteList > ul > li + li{
  margin-top: 1.5rem;
}

.rerationSiteBlock .rerationSiteList > ul > li > a{
  display: block;
  text-decoration: none;
}

.rerationSiteBlock .rerationSiteList > ul > li > a > picture{
  display: block;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #EEEEEE;
  overflow: hidden;
}




/********************************************************************************
#headerCare
******************************************************************************/
#headerCare{
	display: block;
	width: 100%;
  padding-bottom: 7rem;
}

#headerCare a{text-decoration: none;}

#headerCare > .outer{
  display: block;
  width: 100%;
  height: 7rem;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;

  background-color: rgba(253,249,242,.8);
	-webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(4px);
}

#headerCare.clickOpen .outer{
  background-color: rgba(253,249,242,1);
  backdrop-filter: none;
  box-shadow: none;
}


#headerCare .headMain{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 5.5rem 0 2rem;
}

#headerCare .headLogo{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 18rem;
  /*
  height: 100%;
  padding-top: 2.3rem;
  */
}

#headerCare .headLogo > a,
#headerCare .headLogo img{
  display: block;
  width: 100%;
  height: auto;
}

#headerCare .headLogo > a > span{
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-ja-care);
  font-size: 1.0rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #454140;
}

/* headUtilityNav *************/
#headerCare .headUtilityNav{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  margin: 0 0 0 auto;
}



#headerCare .headUtilityNav > p.userName{
  display: none;
}

/* headUserPageInfo *************/
#headerCare .headUserInfo{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 4rem;
  gap: 0 1rem;
}

#headerCare .headUserInfo .headUserInfoNav{
  display: block;
  width: 4rem;
  height: 4rem;
}

#headerCare #headUserInfoOpen{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  transition: var(--hoverTransition);
  position: relative;
  z-index: 6;
}

#headerCare #headUserInfoOpen::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url("../Contents/ThemeImage/care/common/icon_nav_close.svg") center center no-repeat;
  background-size: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s ease;
}

#headerCare #headUserInfoOpen.clickOpen::after{
  opacity: 1;
}

#headerCare #headUserInfoOpen > img{
  display: block;
  width: 1.883rem;
  height: auto;
}



#headerCare .headUserInfoInner{
  display: block;
  width: 30rem;
  background: #FFFFFF;
  border-radius: 0 0 0 15px;
  opacity: 0;
  position: absolute;
  top: 7rem;
  right: 0;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.3s ease;
  transform: translate(0,0);
  backface-visibility: hidden;
}


#headerCare .headUserInfoInner::before{
  content: '';
  display: block;
  width: 100%;
  height: 0.2rem;
  background: #FFFFFF;
  position: absolute;
  left: 0;
  top: -0.1rem;
}

#headerCare #headUserInfoOpen.clickOpen + .headUserInfoInner{
  transform: translate(0,0);
  opacity: 1;
  pointer-events: auto;
}

#headerCare .headUserInfoInner > .inner{
  max-height: calc(100vh - 7rem);
  padding: 1.5rem 2rem 2rem;
  overflow-y: auto;
}


#headerCare .headUserInfoInner .userInfo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

#headerCare .headUserInfoInner .userInfo > figure{
  display: block;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: #616D81;
  overflow: hidden;
}
#headerCare .headUserInfoInner .userInfo > figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#headerCare .headUserInfoInner .userInfo > dl{
  display: block;
  width: calc(100% - 6.5rem);
}

#headerCare .headUserInfoInner .userInfo > dl > dt{
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  line-height: 1.3125;
  text-align: left;
  color: #454140;
  font-weight: 500;
}
#headerCare .headUserInfoInner .userInfo > dl > dt > span{
  font-size: 1.2rem;
  font-weight: 400;
}
#headerCare .headUserInfoInner .userInfo > dl > dd{}
#headerCare .headUserInfoInner .userInfo > dl > dd > a{
  font-size: 1.3rem;
  font-weight: 400;
  color: #113D79;
  text-decoration: underline;
}


#headerCare .headUserInfoInner ul.userInfoNavList{
  display: block;
  border-top: 1px solid #EBE5E2;
}


#headerCare .headUserInfoInner ul.userInfoNavList > li{
  padding: 0.5rem 0;
  border-bottom: 1px solid #EBE5E2;
}

#headerCare .headUserInfoInner ul.userInfoNavList > li > a{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.615384615384615;
  letter-spacing: 0.15em;
  color: #454140;
  text-decoration: none;
  text-align: left;
}

#headerCare .headUserInfoInner ul.userInfoNavList > li > a::before{
  content: '';
  display: block;
  width: 3rem;
  height: 3rem;
  margin-right: 0.5rem;
  background-size: 100% auto;
  background-position: center center;
}

#headerCare .headUserInfoInner ul.userInfoNavList > li.order > a::before{
  background-image: url("../Contents/ThemeImage/care/common/icon_order.svg");
}
#headerCare .headUserInfoInner ul.userInfoNavList > li.history > a::before{
  background-image: url("../Contents/ThemeImage/care/common/icon_history.svg");
}
#headerCare .headUserInfoInner ul.userInfoNavList > li.info > a::before{
  background-image: url("../Contents/ThemeImage/care/common/icon_user_info.svg");
}


#headerCare .headUserInfoInner .logOut{
  display: block;
  text-align: right;
  margin-top: 1rem;
}
#headerCare .headUserInfoInner .logOut > a{
  font-size: 1.2rem;
  line-height: 1.75;
  letter-spacing: 0.08em;
  font-weight: 400;
  color: #616D81;
  text-decoration: underline;
}


#headerCare .headUserInfoInner .infoBox{
  display: block;
  margin-top: 1rem;
  padding: 1.5rem;
  border: 1px solid #FD873E;
  border-radius: 6px;
  transition: opacity var(--transition-default);
}


@media (hover: none) {
  #headerCare .headUserInfoInner .infoBox:active{opacity: var(--hoverOpacity);}
}

#headerCare .headUserInfoInner .infoBox > dl{
  display: block;
}

#headerCare .headUserInfoInner .infoBox > dl > dt{
  display: block;
  margin-bottom: 0.8rem;;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  line-height: 1.75;
  font-weight: 600;
  color: #FD873E;
}

#headerCare .headUserInfoInner .infoBox > dl > dd{display: block;}
#headerCare .headUserInfoInner .infoBox > dl > dd > a.outer,
#headerCare .headUserInfoInner .infoBox > dl > dd > .outer{
  display: block;
  display: -webkit-box;
  width: 100%;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  font-weight: 400;
  color: #454140;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  background-color: transparent;
}

#headerCare .headUserInfoInner .infoBox > dl > dd > .outer a{
  text-decoration: none;
  font-size: 1.2rem;
  color: #454140;
  pointer-events: none;
}



/* headUserPageBtn *************/
#headerCare .headUserPageBtn{
  display: block;
  width: 4rem;
  height: 4rem;

}
#headerCare .headUserPageBtn > a{
  display: block;
  width: 100%;
  height: 100%;
  background: url("../Contents/ThemeImage/care/common/icon_user_login.svg") center center no-repeat;
  background-size: 1.883rem auto;
}

#headerCare .headUserPageBtn > a > span{
  display: none;
}



/* headCart *************/
#headerCare .headCart{
  display: block;
  width: 4rem;
  height: 4rem;
  margin-left: 0.5rem;
}
#headerCare .headCart > a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}
#headerCare .headCart > a > img{
  display: block;
  width: 2.178rem;
  height: auto;
}

#headerCare .headCart > a > span{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #FD873E;
  font-size: 1.0rem;
  font-weight: 600;
  text-align: center;
  color: #FFFFFF;
  line-height: 1;
  position: absolute;
  right: 0;
  top: 0;
}


/* #headNav *************/
#headerCare #headNav{
  display: block;
  width: 4rem;
  height: 4rem;
  position: absolute;
  right: 1rem;
  top: 1.5rem;
  z-index: 10;
}

#headerCare #headNav #headNavOpen{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
}

#headerCare #headNavOpen > span{
  display: block;
  height: 0.2rem;
  width: 1.5rem;
  background: #113D79;
  position: absolute;
  left: calc(50% - 0.75rem);
  top: calc(50% - 0.1rem);
  transition: opacity .3s ease;
}

#headerCare #headNavOpen::before,
#headerCare #headNavOpen::after{
  content: '';
  display: block;
  height: 0.2rem;
  width: 1.5rem;
  background: #113D79;
  position: absolute;
  left: calc(50% - 0.75rem);
  top: calc(50% - 0.1rem);
  transition: transform .3s ease,width .3s ease;
  transform-origin: center center;
}
#headerCare #headNavOpen::before{transform: translate(0,-0.8rem);}
#headerCare #headNavOpen::after{transform: translate(0,0.8rem);}

#headerCare #headNav.active #headNavOpen > span{
  opacity: 0;
}

#headerCare #headNav.active #headNavOpen::before{
  width: 1.8rem;
  transform: rotate(45deg) translate(0,0);
}
#headerCare #headNav.active #headNavOpen::after{
  width: 1.8rem;
  transform: rotate(-45deg) translate(0,0);
}


#headerCare #headNav .headNavInner{
  display: block;
  width: 100vw;
  height: 100dvh;
  padding: 9rem 0 0;
  opacity: 0;
  overflow-y: auto;
  /*
  backdrop-filter: blur(4px);
  background: rgba(253,249,242,.8);
  */
  background-color: transparent;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform: translate(100vw, 0);
  backface-visibility: hidden;
}

#headerCare #headNav .headNavInner::before{
  content: '';
  display: block;
  width: 100%;
  height: 7rem;
	-webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(253,249,242,.8);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

#headerCare #headNav .headNavInner::after{
  content: '';
  display: block;
  height: 6rem;
  background-color: transparent;
}


#headerCare #headNav.active .headNavInner{
  transform: translate(0,0);
  opacity: 1;
  z-index: 1;
}

/* headSPNavBg  *******/
#headerCare #headSPNavBg{
  display: block;
  width: 100dvw;
  height: 100dvh;
  background: rgba(253,249,242,.8);
	-webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
  opacity: 0;
  transform: translate(100vw, 0);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

#headerCare #headSPNavBg.navOpen{
  transform: translate(0,0);
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
}

/** sp */
#headerCare #headNav .navInnerLogo{
  display: block;
  width: 25.5rem;
  margin: 0 auto 5rem;
}
#headerCare #headNav .headNavLoginBtn{
  display: block;
  width: 26.5rem;
  margin: 0 auto 6rem;
}

#headerCare #headNav .headNavLoginBtn > p{
  display: block;
  margin-bottom: 1.2rem;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  line-height: 1.607142857142857;
  text-align: center;
  color: #454140;
}
#headerCare #headNav .headNavLoginBtn > p > span{
  font-size: 1.3rem;
}

#headerCare #headNav .headNavLoginBtn > a{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 0.5rem;
  height: 5.5rem;
  padding: 0 3rem 0 3rem;
  border-radius: 5px;
  background: #113D79;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  color: #FFFFFF;
  cursor: pointer;
  position: relative;
  transition: var(--hoverTransition);
}

#headerCare #headNav .headNavLoginBtn > a::before{
  content: '';
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background: url("../Contents/ThemeImage/care/common/icon_user_btn.svg") center center no-repeat;
  background-size: 120% auto;
}

@media (hover: none) {
  #headerCare #headNav .headNavLoginBtn > a:active{
    opacity: var(--hoverOpacity);
  }
}

#headerCare #headNav .headCareContentsNav{
  display: block;
}

#headerCare #headNav .headCareContentsNav > ul{
  display: block;
}

#headerCare #headNav .headCareContentsNav > ul > li{ text-align: center;}
#headerCare #headNav .headCareContentsNav > ul > li + li{
  margin-top: 3rem;
}

#headerCare #headNav .headCareContentsNav > ul > li > a{
  display: inline-block;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #454140;
}

#headerCare #headNav .headCareContentsNav > ul > li > a[target="_blank"]{
  padding-right: 1.3rem;
  position: relative;
}
#headerCare #headNav .headCareContentsNav > ul > li > a[target="_blank"]::after{
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1.1rem;
  background: url("../Contents/ThemeImage/care/common/icon_blank.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: 0;
  top: 0.6rem;
}

/* headNavBg  *******/
#headerCare #headNavBg{
  display: block;
  width: 100dvw;
  height: 100dvh;
  background: rgba(72,61,56,.8);
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
  transition: opacity .3s ease;
}

#headerCare.clickOpen #headNavBg{
  opacity: 0.9;
  pointer-events: auto;
  z-index: 10;
}




/** spUserName */
#headerCare + .headSPUserName{
  display: block;
  padding: 0.1rem 1.5rem 0.9rem;
  background: #FDF9F2;
}

#headerCare + .headSPUserName > p{
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  line-height: 1.875;
  font-weight: 400;
  color: #454140;
  text-align: right;
}

#headerCare + .headSPUserName > p > span{
  font-size: 1rem;
}


/**************************************
footerCare
**************************************/
#footerCare{
  display: block;
  width: 100%;
  padding: 5rem 1.5rem 2.1rem 1.5rem;
  background: #113D79;
}

#footerCare .footInner{
  display: block;
}


#footerCare .footInner > .logo{
  width: 29.2rem;
  margin: 0 auto 5rem;
}

#footerCare .footInner > .logo > a,
#footerCare .footInner > .logo img{
  display: block;
  width: 100%;
  height: auto;
}


#footerCare .footInner > .footNav{
  display: block;
}

#footerCare .footInner > .footNav > .nav{
  display: block;
}



/*contactNav *************/
#footerCare .footInner > .footNav > .nav > .contactNav{
  display: block;
  margin: 0 auto 4rem;
  color: #FFFFFF;
}

#footerCare .footInner > .footNav > .nav > .contactNav  > .tel{
  display: block;
}
#footerCare .footInner > .footNav > .nav > .contactNav  > .tel > a{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 0.1rem;
  margin-bottom: 0.2rem;
  font-family: var(--font-ja-care);
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  text-decoration: none;
  pointer-events: none;
}
#footerCare .footInner > .footNav > .nav > .contactNav  > .tel > a::before{
  content: '';
  display: block;
  margin-top: 0.4rem;
  width: 2.5rem;
  height: 2.5rem;
  background: url("../Contents/ThemeImage/common/icon_tel.svg") center center no-repeat;
  background-size: 100% auto;
}

#footerCare .footInner > .footNav > .nav > .contactNav  > .tel > span{
  display: block;
  font-family: var(--font-main);
  text-align: center;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

#footerCare .footInner > .footNav > .nav > .contactNav  > .contactForm{
  margin-top: 2rem;
}

#footerCare .footInner > .footNav > .nav > .contactNav  > .contactForm > a{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
  width: 25.5rem;
  margin: 0 auto;
  border: 1px solid #FFFFFF;
  border-radius: 5px;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  text-decoration: none;
}
#footerCare .footInner > .footNav > .nav > .contactNav  > .contactForm > a[target="_blank"]::after{
  content: '';
  display: inline-block;
  align-items: center;
  width: 1rem;
  height: 1.1rem;
  margin-left: 0.4rem;
  margin-top: 0.2rem;
  background: url(../Contents/ThemeImage/common/icon_blank_white.svg) center center no-repeat;
  background-size: 100% auto;
}


/*siteNav *************/

#footerCare .footInner > .footNav > .nav > .siteNav{
  display: block;
  margin-bottom: 5rem;
  padding-bottom: 5rem;
  border-bottom: 1px solid #FFFFFF;
}

#footerCare .footInner > .footNav > .nav > .companyNav{
  display: block;
}

#footerCare .footInner > .footNav > .nav > .siteNav > ul,
#footerCare .footInner > .footNav > .nav > .companyNav > ul{
  display: block;
}

#footerCare .footInner > .footNav > .nav > .companyNav > ul:has(li:nth-of-type(2)) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.7rem 2rem;
}

#footerCare .footInner > .footNav > .nav > .siteNav > ul + ul,
#footerCare .footInner > .footNav > .nav > .companyNav > ul + ul{margin-top: 2rem;}

#footerCare .footInner > .footNav > .nav > .siteNav > ul > li,
#footerCare .footInner > .footNav > .nav > .companyNav > ul > li{
  display: block;
  text-align: center;
}

#footerCare .footInner > .footNav > .nav > .siteNav > ul > li + li,
#footerCare .footInner > .footNav > .nav > .companyNav > ul > li + li{
  margin-top: 2rem;
}

#footerCare .footInner > .footNav > .nav > .companyNav > ul > li + li {
  margin: 0;
}

#footerCare .footInner > .footNav > .nav > .siteNav > ul > li > a,
#footerCare .footInner > .footNav > .nav > .companyNav > ul > li > a{
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1.571428571428571;
  letter-spacing: 0.12em;
  font-weight: 400;
  color: #FFFFFF;
  text-decoration: none;
}

#footerCare .footInner > .footNav > .nav > .siteNav > ul > li > a[target="_blank"]::after,
#footerCare .footInner > .footNav > .nav > .companyNav > ul > li > a[target="_blank"]::after{
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1.1rem;
  margin-left: 0.4rem;
  background: url("../Contents/ThemeImage/common/icon_blank_white.svg") center center no-repeat;
  background-size: 100% auto;
}

#footerCare .footInner > .footNav > .nav > .companyNav > ul > li > a{
  font-size: 1.3rem;
}

#footerCare .footInner > .footNav > .footCopy{
  display: block;
  margin-top: 5rem;
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #FFFFFF;
}




/**************************************
overRide
**************************************/
.pcView{display: none!important;}
