@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;
  --contentsMaxWidth: 1400px;
  --contentsOuterMaxWidth: calc(1200px + var(--contentsMargin) * 2);
}

html {
    font-size: 62.5%;
}

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

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

#care{

}


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

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


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

#headerPalette a{text-decoration: none;}

#headerPalette > .outer{
  display: block;
  width: calc(100% - 2rem);
	max-width: 1380px;
  height: 10rem;
  padding: 0;
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;

  border-radius: 3rem;
  background: #FDF9F2;
  transition: backdrop-filter .3s ease,box-shadow .3s ease,background .3s ease,height .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);
}

#headerPalette.hoverOpen .outer,
#headerPalette.clickOpen .outer,
#headerPalette.move.hoverOpen .outer,
#headerPalette.move.clickOpen .outer{
  height: calc(var(--headNavOpenHeight) + 10rem);
  background-color: rgba(253,249,242,1);
  backdrop-filter: none;
  box-shadow: none;
}


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

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

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

/* headUserPageBtn *************/
#headerPalette .headUserPageBtn{display: none;}


/* #headNav *************/
#headNav{}

#headNavOpen{display: none;}

#headNav .headNavInner{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0 4rem;
}


/** sp */
#headNavClose{display: none;}
#headNav .navInnerLogo{display: none;}


/** headUtilityNav */
#headNav .headUtilityNav{
  order: 2;
  width: 34.1rem;
  padding-bottom: 2rem;
}

#headNav .headUtilityNav > ul{
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: 0 1rem;
}

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

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

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

#headNav .headUtilityNav > ul > li.user{order: 2; width: 17.4rem;}
#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;
}

#headNav .headUtilityNav > ul > li.contact{order: 1; width: 15.7rem;}
#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;
}

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

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



/** headUtilityNav */
#headNav .headContentsNav{
  order: 1;
  height: 100%;
  padding-right: calc(4rem + 1px);
}
#headNav .headContentsNav::after{
  content: '';
  display: block;
  width: 1px;
  height: 4rem;
  background: #DDDDDD;
  position: absolute;
  right: calc(34.1rem + 4rem + 3rem);
  top: 3.35rem;
  z-index: 1;
}

#headNav .headContentsNav > ul{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0 4.8rem;
}

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


#headNav .headContentsNav > ul > li > .level1{
  display: block;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.235294117647059;
  padding-bottom: 2rem;
  position: relative;
  cursor: pointer;
}

#headNav .headContentsNav > ul > li > .level1 > span{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.4rem;
  padding: 0.3rem 2.1rem 0.2rem;
  border-radius: 5rem;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  line-height: 1.615384615384615;
  text-align: center;
  white-space: nowrap;
  position: absolute;
  top: -2.9rem;
  left: 50%;
  transform: translateX(-50%);
}
#headNav .headContentsNav > ul > li > .level1 > span::after{
  content: '';
  display: block;
  height: 1rem;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -1rem;
}

#headNav .headContentsNav > ul > li.service > .level1 > span{
  border: 1px solid #FD6A3E;
  color: #FD6A3E;
}
#headNav .headContentsNav > ul > li.care > .level1 > span{
  border: 1px solid #113D79;
  color: #113D79;
}

#headNav .headContentsNav > ul > li > .level1::after{
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #FD873E;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: width .3s ease;
}
#headNav .headContentsNav > ul > li.service > .level1::after{background: #FD6A3E;}
#headNav .headContentsNav > ul > li.care > .level1::after{background: #113D79;}


#headNav .headContentsNav > ul > li.open > .level1::after{
  width: 100%;
}

@media (hover: hover) {
  #headNav .headContentsNav > ul > li:hover > .level1::after,
  #headNav .headContentsNav > ul > li:hover > .level1::after{
    width: 100%;
  }
}




/* level2 *********/
#headNav .headContentsNav > ul > li > .level2{
  display: block;
  width: 100%;
  padding: 0;
  background: #FFFFFF;
  border-radius: 0 0 30px 30px;
  opacity: 0;
  position: absolute;
  top: 10rem;
  left: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.3s ease;
  transform: translate(0,0);
  backface-visibility: hidden;
}


#headNav .headContentsNav > ul > li > .level2::before{
  content: '';
  display: block;
  width: 100%;
  height: 3rem;
  position: absolute;
  left: 0;
  top: -2rem;
}

#headNav .headContentsNav > ul > li.open > .level2,
#headNav .headContentsNav > ul > li.hoverOpen > .level2{
  transform: translate(0,0);
  max-height: calc(100vh - 11rem);
  overflow-y: auto;
  opacity: 1;
  pointer-events: auto;
}

#headNav .headContentsNav > ul > li > .level2 > .navDetail{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 4.5rem 5rem 5rem;
}

#headNav .headContentsNav > ul > li > .level2 .nav{
  display: block;
  width: calc(100% - 58rem - 8rem);
}

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

#headNav .headContentsNav > ul > li > .level2 .nav > dl > dt{
  display: block;
  margin-bottom: 3.2rem;
  font-size: 3rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.2em;
  line-height: 1;
}
#headNav .headContentsNav > ul > li > .level2 .nav > dl > dt.gohan{width: 38.511rem;}
#headNav .headContentsNav > ul > li > .level2 .nav > dl > dt.frozen{width: 38.82rem;}
#headNav .headContentsNav > ul > li > .level2 .nav > dl > dt.care{width: 35.585rem;}
#headNav .headContentsNav > ul > li > .level2 .nav > dl > dt > a{
  display: block;
  width: 100%;
  height: auto;
  color: #454140;
  font-size: 3rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.2em;
  line-height: 1;
}
#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;
  border-top: 1px solid #EBE5E2;
}
#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.4rem 6rem 1.4rem 2rem;
  font-size: 1.7rem;
  line-height: 1.147058823529412;
  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: 2rem;
  height: 2rem;
  background: url("../Contents/ThemeImage/common/icon_arrow_right_orange.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: 0;
  top: calc(50% - 1rem);
}

#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: block;
  width: 58rem;
}

#headNav .headContentsNav > ul > li > .level2 .img figure{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 30rem;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

#headNav .headContentsNav > ul > li > .level2 .img figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#headNav .headContentsNav > ul > li > .level2 .img figure > figcaption{
  display: block;
  width: 100%;
  padding: 4.7rem 2rem 3.4rem;
  background: linear-gradient(to bottom, rgba(14,12,11,0), rgba(72,61,56,1));
  position: absolute;
  left: 0;
  bottom: 0;
}

#headNav .headContentsNav > ul > li > .level2 .img figure > figcaption > span:nth-of-type(1){
  display: block;
  margin-bottom: 0.8rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.733333333333333;
  text-align: center;
}

#headNav .headContentsNav > ul > li.service > .level2 .img figure > figcaption > span:nth-of-type(1){color: #FD873E;}
#headNav .headContentsNav > ul > li.care > .level2 .img figure > figcaption > span:nth-of-type(1){color: #76B4EB;}


#headNav .headContentsNav > ul > li > .level2 .img figure > figcaption > span:nth-of-type(2){
  display: block;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  line-height: 1.5;
  text-align: center;
  color: #FFFFFF;
}

#headNav .headContentsNav > ul > li > .level2 .img figure > figcaption.caution{
  display: block;
  padding: 0;
  background: none;
  font-size: 1rem;
  color: #AAAAAA;
  text-align: center;
  position: absolute;
  right: 2rem;
  bottom: 1rem;
  z-index: 2;
}


/* outLink *********/
#headNav .outLink{
  display: block;
  position: absolute;
  text-align: left;
  right: 3rem;
  top: 1.3rem;
}

#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: none;
}


/* headNavBg  *******/
#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;
}

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

/* 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: 760px;
  height: 8.2rem;
  padding: 0.2rem 5rem 0;
  border-radius: 20px 20px 0 0;
  background: #FDF9F2;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-align: center;
  font-weight: 600;
  position: relative;
}
#loginEntryModalBox .modalTTL::before{
  content: '';
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  background: url("../Contents/ThemeImage/common/icon_user_orange.svg") center center no-repeat;
}


#loginEntryModalBox .modalTTL > #modalCloseBtn{
  display: block;
  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: hover) {
  #loginEntryModalBox .modalTTL > #modalCloseBtn:hover{
    opacity: var(--hoverOpacity);
  }
}

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


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

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

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

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

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

#loginEntryModalBox .modalMain> dl > dd > ul{
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  gap: 0 2rem;
}
#loginEntryModalBox .modalMain> dl > dd > ul > li{
  flex-shrink: 1;
  display: block;
  width: 100%;
}

#loginEntryModalBox .modalMain> dl > dd > ul > li > a{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 7rem;
  padding: 0 4rem 0.1rem 4rem;
  border-radius: 8px;
  background: #113D79;
  font-size: 1.7rem;
  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: none;}




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


#footerPalette .footInner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 6.2rem 0 6.2rem;
}

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

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

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

#footerPalette .footInner > .footNav .siteNav > ul{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0 3rem;
}

#footerPalette .footInner > .footNav .siteNav > ul > li{}
#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: right;
  color: #FFFFFF;
  letter-spacing: 0.08em;
}


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


/**************************************
rerationSiteBlock
**************************************/
.rerationSiteBlock{
  display: block;
  width: 100%;
  max-width: var(--contentsOuterMaxWidth);
  padding: 0 var(--contentsMargin);
  margin: 5rem auto 0;
}

.rerationSiteBlock .ttl{
  display: block;
  margin: 0 auto 1.9rem;
  font-size: 2.0rem;
  letter-spacing: 0.2em;
  line-height: 1.62;
  text-align: center;
  color: #454140;
  font-weight: 600;
}


.rerationSiteBlock .rerationSiteList{
  display: block;
  width: 100%;
  padding: 5rem 13rem;
  border-radius: 40px;
  background: #FFFFFF;
}

.rerationSiteBlock .rerationSiteList > ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 2rem 4rem;
}

.rerationSiteBlock .rerationSiteList > ul > li{
  display: block;
  width: calc((100% - 8rem) / 3);
}

.rerationSiteBlock .rerationSiteList > ul > li a{
  display: block;
  width: 100%;
}

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

.rerationSiteBlock .rerationSiteList > ul > li img{
  display: block;
  width: 100%;
  height: auto;
}




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

#headerCare a{text-decoration: none;}

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

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

#headerCare.hoverOpen .outer,
#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: flex-end;
  width: 100%;
  height: 100%;
  padding: 0 4rem;
}

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

#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.1rem;
  font-weight: 400;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  color: #454140;
}


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



#headerCare .headUtilityNav > p.userName{
  margin-right: 1rem;
  font-size: 1.3rem;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.08em;
  line-height: 1.730769230769231;
  color: #454140;
}

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

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

#headerCare #headUserInfoOpen{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  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;
}

@media (hover: hover) {
  #headerCare #headUserInfoOpen:hover,
  #headerCare #headUserInfoOpen:hover{
    opacity: var(--hoverOpacity);
  }
}

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

#headerCare .headUserInfo.hoverOpen .headUserInfoInner::before{
  content: '';
  display: block;
  width: 100%;
  height: 4rem;
  position: absolute;
  left: 0;
  top: -3rem;
}

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

#headerCare .headUserInfoInner > .inner{
  max-height: calc(100vh - 8rem);
  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;
  cursor: pointer;
  transition: opacity var(--transition-default);
}

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

@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: 19.7rem;
  margin-right: 1rem;

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

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

@media (hover: hover) {
  #headerCare .headUserPageBtn > a:hover{
    opacity: var(--hoverOpacity);
  }
}

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


/* headCart *************/
#headerCare .headCart{
  display: block;
  width: 5rem;
  height: 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: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #FD873E;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  color: #FFFFFF;
  line-height: 1;
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
}


/* #headNav *************/
#headerCare #headNav{
  display: block;
  padding-left: 4rem;
  padding-bottom: 2rem;
}

#headerCare #headNavOpen{display: none;}

#headerCare #headNav .headNavInner{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 3rem;
  padding-left: 4rem;
  margin: 0 auto 0 0;
  position: relative;
}

#headerCare #headNav .headNavInner::before{
  content: '';
  display: block;
  width: 1px;
  height: 2rem;
  background: #A29791;
  position: absolute;
  left: 0;
  top: calc(50% - 1rem);
}

/** sp */
#headerCare #headNav .navInnerLogo{display: none;}
#headerCare #headNav .headNavLoginBtn{display: none;}


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

#headerCare #headNav .headCareContentsNav > ul{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 3rem;
}

#headerCare #headNav .headCareContentsNav > ul > li{}

#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.hoverOpen #headNavBg,
#headerCare.clickOpen #headNavBg{
  opacity: 0.9;
  pointer-events: auto;
  z-index: 10;
}

/* headSPNavBg  *******/
#headerCare #headSPNavBg{display: none;}

/** spUserName */
#headerCare + .headSPUserName{display: none;}


/**************************************
footerCare
**************************************/
#footerCare{
  display: block;
  width: 100%;
  padding: 8.5rem 5rem 7.8rem 9rem;
  background: #113D79;
}

#footerCare .footInner{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}


#footerCare .footInner > .logo{
  width: 34rem;
  margin-top: 3rem;
}

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


#footerCare .footInner > .footNav{
  display: block;
  max-width: calc(100% - 24rem);
}

#footerCare .footInner > .footNav > .nav{
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}

/*contactNav *************/
#footerCare .footInner > .footNav > .nav > .contactNav{
  display: block;
  color: #FFFFFF;
  padding-right: 6.7rem;
}

#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: 2.5rem;
  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.1rem;
  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: 4.5rem;
  width: 20rem;
  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: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 6rem;
  */
  padding-right: 8rem;
  position: relative;
}
#footerCare .footInner > .footNav > .nav > .siteNav::after{
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  background: #FFFFFF;
  position: absolute;
  right: 0;
  top: 0;
}

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

/*companyNav *************/
#footerCare .footInner > .footNav > .nav > .companyNav{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 4rem;
  padding-left: 8rem;
}

#footerCare .footInner > .footNav > .nav:not(:has(.siteNav)) > .companyNav {
  padding-left: 0;
}

#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: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.7rem 4.2rem;
}

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

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

#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: 4rem;
  text-align: right;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #FFFFFF;
}



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