@charset "utf-8";

/*

トップページ用のスタイルです。

*/

/* ------------ */
/* #main_visual */
/* ------------ */
#main_visual {
 position: relative;
 height: 100vh;
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
 color: #fff;
 font-family: var(--font-family-accent);
}

/*メインビジュアルに透過マスクかける場合は使用*/
/*
#main_visual::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
}
*/
#main_visual>.inner {
 height: 100%;
 position: relative;
 z-index: 2;
 width: 100%;
 max-width: 1600px;
 margin: 0 auto;
 display: flex;
 justify-content: center;
 align-items: center;
}

#main_visual .txt_contents {
 margin: 0.25rem;
 background-color: rgb(var(--color-main-dark-rgb), 0.8);

}

#main_visual .catch_copy {
 color: var(--color-accent-2);
}

#main_visual .txt_01 {
 color: #fff;
 /* color: var(--color-accent-2); */
 text-align: center;
}

#main_visual .txt_02 {
 /* color: #fff; */
 color: var(--color-accent-2);
 text-align: center;
}

#main_visual .txt_03 {
 color: #fff;
 /* color: var(--color-accent-2); */
 text-align: center;
}

@media screen and (max-width:767px) {
 #main_visual {
  height: calc(100vh - 60px);
 }

 #main_visual>.inner {
  padding: calc(2rem + 60px) calc(20px - 0.5rem) calc(2rem + 2rem) calc(20px - 0.5rem);
 }

 #main_visual .catch_copy {
  padding: 1rem 0.75rem 0.5rem 0.75rem;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.07em;
 }

 #main_visual .sub_copy {
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
 }

 #main_visual .txt_01 {
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: 0.5rem;
 }

 #main_visual .txt_01>.inner {
  margin-right: -0.75rem;
  white-space: nowrap;
 }

 #main_visual .txt_01 .num {
  font-size: 150%;
 }

 #main_visual .txt_02 {
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  font-size: 1.4rem;
  letter-spacing: 0.0rem;
  line-height: 1.25;
 }

 #main_visual .txt_02>.inner {
  white-space: nowrap;
 }

 /* #main_visual .txt_03 {
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  font-size: 1.2rem;
  letter-spacing: normal;
  line-height: 1.25;
 } */

 #main_visual .txt_03 {
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  font-size: 4rem;
  letter-spacing: 1.75rem;
  text-indent: 1.75rem;
  line-height: 1.25;
 }

 /* #main_visual .txt_03>.inner {
  margin-right: -1.5rem;
 } */
}

@media print,
screen and (min-width:768px) {
 #main_visual>.inner {
  padding: calc(2rem + 120px) calc(2rem - 0.5rem) calc(2rem + 2rem) calc(2rem - 0.5rem);
 }

 #main_visual .catch_copy {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
  font-size: 3rem;
  line-height: 1.25;
  text-align: center;
 }

 #main_visual .sub_copy {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
  font-size: calc(1rem + 6px);
  line-height: 1.5;
  text-align: center;
 }
}

@media print,
screen and (min-width:768px) and (max-width:1024px) {
 #main_visual {
  height: calc(100vh - 260px - 60px);
 }

 #main_visual>.inner {
  padding-top: calc(2rem + 60px);
 }

 #main_visual .txt_01 {
  padding: 0.75rem 0.5rem 0.5rem 0.5rem;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 1rem;
  padding-bottom: 0.75rem;
 }

 #main_visual .txt_01>.inner {
  margin-right: -1.5rem;
  white-space: nowrap;
 }

 #main_visual .txt_01 .num {
  font-size: 150%;
 }

 #main_visual .txt_02 {
  padding: 0.75rem 0.5rem 0.5rem 0.5rem;
  font-size: 1.75rem;
  letter-spacing: 0.15rem;
  line-height: 1;
 }

 #main_visual .txt_02>.inner {
  margin-right: -0.15rem;
  white-space: nowrap;
 }

 /* #main_visual .txt_03 {
  padding: 1.0rem 0.5rem 0.25rem 0.5rem;
  font-size: 1.4rem;
  letter-spacing: normal;
  line-height: 1;
 } */

 #main_visual .txt_03 {
  padding: 0.55rem 0.5rem 0.8rem;
  font-size: 5.0rem;
  letter-spacing: 3.4rem;
  line-height: 1;
  padding-bottom: 1rem;
 }

}

@media print,
screen and (min-width:1025px) {
 #main_visual {
  height: calc(100vh - 184px);
 }

 #main_visual .txt_01 {
  padding: 0.75rem 0.5rem 0.5rem 0.5rem;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 1rem;
 }

 #main_visual .txt_01>.inner {
  margin-right: -1.5rem;
  white-space: nowrap;
 }

 #main_visual .txt_01 .num {
  font-size: 150%;
 }

 #main_visual .txt_02 {
  padding: 0.75rem 0.5rem 0.5rem 0.5rem;
  font-size: 2.1rem;
  /* font-size: 2.8rem; */
  letter-spacing: 0.3rem;
  line-height: 1;
 }

 #main_visual .txt_02>.inner {
  margin-right: -0.15rem;
  white-space: nowrap;
 }

 /* #main_visual .txt_03 {
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  font-size: 1.4rem;
  letter-spacing: normal;
  line-height: 1;
 } */

 #main_visual .txt_03 {
  padding: 0.55rem 0.5rem 0.8rem;
  font-size: 6.75rem;
  letter-spacing: 3.4rem;
  text-indent: 3.4rem;
  line-height: 1;
 }

 /* #main_visual .txt_03>.inner {
  margin-right: -3.0rem;
 } */
}

/* ----------- */
/* #slick_wrap */
/* ----------- */
#slick_wrap {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #fff;
}

#slick_wrap .contents_block {
 display: none;
 position: relative;
 background: no-repeat center;
 background-size: cover;
}

#slick_wrap .slick-track .contents_block {
 display: block;
}

#slick_wrap .contents_block,
.slick-list,
.slick-track {
 height: 100%;
}

#slick_wrap .contents_block::after {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: no-repeat center;
 background-size: cover;
}

/* ----------- */
/* #home_merit */
/* ----------- */
#home_merit {
 font-family: var(--font-family-accent);
}

#home_merit #merit_sougei .heading .txt_01 {
 display: inline-block;
 color: var(--color-main);
}

#home_merit #merit_sougei .heading .txt_02 {
 display: inline-block;
 color: #634323;
}

#home_merit #merit_access .heading .txt_01 {
 display: inline-block;
 color: #634323;
}

#home_merit #merit_access .heading .txt_02 {
 display: inline-block;
 color: #634323;
}

#home_merit #merit_access .heading .txt_03 {
 color: var(--color-main);
}

#home_merit img {
 aspect-ratio: 1 / 1;
 object-fit: cover;
}

#home_merit #merit_access img {
 object-position: left center;
}

#home_merit #merit_yakan .heading {
 color: #634323;
}

#home_merit #merit_yakan .heading .txt_03 {
 color: var(--color-main);
}

#home_merit #merit_yakan .heading .txt_01 {
 display: inline-block;
}

#home_merit #merit_yakan .heading .txt_02 {
 display: inline-block;
}

@media screen and (max-width:767px) {
 #home_merit {
  padding: 3rem 20px;
 }

 #home_merit>.inner>.contents_block {
  display: flex;
 }

 #home_merit>.inner>.contents_block:not(:nth-of-type(1)) {
  margin-top: 2rem;
 }

 #home_merit .img_area {
  width: 60px;
 }

 #home_merit .detail_area {
  width: calc(100% - 60px - 1rem);
  margin-left: 1rem;
 }

 #home_merit .heading {
  margin: 0;
 }

 #home_merit #merit_sougei .heading {
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: 0.2em;
 }

 #home_merit #merit_access .heading {
  margin-top: -8px;
  font-size: calc(1rem - 1px);
  line-height: 1.25;
 }

 #home_merit #merit_access .heading .txt_01 {
  margin-right: 0.25rem;
 }

 #home_merit #merit_access .heading .txt_03 {
  position: relative;
  top: 5px;
  font-size: 175%;
 }

 #home_merit #merit_yakan .heading {
  display: inline-block;
  margin-top: -16px;
  line-height: 1.25;
  letter-spacing: 0.1rem;
 }

 #home_merit #merit_yakan .heading .txt_01 {
  margin-right: 0.5rem;
 }

 #home_merit #merit_yakan .heading .txt_03 {
  position: relative;
  top: 4px;
  font-size: 175%;
 }

 #home_merit .explanation {
  margin: 0.25rem 0 0;
  font-size: calc(1rem - 2px);
  line-height: 1.25;
 }
}

@media print,
screen and (min-width:768px) {
 #home_merit {
  max-width: 1600px;
  padding: 2rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
 }

 #home_merit>.inner {
  width: 100%;
  display: flex;
  justify-content: center;
 }

 #home_merit>.inner>.contents_block:nth-of-type(1) {
  margin-right: 16px;
 }

 #home_merit>.inner>.contents_block:nth-of-type(2) {
  margin-right: 8px;
  margin-left: 8px;
 }

 #home_merit>.inner>.contents_block:nth-of-type(3) {
  margin-left: 16px;
 }

 #home_merit .explanation {
  margin: 0.5rem 0 0;
  font-size: calc(1rem - 3px);
  line-height: 1.25;
 }

 #home_merit .heading {
  margin: 0;
 }
}

@media print,
screen and (min-width:768px) and (max-width:1024px) {
 #home_merit {
  height: 260px;
 }

 #home_merit>.inner>.contents_block {
  width: calc(100% / 3 - 16px - 0.1px);
 }

 #home_merit .img_area {
  position: relative;
  height: 100px;
  overflow: hidden;
 }

 #home_merit .img_area img {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 100%;
 }

 #home_merit .heading {
  margin: 1.5rem 0 0.75rem;
  font-size: calc(1rem + 2px);
  line-height: 1.25;
  text-align: center;
 }

 #home_merit #merit_access .heading .txt_01 {
  margin-right: 0.5rem;
  font-size: calc(1rem - 4px);
 }

 #home_merit #merit_yakan .heading .txt_01 {
  margin-right: 0.5rem;
 }

 #home_merit #merit_access .img_area img {
  transform: translate(0, calc(-50% - 12.5%));
 }

 #home_merit .explanation_wrap {
  display: flex;
  justify-content: center;
 }

 #home_merit .explanation {
  margin-top: 0.5rem;
 }
}

@media print,
screen and (min-width:1025px) {
 #home_merit {
  height: 184px;
 }

 #home_merit>.inner>.contents_block {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

 #home_merit .img_area {
  width: 120px;
 }

 #home_merit .detail_area {
  width: calc(100% - 120px - 12px);
 }

 #home_merit #merit_sougei .heading {
  font-size: calc(2rem - 0px);
  line-height: 1.15;
  letter-spacing: 0.1em;
 }

 #home_merit #merit_access .heading .txt_01 {
  font-size: calc(1rem - 2px);
  line-height: 1;
 }

 #home_merit #merit_access .heading .txt_02 {
  margin-top: -12px;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.25em;
 }

 #home_merit #merit_access .heading .txt_03 {
  position: relative;
  top: 7px;
  font-size: 175%;
 }

 #home_merit #merit_yakan .heading {
  display: inline-block;
  font-size: calc(1rem + 4px);
  line-height: 1;
  letter-spacing: 0.1em;
 }

 #home_merit #merit_yakan .heading .txt_03 {
  position: relative;
  top: 7px;
  font-size: 200%;
 }
}

@media print,
screen and (min-width:1025px) and (max-width:1599px) {
 #home_merit>.inner>.contents_block {
  width: 300px;
 }
}

@media print,
screen and (min-width:1600px) {
 #home_merit {
  justify-content: space-between;
 }

 #home_merit>.inner>.contents_block {
  width: calc(100% / 3 - 1.5rem / 3 * 2 - 0.1px);
 }

 #home_merit #merit_access .heading {
  margin-top: -0.5rem;
 }

 #home_merit #merit_yakan .heading {
  margin-top: -0.5rem;
 }
}

/* -------------- */
/* home_layout_01 */
/* -------------- */
.home_layout_01 .heading {
 background-color: var(--color-main);
 background-color: rgb(var(--color-main-rgb), 0.8);
 color: #fff;
 font-family: var(--font-family-heading);
 font-weight: 400;
}

.home_layout_01 .more {
 font-family: var(--font-family-accent);
}

.home_layout_01 .more a {
 text-decoration: none;
}

@media screen and (max-width:767px) {
 .home_layout_01 .heading_wrap {
  position: relative;
  left: -20px;
  width: calc(100% + 40px);
 }

 .home_layout_01 .heading_wrap::after {
  content: "";
  display: block;
  clear: both;
 }

 .home_layout_01 .heading {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin-right: 20px;
  padding: 16px 20px;
  font-size: calc(1rem + 4px);
 }

 .home_layout_01.style_02 .heading {
  float: right;
  margin-right: 0;
  margin-left: 20px;
 }

 .home_layout_01 .img_area_01 {
  position: relative;
  z-index: 1;
  float: right;
  width: calc(100% - 20px);
  max-width: 860px;
  margin-top: -20px;
 }

 .home_layout_01.style_02 .img_area_01 {
  float: left;
 }

 .home_layout_01 .detail_area_wrap::after {
  content: "";
  display: block;
  clear: both;
 }

 .home_layout_01 .detail_area {
  margin-top: 1.5rem;
  line-height: 2.25;
 }

 .home_layout_01 .more {
  position: relative;
  width: calc(100% - 1rem);
  max-width: 320px;
  margin-top: 3rem;
  margin-left: 1rem;
  float: right;
 }

 .home_layout_01 .more::after {
  content: "";
  display: block;
  clear: both;
 }

 .home_layout_01 .more a {
  display: block;
  position: relative;
  height: 76px;
  padding: 1.25rem 0.25rem 1rem 115px;
  text-align: center;
  background-color: var(--color-accent-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 }

 .home_layout_01 .more a::before {
  content: "";
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  z-index: 2;
  width: 120px;
  max-width: 50%;
  height: 100%;
  background-color: #9c9380;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 200ms opacity;
 }

 .home_layout_01 .more a:hover::before {
  opacity: 0.6;
 }

 .home_layout_01 .more a::after {
  content: "";
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  z-index: 1;
  width: 120px;
  max-width: 50%;
  height: 100%;
  background: #fff;
 }

 .home_layout_01 .more a>.inner {
  display: inline-block;
  position: relative;
  padding-right: 2rem;
  padding-bottom: 0.5rem;
  overflow: hidden;
  font-size: calc(1rem + 2px);
 }

 .home_layout_01 .more a>.inner::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0.5rem;
  width: 100%;
  height: 9px;
  background: url('images/arrow_01.svg') no-repeat right bottom;
  background-size: cover;
  transition: 200ms transform;
 }

 .home_layout_01 .more a:hover>.inner::after {
  transform: translate(0.5rem, 0);
 }

 .home_layout_01 .img_area_02 {
  display: none;
 }
}

@media print,
screen and (min-width:768px) {
 .home_layout_01 .heading_wrap {
  position: relative;
  left: -2rem;
  width: calc(100% + 4rem);
  display: flex;
  justify-content: flex-end;
  align-items: center;
 }

 .home_layout_01.style_02 .heading_wrap {
  justify-content: flex-start;
 }

 .home_layout_01 .heading {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  max-width: 50%;
  padding: 2rem;
  font-size: 1.85rem;
 }

 .home_layout_01.style_02 .heading {
  left: auto;
  right: 0;
 }

 .home_layout_01 .img_area_01 {
  width: 62.5%;
 }

 .home_layout_01 .detail_area_wrap {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
 }

 .home_layout_01 .detail_area_wrap.align-items-center {
  align-items: center;
 }

 .home_layout_01.style_02 .detail_area_wrap {
  flex-direction: row;
 }

 .home_layout_01 .detail_area {
  width: 63%;
  padding: 5rem 0 7rem;
  line-height: 2.25;
 }

 .home_layout_01 .more {
  position: absolute;
  bottom: 0;
  right: -0.5rem;
 }

 .home_layout_01.style_02 .more {
  left: 0;
  right: auto;
 }

 .home_layout_01 .more a>.inner {
  display: inline-block;
  position: relative;
  padding-right: 2rem;
  padding-bottom: 0.5rem;
  overflow: hidden;
  font-size: calc(1rem + 4px);
 }

 .home_layout_01 .more a>.inner::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0.5rem;
  width: 100%;
  height: 9px;
  background: url('images/arrow_01.svg') no-repeat right bottom;
  background-size: cover;
  transition: 200ms transform;
 }

 .home_layout_01 .more a:hover>.inner::after {
  transform: translate(0.5rem, 0);
 }

 .home_layout_01 .img_area_02 {
  position: relative;
  width: 30%;
  margin-bottom: 3rem;
  height: fit-content;
 }

 .home_layout_01.style_02 .img_area_02 {
  right: 2rem;
 }

 .home_layout_01 .img_area_02::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 3rem;
  right: -2rem;
  width: 100%;
  height: 100%;
  background-color: var(--color-accent-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 }

 .home_layout_01 .img_area_02 img {
  position: relative;
  z-index: 2;
 }
}

@media print,
screen and (min-width:768px) and (max-width:1024px) {
 .home_layout_01 .detail_area_wrap.two_links {
  padding-bottom: 90px;
 }

 .home_layout_01 .detail_area {
  padding: 2rem 0;
 }
}

@media print,
screen and (min-width:1024px) and (max-width:1240px) {
 .home_layout_01 .detail_area_wrap.two_links {
  padding-bottom: 60px;
 }

 .home_layout_01 .detail_area {
  padding: 3rem 0;
 }
}


/* ------------ */
/* #home_info_wrap */
/* #home_topics */
/* #home_blog */
/* ------------ */
#home_info_wrap {
 position: relative;
}

/* オーバーレイ */
#home_info_wrap::before {
 content: "";
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
 opacity: 0.7;
 background-color: var(--color-accent-2);
}

.section_home_info {
 position: relative;
 z-index: 3;
}

.home_topics_bgi {
 position: absolute;
 inset: 0;
 z-index: 1;
 width: 100%;
 height: 100%;
}

.home_topics_bgi img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 50% 50%;
}

#home_topics .heading_area,
#home_blog .heading_area {
 font-family: var(--font-family-heading);
}

@media screen and (max-width:767px) {
 #home_topics {
  /* border-bottom: 1px solid #333; */
  padding-bottom: 3rem;
 }

 #home_topics .heading_area .ttl,
 #home_blog .heading_area .ttl {
  color: var(--color-main);
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
 }

 #home_topics .contents_area,
 #home_blog .contents_area {
  margin-top: 1rem;
 }

 #home_topics .more,
 #home_blog .more {
  margin-top: 2.5rem;
  font-family: var(--font-family-accent);
 }
}

@media print,
screen and (min-width:768px) {
 #home_info_wrap {
  position: relative;
  /* background-image: url(./images/home/info_img_01.jpg);
  background-size: cover;
  background-position: 50% 50%; */
 }


 #home_topics,
 #home_blog {
  position: relative;
  min-height: 240px;
 }

 #home_topics::before,
 #home_blog::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: -1px;
 }

 #home_topics .heading_area,
 #home_blog .heading_area {
  position: absolute;
  width: 240px;
  height: 240px;
 }

 #home_blog .heading_area {
  height: 180px;
 }

 #home_topics .heading_area {
  background-color: var(--color-main);
  background-color: rgb(var(--color-main-rgb), 0.8);
 }

 #home_blog .heading_area {
  color: var(--color-main);
  background: rgba(255, 255, 255, 0.95);
 }

 #home_topics .heading_area .ttl,
 #home_blog .heading_area .ttl {
  position: absolute;
  top: calc(50% - 1.5rem);
  right: 50%;
  transform: translate(50%, -50%);
  width: 100%;
  text-align: center;
  font-weight: 400;
  font-size: 2rem;
 }

 #home_topics .heading_area .ttl {
  color: #fff;
 }

 #home_blog .heading_area .ttl {
  font-size: 1.75rem;
  top: calc(50% - 1.75rem);
 }

 #home_topics .heading_area a,
 #home_blog .heading_area a {
  display: block;
  position: absolute;
  bottom: 2.5rem;
  right: 50%;
  transform: translate(50%, 0);
  width: calc(100% - 3rem);
  padding: 0.75rem 1rem;
  overflow: hidden;
  border-radius: 2px;
  color: #333;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
 }

 #home_topics .heading_area a {
  background: #fff;
 }

 #home_blog .heading_area a {
  bottom: 1.75rem;
  color: #fff;
  background-color: var(--color-main);
  background-color: rgb(var(--color-main-rgb), 0.8);
  padding: 0.5rem 1rem;
 }

 #home_blog .heading_area a:hover {
  color: #333;
 }


 #home_topics .heading_area a::after,
 #home_blog .heading_area a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  width: 100%;
  height: 100%;
  background: var(--color-accent-2);
  transition: 200ms transform;
 }

 #home_topics .heading_area a:hover::after,
 #home_blog .heading_area a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
 }

 #home_topics .contents_area,
 #home_blog .contents_area {
  min-height: 240px;
  margin-top: 2rem;
  margin-left: 2rem;
  padding: 3rem 2rem 3rem 240px;
 }

 #home_topics .contents_area {
  background: rgba(255, 255, 255, 0.8);
 }

 #home_blog .contents_area {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 1.5rem;
  height: 180px;
  min-height: 180px;
  color: #fff;
  background-color: var(--color-main);
  background-color: rgb(var(--color-main-rgb), 0.8);
 }
}


/* ---- */
/* LAST */
/* ---- */