@charset "UTF-8";

/*all----------------------------*/
html {
  font-size: 62.5%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display:none;
}

body {
  -webkit-tap-highlight-color: transparent;
}

#Wrap {
  width: auto;
}

#FooterWrap {
  position: relative;
}

:root {
  --font_regular: "Lato", "Noto Sans JP", sans-serif;
  --font_serif: "Zen Old Mincho", serif;
  --color_regular: #2C2C2C;
  --color_01_01: #59B5B3;
  --color_01_02: #DEF0F0;
  --color_01_03: #DB9639;
  --color_02_01: #0F83B0;
  --color_02_02: #E2F0F5;
  --color_02_03: #C2D66D;
  --color_03_01: #052F47;
  --color_03_02: #E4E9EB;
  --color_03_03: #DF98B6;
  --color_04_01: #91C4E2;
  --color_04_02: #DF99B7;
}

.LP_page * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  letter-spacing: .1em;
}

.LP_page {
  width: 100%;
  font-family: var(--font_regular);
  color: var(--color_regular);
  overflow-x: clip;
  opacity: 0;
  transition: opacity 1s;
}

.LP_page.active {
  opacity: 1;
}

.LP_page picture {
  display: block;
  font-size: 0;
}

.LP_page a {
  display: block;
}

.LP_page a:hover {
  opacity: 1 !important;
}

.LP_page img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.LP_page sup {
  font-size: calc(10 * (60rem / 390));
}

.LP_page_inner {
  background: #fff;
}

.LP_page .activePoint,
.LP_page .activeDelay {
  opacity: 0;
  filter: blur(5px);
  transition: opacity 1s, filter 1.5s;
}

.LP_page.active .activePoint.active,
.LP_page.active .activePoint.active > .activeDelay {
  opacity: 1;
  filter: unset;
}
/*----------------------------all*/

/*heading------------------------*/
.heading_area {
  padding-bottom: calc(70 * (60rem / 390));
}

.main_lead_wrap {
  margin-top: calc(35 * (60rem / 390));
  font-size: calc(15 * (60rem / 390));
}

.main_lead_wrap p {
  font-size: calc(15 * (60rem / 390));
  line-height: 2;
  text-align: center;
}

.main_lead_wrap p:nth-of-type(n+2) {
  margin-top: calc(30 * (60rem / 390));
  transition-delay: .5s;
}

.main_nav .nav_list {
  margin: calc(40 * (60rem / 390)) 0 calc(30 * (60rem / 390));
  padding: 0 calc(10 * (60rem / 390));
}

.main_nav .nav_list li:nth-of-type(n+2) {
  margin-top: calc(2 * (60rem / 390));
}

.main_nav .nav_list li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(18 * (60rem / 390));
}

.main_nav .nav_list li:nth-of-type(1) a {
  background: var(--color_01_01);
}

.main_nav .nav_list li:nth-of-type(2) a {
  background: var(--color_02_01);
}

.main_nav .nav_list li:nth-of-type(3) a {
  background: var(--color_03_01);
}

.main_nav .nav_list li a::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(8 * (60rem / 390));
  height: calc(8 * (60rem / 390));
  margin-right: calc(15 * (60rem / 390));
  border-right: solid #fff calc(2 * (60rem / 390));
  border-bottom: solid #fff calc(2 * (60rem / 390));
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
  transition: margin .3s;
}

.main_nav .nav_list li a:hover::before {
  margin-top: calc(5 * (60rem / 390));
}

.main_nav .nav_list li:nth-of-type(1) a::after {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(34 * (60rem / 390));
  height: calc(34 * (60rem / 390));
  margin: calc(2 * (60rem / 390)) 0 0 calc(2 * (60rem / 390));
  background: url(../img/deco_001.svg) center center / cover no-repeat;
  content: "";
  pointer-events: none;
}

.main_nav .nav_list li a .txt_time {
  position: relative;
  flex: 1;
  height: calc(28 * (60rem / 390));
  padding-right: calc(15 * (60rem / 390));
  text-align: right;
}

.main_nav .nav_list li a .txt_time::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(1 * (60rem / 390));
  height: calc(35 * (60rem / 390));
  background: #fff;
  content: "";
}

.main_nav .nav_list li a .txt_time img {
  width: auto;
  height: 100%;
}

.main_nav .nav_list li a .nav_ttl {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(240 * (60rem / 390));
  height: calc(60 * (60rem / 390));
  font-size: calc(14 * (60rem / 390));
  line-height: 1.5;
  color: #fff;
}

.main_nav .nav_list li:nth-of-type(2) a .nav_ttl::before {
  position: absolute;
  bottom: 0;
  right: 100%;
  width: calc(23 * (60rem / 390));
  height: calc(23 * (60rem / 390));
  margin: 0 calc(24 * (60rem / 390)) calc(2 * (60rem / 390)) 0;
  background: url(../img/deco_002.svg) center center / cover no-repeat;
  content: "";
  pointer-events: none;
}

.main_nav .nav_list li:nth-of-type(2) a .nav_ttl::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(54 * (60rem / 390));
  height: calc(54 * (60rem / 390));
  margin-right: calc(35 * (60rem / 390));
  background: url(../img/deco_003.svg) center center / cover no-repeat;
  content: "";
  pointer-events: none;
}

.main_nav .nav_list li:nth-of-type(3) a .nav_ttl::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(30 * (60rem / 390));
  height: calc(30 * (60rem / 390));
  margin-right: calc(70 * (60rem / 390));
  background: url(../img/deco_004.svg) center center / cover no-repeat;
  content: "";
  pointer-events: none;
}

.btn_comment {
  position: relative;
  width: fit-content;
  margin: 0 auto calc(8 * (60rem / 390));
  padding: 0 calc(3 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  font-weight: 700;
  color: var(--color_04_02);
}

.btn_comment::before,
.btn_comment::after {
  position: absolute;
  bottom: 0;
  width: calc(1 * (60rem / 390));
  height: calc(8 * (60rem / 390));
  margin-bottom: calc(-1 * (60rem / 390));
  border-radius: calc(10 * (60rem / 390));
  background: var(--color_04_02);
  content: "";
}

.btn_comment::before {
  left: 0;
  rotate: -45deg;
}

.btn_comment::after {
  right: 0;
  rotate: 45deg;
}

.btn_comment span {
  position: relative;
  padding: 0 calc(6 * (60rem / 390));
}

.btn_comment span::before,
.btn_comment span::after {
  position: absolute;
  bottom: 0;
  width: calc(1 * (60rem / 390));
  height: calc(12 * (60rem / 390));
  margin-bottom: calc(1 * (60rem / 390));
  border-radius: calc(10 * (60rem / 390));
  background: var(--color_04_02);
  content: "";
}

.btn_comment span::before {
  left: 0;
  rotate: -30deg;
}

.btn_comment span::after {
  right: 0;
  rotate: 30deg;
}

.btn_allItem {
  width: fit-content;
  margin: 0 auto;
}

.btn_allItem a {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(250 * (60rem / 390));
  height: calc(54 * (60rem / 390));
  border: solid calc(4 * (60rem / 390)) var(--color_04_02);
  background: var(--color_04_01);
  font-size: calc(16 * (60rem / 390));
  color: #fff;
}

.btn_allItem a::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(8 * (60rem / 390));
  height: calc(8 * (60rem / 390));
  margin-right: calc(15 * (60rem / 390));
  border-top: solid #fff calc(2 * (60rem / 390));
  border-right: solid #fff calc(2 * (60rem / 390));
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
  transition: margin .3s;
}

.btn_allItem a:hover::before {
  margin-right: calc(10 * (60rem / 390));
}
/*------------------------heading*/
.each_cat {
  padding-top: calc(30 * (60rem / 390));
}

.each_cat::before {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: calc(380 * (60rem / 390));
  height: calc(345 * (60rem / 390));
  background: #fff;
  content: "";
}

.for_parallax {
  position: sticky;
  z-index: 1;
  top: 0;
  min-height: 100vh;
}

#morning {
  background: var(--color_01_01);
}

#daytime {
  background: var(--color_02_01);
}

#Night {
  position: relative;
  z-index: 1;
  background: var(--color_03_01);
}

.cat_img_wrap {
  position: relative;
  padding: 0 calc(5 * (60rem / 390));
}

.cat_img_wrap .txt_time {
  position: absolute;
  height: calc(65 * (60rem / 390));
  transition-delay: .4s;
}

.cat_img_wrap .txt_time img {
  width: auto;
  height: 100%;
}

#morning .cat_img_wrap .txt_time {
  left: 0;
  bottom: 0;
  margin: 0 0 calc(10 * (60rem / 390)) calc(40 * (60rem / 390));
}

#morning .cat_img_wrap .txt_time::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url(../img/time_001.svg);
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-image: url(../img/time_001.svg);
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  background: var(--color_01_01);
  content: "";
}

#daytime .cat_img_wrap .txt_time {
  top: 0;
  left: 0;
  margin: calc(-15 * (60rem / 390)) 0 0 calc(10 * (60rem / 390));
}

#Night .cat_img_wrap .txt_time {
  top: 0;
  right: 0;
  margin: calc(-20 * (60rem / 390)) calc(15 * (60rem / 390)) 0 0;
}

.cat_img_wrap .cat_ttl {
  position: absolute;
  color: #fff;
  font-size: calc(22 * (60rem / 390));
  font-weight: 400;
  transition-delay: .8s;
}

#morning .cat_img_wrap .cat_ttl {
  top: 0;
  right: 0; 
  margin: calc(15 * (60rem / 390)) calc(60 * (60rem / 390)) 0 0;
  writing-mode: vertical-rl;
}

#daytime .cat_img_wrap .cat_ttl {
  top: 0;
  right: 0;
  margin: calc(70 * (60rem / 390)) calc(60 * (60rem / 390)) 0 0;
}

#Night .cat_img_wrap .cat_ttl {
  bottom: 0;
  left: 0;
  margin: 0 0 calc(20 * (60rem / 390)) calc(15 * (60rem / 390));
  writing-mode: vertical-rl;
}

.cat_img_wrap .cat_ttl span {
  position: relative;
  z-index: 1;
  display: block;
  width: fit-content;
  height: fit-content;
  padding: calc(8 * (60rem / 390)) calc(5 * (60rem / 390)) calc(8 * (60rem / 390)) calc(3 * (60rem / 390));
  letter-spacing: .2em;
}

#daytime .cat_img_wrap .cat_ttl span {
  padding: calc(5 * (60rem / 390)) calc(8 * (60rem / 390)) calc(3 * (60rem / 390)) calc(8 * (60rem / 390));
}

.cat_img_wrap .cat_ttl span:nth-of-type(n+2) {
  margin-right: calc(5 * (60rem / 390));
}

#daytime .cat_img_wrap .cat_ttl span:nth-of-type(n+2) {
  margin: calc(5 * (60rem / 390)) 0 0 calc(133 * (60rem / 390));
}

.cat_img_wrap .cat_ttl span::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: .8;
}

#morning .cat_img_wrap .cat_ttl span::before {
  background: var(--color_01_01);
}

#daytime .cat_img_wrap .cat_ttl span::before {
  background: var(--color_02_01);
}

#Night .cat_img_wrap .cat_ttl span::before {
  background: #688190;
}

.item_list_outside {
  width: calc(100% - calc(10 * (60rem / 390)));
  margin: 0 auto;
  padding: calc(30 * (60rem / 390)) 0 calc(50 * (60rem / 390));
  background: #fff;
}

.item_img_list {
  position: relative;
  padding: calc(20 * (60rem / 390)) 0 calc(10 * (60rem / 390));
}

.item_img_list::before {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(290 * (60rem / 390));
  height: calc(290 * (60rem / 390));
  border-radius: 50% 50% 0 0;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, .1) inset;
  background: #fff;
  content: "";
}

#morning .item_img_list::before {
  background: var(--color_01_02);
}

#daytime .item_img_list::before {
  background: var(--color_02_02);
}

#Night .item_img_list::before {
  background: var(--color_03_02);
}

.item_img_list::after {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url(../img/mask_001.svg), url(../img/mask_002.svg);
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: cover, calc(290 * (60rem / 390)) auto;
  -webkit-mask-image: url(../img/mask_001.svg), url(../img/mask_002.svg);
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover, calc(290 * (60rem / 390)) auto;
  -webkit-mask-composite: source-over;
  mask-composite: exclude;
  background: #fff;
  content: "";
  pointer-events: none;
}

.item_img_list .slick-arrow {
  z-index: 3;
  width: calc(20 * (60rem / 390));
  height: calc(40 * (60rem / 390));
  margin-top: calc(50 * (60rem / 390));
}

.item_img_list .slick-prev {
  left: 0;
  margin-left: calc(15 * (60rem / 390));
}

.item_img_list .slick-next {
  right: 0;
  margin-right: calc(15 * (60rem / 390));
}

.item_img_list .slick-arrow::before {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: calc(20 * (60rem / 390));
  height: calc(20 * (60rem / 390));
  border-bottom: solid calc(4 * (60rem / 390));
  border-left: solid calc(4 * (60rem / 390));
  box-sizing: border-box;
  rotate: 45deg;
  opacity: 1 !important;
  content: "";
}

.item_img_list .slick-prev::before {
  margin-left: calc(5 * (60rem / 390));
}

.item_img_list .slick-next::before {
  margin-left: calc(-5 * (60rem / 390));
  scale: -1;
}

#morning .item_img_list .slick-arrow::before {
  border-color: var(--color_01_01);
}

#daytime .item_img_list .slick-arrow::before {
  border-color: var(--color_02_01);
}

#Night .item_img_list .slick-arrow::before {
  border-color: var(--color_03_01);
}

.each_img {
  width: calc(260 * (60rem / 390));
  margin: 0 calc(65 * (60rem / 390));
}

.item_detail_list {
  width: calc(290 * (60rem / 390));
  margin: 0 auto;
}

.item_detail_list li {
  position: relative;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity .5s;
}

.item_detail_list li.selected {
  opacity: 1;
  height: auto;
  overflow: visible;
  padding-top: calc(10 * (60rem / 390));
}

.item_mention {
  position: absolute;
  bottom: 100%;
  right: 0;
  display: grid;
  place-items: center;
  width: calc(80 * (60rem / 390));
  height: calc(80 * (60rem / 390));
  margin: 0 calc(5 * (60rem / 390)) calc(5 * (60rem / 390)) 0;
  font-size: calc(16 * (60rem / 390));
  color: #fff;
  pointer-events: none;
}

.item_mention span {
  rotate: -45deg;
  margin: calc(28 * (60rem / 390)) 0 0 calc(28 * (60rem / 390));
}

.item_mention::before {
  position: absolute;
  bottom: 0;
  right: 0;
  border: solid calc(40 * (60rem / 390));
  border-top-color: transparent;
  border-left-color: transparent;
  content: "";
}

#morning .item_mention::before {
  border-bottom-color: var(--color_01_01);
  border-right-color: var(--color_01_01);
}

#daytime .item_mention::before {
  border-bottom-color: var(--color_02_01);
  border-right-color: var(--color_02_01);
}

#Night .item_mention::before {
  border-bottom-color: var(--color_03_01);
  border-right-color: var(--color_03_01);
}


.item_cat {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: grid;
  place-items: center;
  height: calc(24 * (60rem / 390));
  margin: 0 0 calc(10 * (60rem / 390)) calc(10 * (60rem / 390));
  border: solid calc(2 * (60rem / 390));
  padding: 0 calc(10 * (60rem / 390));
  font-size: calc(14 * (60rem / 390));
  font-weight: 700;
  letter-spacing: .05em;
  pointer-events: none;
}

#morning .item_cat {
  border-color: var(--color_01_03);
  color: var(--color_01_03);
}

#daytime .item_cat {
  border-color: var(--color_02_03);
  color: var(--color_02_03);
}

#Night .item_cat {
  border-color: var(--color_03_03);
  color: var(--color_03_03);
}

.item_catch {
  margin-bottom: calc(8 * (60rem / 390));
  font-family: var(--font_serif);
  font-size: calc(18 * (60rem / 390));
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .09em;
}

#morning .item_catch {
  color: var(--color_01_01);
}

#daytime .item_catch {
  color: var(--color_02_01);
}

#Night .item_catch {
  color: var(--color_03_01);
}

.item_name {
  margin-bottom: calc(6 * (60rem / 390));
  font-size: calc(15 * (60rem / 390));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .05em;
}

.item_name .item_brand {
  display: block;
  margin-bottom: calc(6 * (60rem / 390));
  font-weight: 700;
  letter-spacing: .05em;
}

.item_detail_list li > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item_price {
  font-size: calc(15 * (60rem / 390));
  letter-spacing: .05em;
}

.item_price .txt_S {
  margin-left: calc(5 * (60rem / 390));
  font-size: calc(11 * (60rem / 390));
  letter-spacing: .05em;
}

.item_link {
  display: grid !important;
  place-items: center;
  width: calc(100 * (60rem / 390));
  height: calc(30 * (60rem / 390));
  font-size: calc(16 * (60rem / 390));
  color: #fff;
}

#morning .item_link {
  background: var(--color_01_01);
}

#daytime .item_link {
  background: var(--color_02_01);
}

#Night .item_link {
  background: var(--color_03_01);
}

.item_notes {
  margin-top: calc(8 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
  line-height: 1.3;
  letter-spacing: .05em;
}

.thumbnail_list {
  display: flex;
  justify-content: center;
  gap: calc(5 * (60rem / 390));
  margin-top: calc(30 * (60rem / 390));
}

.thumbnail_list li {
  position: relative;
  width: calc(50 * (60rem / 390));
  cursor: pointer;
}

.thumbnail_list li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid calc(1 * (60rem / 390));
  box-sizing: border-box;
  content: "";
  opacity: .5;
  pointer-events: none;
  transition: opacity .3s, border-width .1s;
}

.thumbnail_list li.selected::before {
  opacity: 1;
  border-width: calc(2 * (60rem / 390));
}

#morning .thumbnail_list li::before {
  border-color: var(--color_01_03);
}

#daytime .thumbnail_list li::before {
  border-color: var(--color_02_03);
}

#Night .thumbnail_list li::before {
  border-color: var(--color_03_03);
}

.each_cat .btn_wrap {
  margin-top: calc(40 * (60rem / 390));
}

#morning .btn_comment {
  color: var(--color_01_03);
}

#daytime .btn_comment {
  color: var(--color_02_03);
}

#Night .btn_comment {
  color: var(--color_03_03);
}

#morning .btn_comment::before, 
#morning .btn_comment::after,
#morning .btn_comment span::before,
#morning .btn_comment span::after {
  background: var(--color_01_03);
}

#daytime .btn_comment::before, 
#daytime .btn_comment::after,
#daytime .btn_comment span::before,
#daytime .btn_comment span::after {
  background: var(--color_02_03);
}

#Night .btn_comment::before, 
#Night .btn_comment::after,
#Night .btn_comment span::before,
#Night .btn_comment span::after {
  background: var(--color_03_03);
}

#morning .btn_allItem a {
  background: var(--color_01_01);
  border-color: var(--color_01_03);
}

#daytime .btn_allItem a {
  background: var(--color_02_01);
  border-color: var(--color_02_03);
}

#Night .btn_allItem a {
  background: var(--color_03_01);
  border-color: var(--color_03_03);
}
/*product------------------------*/

/*lastly-------------------------*/
.lastly_area {
  position: relative;
  z-index: 1;
  padding: calc(60 * (60rem / 390)) 0;
  background: #fff;
}

.lastly_img {
  margin-bottom: calc(25 * (60rem / 390));
}
/*-------------------------lastly*/

/*fixed nav---------------------*/
.fixed_nav {
  position: fixed;
  z-index: 2;
  bottom: 0;
  width: 100%;
  translate: 0 100%;
  transition: translate .3s;
}

.fixed_nav.active {
  translate: 0 0;
}

.fixed_nav .nav_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.fixed_nav .nav_list li a {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(68 * (60rem / 390));
  border-top: solid calc(4 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  line-height: 1.3;
  letter-spacing: .05em;
  text-align: center;
  color: #fff;
}

.fixed_nav .nav_list li:nth-of-type(1) a {
  border-color: var(--color_01_03);
  background: var(--color_01_01);
}

.fixed_nav .nav_list li:nth-of-type(2) a {
  border-color: var(--color_02_03);
  background: var(--color_02_01);
}

.fixed_nav .nav_list li:nth-of-type(3) a {
  border-color: var(--color_03_03);
  background: var(--color_03_01);
}

.fixed_nav .nav_list li a::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(22 * (60rem / 390));
  height: calc(22 * (60rem / 390));
  margin: 0 0 calc(3 * (60rem / 390)) calc(3 * (60rem / 390));;
  content: "";
}

.fixed_nav .nav_list li:nth-of-type(1) a::before {
  background: url(../img/deco_001.svg) center center / cover no-repeat;
}

.fixed_nav .nav_list li:nth-of-type(2) a::before {
  background: url(../img/deco_002.svg) center center / cover no-repeat;
}

.fixed_nav .nav_list li:nth-of-type(3) a::before {
  background: url(../img/deco_005.svg) center center / cover no-repeat;
}
/*---------------------fixed nav*/

/*shareボタン、shareテキスト---------------------------*/
@media screen and  (max-width:768px) {
#share {
  z-index: 10 !important;
  transition: translate .3s;
}

#share.move {
  translate: 0 calc(-68 * (60rem / 390));
}

.share-txt {
  display: none;
}

.only_pc {
  display: none;
}

}
/*---------------------------shareボタン、shareテキスト*/


/*PC------------------------------------------------------*/
@media screen and  (min-width:769px) {
  .only_sp {
    display: none;
  }

  .LP_page_inner {
    position: relative;
    z-index: 1;
    width: 60rem ;
    min-height: 100vh;
    margin: -100vh auto 0;
    overflow: clip;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  }

  .fixed_area {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    background: #C7E2F2;
  }
  
  .fixed_left,
  .fixed_right {
    display: grid;
    place-items: center;
    width: calc((100% - 60rem) / 2);
    height: 100%;
  }
  
  .main_ttl_pc {
    position: relative;
    width: 35rem;
  }


.pc_nav .nav_list {
  width: 33rem;
}

.pc_nav .nav_list li:nth-of-type(n+2) {
  margin-top:.2rem;
}

.pc_nav .nav_list li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.pc_nav .nav_list li:nth-of-type(1) a {
  background: var(--color_01_01);
}

.pc_nav .nav_list li:nth-of-type(2) a {
  background: var(--color_02_01);
}

.pc_nav .nav_list li:nth-of-type(3) a {
  background: var(--color_03_01);
}

.pc_nav .nav_list li a::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: .8rem;
  height: .8rem;
  margin-right: 1.5rem;
  border-right: solid #fff .2rem;
  border-bottom: solid #fff .2rem;
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
  transition: margin .3s;
}

.pc_nav .nav_list li a:hover::before {
  margin-top: .5rem;
}

.pc_nav .nav_list li:nth-of-type(1) a::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.4rem;
  height: 3.4rem;
  margin: .2rem 0 0 .2rem;
  background: url(../img/deco_001.svg) center center / cover no-repeat;
  content: "";
  pointer-events: none;
}

.pc_nav .nav_list li a .txt_time {
  position: relative;
  flex: 1;
  height: 2.5rem;
  padding-right: 1rem;
  text-align: right;
}

.pc_nav .nav_list li a .txt_time::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: .1rem;
  height: 3.5rem;
  background: #fff;
  content: "";
}

.pc_nav .nav_list li a .txt_time img {
  width: auto;
  height: 100%;
}

.pc_nav .nav_list li a .nav_ttl {
  position: relative;
  display: flex;
  align-items: center;
  width: 22rem;
  height: 6rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #fff;
}

.pc_nav .nav_list li:nth-of-type(2) a .nav_ttl::before {
  position: absolute;
  bottom: 0;
  right: 100%;
  width: 2.3rem;
  height: 2.3rem;
  margin: 0 2.4rem .2rem 0;
  background: url(../img/deco_002.svg) center center / cover no-repeat;
  content: "";
  pointer-events: none;
}

.pc_nav .nav_list li:nth-of-type(2) a .nav_ttl::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 5rem;
  height: 5rem;
  margin-right: 2.6rem;
  background: url(../img/deco_003.svg) center center / cover no-repeat;
  content: "";
  pointer-events: none;
}

.pc_nav .nav_list li:nth-of-type(3) a .nav_ttl::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: 3rem;
  height: 3rem;
  margin-right: 5rem;
  background: url(../img/deco_004.svg) center center / cover no-repeat;
  content: "";
  pointer-events: none;
}



}
/*------------------------------------------------------PC*/


/*レスポンシブ対応-------------------------------*/
@media screen and (max-width: 1400px) and (min-width: 769px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: calc(10 * (100vw / 600));
  }
}
/*-------------------------------レスポンシブ＆タブレット対応*/