@charset "utf-8";
/* CSS Document */
:root {
    --color-default: #1E1717;
    --color-red: #931C18;
    --color-gray: #ECECEC;
    --color-white: #FFFFFF;
    --color-sub-bg: #CBC2AC;
    --color-sub-text: #968866;
    --color-lightyellow: linear-gradient(to bottom, #F4E7C7, #F4E7C7);
    --color-gradation: linear-gradient(30deg, #F4E7C7 0%, #F4E7C7 35%,  #CBC2AC 100%);
	--color-gradation2: 

    --font-size-default: 16px;
    --font-weight-normal: 400;

    --sp-wrapper-width: clamp(380px, 50vw ,800px);
	--header-height: clamp(78px, 20.8vw, 88px);
	--outer-left-width: clamp(280px, calc(90vw - var(--sp-wrapper-width)), 400px);
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box; }
html{
  scroll-padding-top: var(--header-height)}
body {
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-normal);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: var(--color-default);
  line-height: 1.6;
  margin: 0;
  padding: 0; }
.fnt_roboto{
  font-family: 'Roboto', sans-serif;}
.fnt_jun{
  font-family: "a-otf-jun-pro", sans-serif;
  font-weight: 300;
  font-style: normal;}
#outer{
  background: linear-gradient(160deg, #F4E7C7 0%,  #CBC2AC 100%);
  width:100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;}
#outer_overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 320px;
  background: #F4E7C7;
  background: linear-gradient(20deg, #F4E7C7 0%, #FFF1CF 100%);
  clip-path: polygon( 0 0, 100% 0, 100% calc(100% - (100vw * 0.1763)), 0 100% );
  pointer-events: none;
}
#outer_left{
  padding: 0 0;
  /*width: calc((100vw - var(--sp-wrapper-width)) / 2);*/
  width: var(--outer-left-width);
  max-width: 400px;
  display: flex;
  /*align-items: center;*/
  flex-direction: column;
  z-index: 1;}
#outer_left .flex_space{
  padding: 1em 0 1.5em;}
#outer_left .flex_space .blk_left{
  width: 26.5%;}
#outer_left .flex_space .blk_right{
  width: 65%;}
#container{
  width: var(--sp-wrapper-width);
  /*position: relative;
  margin:0 auto 0 auto;*/
  position: absolute;
  top: 0;
  left: calc(var(--outer-left-width) + (100vw - var(--outer-left-width) -  var(--sp-wrapper-width)) / 2);
  background:  var(--color-white);
  z-index: 10;}
main{
  overflow: hidden;
  padding-top: var(--header-height);}
img {
  border: none;
  max-width: 100%;
  height: auto;}

a img {
  border-style: none; }
a {
  outline: 0;
  color: var(--color-default);
  text-decoration: none; }
a:hover {
  opacity: 0.7; }
a img, :link img, :visited img {
  border: none; }
/* delate dot boader of link for New Mozilla \*/
a {
  overflow: hidden; }
a[href^="tel:"] { cursor: default; }
a[href^="tel:"]:hover { opacity: 1.0; }
a.no_hover {
  pointer-events: none;}
hr {
  border: 0;
  border-top: 1px solid var(--color-sub-bg);
  margin: 1.25em 0; }
nav hr {
  border-top: 1px solid var(--color-default);
  margin: 1.5em 0; }
ul {
  list-style-type:none;
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-inline-start: 0px; }

li {
  list-style-type: none; }
ol li {
  list-style: decimal;}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 400;}
p {
  margin-bottom: 1.5em; }
p:last-of-type {
  margin-bottom: 0; }
/*nav*/
nav {
  padding: 1.25em 0;
  /*line-height: 2.5;*/}
nav a,
.blk_nav a{
  display: block;
  padding-left: 1em;
  position:relative;
  transition-duration: 0.3s;}
nav a:after,
.blk_nav a:after{
  font-family: iconkonan;
  content: "\e900";
  color: var(--color-red);
  font-size: 0.75em;
  font-weight: 400;
  position: absolute;
  left: 0;
  top: 2.25em;
  transform: translateY(-50%);}
.blk_nav a:after{
  top: 1.5em;}
nav .bgc_white{
  margin-bottom: 1.5em;
  border-radius: 5px;
  padding: 0em 1em;}
nav .bgc_white:last-child{
  margin-bottom: 0}
.nav_sub_ttl ul{
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.5em;}
/* ▼　ヘッダ　▼ */
header{
  padding-bottom: 1em;}
#site_header{
  position: fixed;
  top: 0;
  /*left: 50%;
  ransform: translateX(-50%);*/
  left: calc(var(--outer-left-width) + (100vw - var(--outer-left-width) - var(--sp-wrapper-width)) / 2);
  z-index: 100;
  width: var(--sp-wrapper-width);
  height: var(--header-height);
  background-color: rgba(255, 255, 255, 0.8);}
#site_header .content{
  height: 100%;
  position: relative;
  z-index: -1;}
#site_title {
    height: 100%;
	transform: translateX(-48px);}
#site_title img:first-child{
	width: 57.5%;}
#site_title img:last-child{
	margin-top: 0.75em;
	width: 28.1%;}
/* ▽▽ハンバーガーメニュー▽▽ */
#nav_slide {
  display: none; }
.nav_slide_btn_wrap{
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(72px, 19.2vw, 96px);
	height: var(--header-height);
	background: var(--color-red);
	border-bottom-left-radius: 10px;}
.nav_slide_btn {
	position: relative;
	width: 100%;
    height: var(--header-height);
	cursor: pointer;
	display: block;
	z-index: 100;
	-webkit-transition: all 1s;
	transition: all 1s; }
.nav_slide_btn .area_lne_humberger {
	position: relative;
	width: clamp(24px, 6.4vw, 32px);
	height: clamp(12px, 3.2vw, 16px);
	margin-bottom: 0.5em;}
.nav_slide_btn .lne_humberger{
	display: inline-block;
	transition: all .4s;/*アニメーションの設定*/
	position: absolute;
	height: clamp(1.5px, 0.4vw, 2px);
	width: clamp(24px, 6.4vw, 32px);
	left: 0;
  	background-color: var(--color-white);}
.nav_slide_btn .lne_humberger:nth-of-type(1) {
	top: 0px; }
.nav_slide_btn .lne_humberger:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
    width: clamp(18px, 4.8vw, 24px)}
.nav_slide_btn .lne_humberger:nth-of-type(3) {
    bottom: 0;}
.nav_slide_btn_wrap .txt_menu,
.nav_slide_btn_wrap .txt_close{
	position: relative;
	color: var(--color-white);
    font-size: clamp(12px, 3.2vw, 16px);
    white-space: nowrap;}
.nav_slide_btn_wrap .txt_menu{
	display: block;}
.nav_slide_btn_wrap .txt_close{
	display: none;}
/* ▽▽開閉時のアニメーション▽▽ */
#nav_slide:checked ~ .nav_slide_btn .ico-menu {
  display: none; }
#nav_slide:checked ~ .nav_slide_btn .ico-close {
  display: inline; }
#nav_slide:checked ~ .nav_slide_btn .lne_humberger:nth-of-type(1) {
    transform: translateY(clamp(6px, 1.6vw, 8px)) rotate(30deg);}
#nav_slide:checked ~ .nav_slide_btn .lne_humberger:nth-of-type(2) {
    display: none;}
#nav_slide:checked ~ .nav_slide_btn .lne_humberger:nth-of-type(3) {
    transform: translateY(clamp(-6px, -1.6vw, -8px)) rotate(-30deg);}
#nav_slide:checked ~ .nav_slide_btn .txt_menu{
	display: none;}
#nav_slide:checked ~ .nav_slide_btn .txt_close{
	display: block;}
#nav_slide_cnt {
  width: 0%;
  height: calc(100vh - var(--header-height));
  padding: 1em 0;
  margin-top: var(--header-height);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: -1;
  position: absolute;
  right: 0;
  /*右からスライド*/
  top: 0;
  background-color: var(--color-red);
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s; }
#nav_slide:checked ~ #nav_slide_cnt {
  width: var(--sp-wrapper-width);
  opacity: 1; }
.scroll_off {
  overflow:hidden;}
#nav_outer{
  padding: 0;
  height: calc(100vh - 51px - 6em);
  overflow-y: scroll;}
.nav_outer_ttl{
	position: absolute;
    top: -1.5em;
    left: -10%;
	display: flex;
	align-items: center;
    height: 2.5em;
    width: calc(135px + 20%);
    padding-right: 3em;
    padding-left: 20%;
    border-radius: 0 3em 3em 0;
    background: var(--color-lightyellow);
    color: var(--color-red);
    white-space: nowrap;}
/* ▼　メイン　▼ */
section{
  padding-top: 2.5em;
  padding-bottom: 1em;
  opacity: 0;
  visibility: hidden;
  transition: all 2s; }
section.active {
  /*display: block;
  transform : translate(0, 0);*/
  opacity: 1;
  visibility: visible; }
section:first-of-type{
  padding-top: 0;}
.content_outer {
  max-width: 1000px;
  width: 92%;
  margin: 0 auto; }
.content {
  max-width: 1000px;
  width: 88%;
  margin: 0 auto; }
.content_inner {
  max-width: 1000px;
  width: 90%;
  margin: 0 auto; }
div:has(#breadcrumb) {
  border-top: 1px solid var(--color-gray);
  border-bottom: 1px solid var(--color-gray);
  margin-bottom: 1.5em;}
#breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5em 0;}
#breadcrumb li{
  color: var(--color-red);}
#breadcrumb li:not(:last-of-type)::after{
  content: "-";
  color: var(--color-default);
  margin: 0.5em; }
#breadcrumb li a{
  color: var(--color-default);}
#page_title,
#sec_application_ttl{
  position: relative;}
#page_title .area_txt,
#sec_application_ttl .area_txt{
    width: 100%;
    padding-top: 2em;
    background: #FFFFFF;
    border-radius: 0 8em 0 0;
    transform: translateY(-8em);
    margin-bottom: -8em;}
/*スライド*/
.swiper-wrapper {
  transition-timing-function: linear;}
.swiper-slide {
  width: calc(45% - 1px);
  flex-shrink: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;}
/*リンク*/
.hvr_uline_show a {
  position: relative;
  background-image: linear-gradient(90deg, var(--color-default), var(--color-default));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: background-size 0.6s;}
.hvr_uline_show a:hover{
  color: var(--color-default);
  background-size: 100% 1px;}
nav.hvr_uline_show a{
  line-height: 1.5;
  padding-top: 0.63em;
  padding-bottom: 0.63em;
  background-position: left bottom 0.5em;}
.lnk_btn{
	display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 1em 1.5em;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    background-color: var(--color-red);
    border: 1px solid var(--color-red);
	margin-bottom: 0.5em;
    color: var(--color-white);
    transition-duration: 0.3s;}
.lnk_btn:hover {
  background: var(--color-sub-bg);
  border: 1px solid var(--color-sub-bg);
  color: var(--color-red);
  opacity: 1;}
.lnk_btn:after{
    font-family: 'iconkonan';
    content: "\e900";
    font-size: 0.5em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 3em;
    border: 1px solid;
    border-radius: 50%;
    margin-left: 1em;
	transition: all 0.5s ease;}
.lnk_btn:hover:after{
  color: var(--color-red);}
.lnk_btn.lnk_anchor:after{
	transform: rotate(90deg);}
.lnk_btn.lnk_new:after{
	content:  "\e904";
	font-size: 1em;
	border: none;
	width: unset;
    height: unset;
    margin-left: 0.5em;}
.lnk_tel{
	min-width: 288px;
    border-radius: 5em;}
.lnk_btn.lnk_tel:after{
	content:  "\e903";
	font-size: 1.25em;
	border: none;
	width: unset;
    height: unset;
    margin-left: 0.5em;}
.lnk_btn.no_hover:hover {
  background: var(--color-red);
  color: var(--color-white);}
.lnk_btn.no_hover:hover:after{
  color: var(--color-white);}
/*複数共通*/
#sec_intro .sec_img .flex_space .zoom_wrap:first-of-type{
	width: 56.25%;}
#sec_intro .sec_img .flex_space .zoom_wrap:last-of-type{
	width: 39.6%;}
.sec_application_subttl{
	background: var(--color-lightyellow);
	border-top: 8px solid var(--color-red);
	padding: 1.5em;}
.sec_application_blkttl {
    /*width: 280px;*/
	width: calc(230px + 11%);
	padding-top: 1.5em;
    padding-bottom: 1.5em;
    padding-right: 3em;
	padding-left: 11%;
    border-radius: 0 4em 4em 0;
    background: var(--color-lightyellow);
	margin-bottom: 1em;
	white-space: nowrap;}
.blk_apprication{
	border-top: 2px solid var(--color-red);
	padding-top: 1.5em;
	padding-bottom: 1.5em;}
.blk_apprication ol li{
	margin-bottom: 1em;}
.blk_apprication .accordion_txt{
	max-height: 3em;}
.blk_apprication .accordion_txt hr:first-of-type{
	border-bottom: 1px solid var(--color-sub-bg);
	height: 5px;}
.blk_apprication .accordion_txt h6{
	margin-bottom: 0.5em;
	font-weight: bold;}
.blk_overview{
	margin: 0.5em 0;
	border-top: 1px solid var(--color-sub-bg);
	padding: 1.5em 0 1em;}
.blk_overview h3{
	margin-bottom: 0.5em;}
/*.blk_activity_wrap {
	counter-reset: activity-num;}
.blk_activity_wrap .blk_activity { 
	counter-increment: activity-num;
	position: relative;}
.blk_activity_wrap .blk_activity h3::before {
	content: counter(activity-num) ". ";
	font-weight: bold;
	margin-right: 0.25em; }*/
.blk_activity{
	background: var(--color-white);
	border-radius: 10px;
	padding: 1em;
	margin-bottom: 0.5em;}
/* ▼　フッター　▼ */
footer{
  border-top: 1px solid var(--color-red);}
#footer_title{
  padding: 2em 0 1.5em;}
#footer_title img:first-child{
  width: 57.5%;}
#footer_title img:last-child{
  margin-top: 0.75em;
  width: 28.1%;}
footer .flex_space{
  padding: 1.5em 0 1.5em;}
footer .flex_space .blk_left{
  width: 26.5%;}
footer .flex_space .blk_right{
  width: 65%;}
#pagetop {
  width: 40px;
  height: 40px;
  background: var(--color-sub-bg);
  border-radius: 50%;
  position: fixed;
  bottom: 30px;
  /*right: calc(50vw - (var(--sp-wrapper-width) / 2));*/
  left: calc(var(--outer-left-width) + (100vw - var(--outer-left-width) - var(--sp-wrapper-width)) / 2 + var(--sp-wrapper-width) - 60px);
  cursor: pointer;}
#pagetop:before {
  position: absolute;
  content: '';
  width: 32%;
  height: 32%;
  border-top: 3.5px solid #fff;
  border-right: 3.5px solid #fff;
  border-radius: 3px;
  transform: rotate(315deg);
  transform-origin: center center;
  top: 40%;
  left: 30%;}
/*===============================================
●smart.css  画面の横幅が768pxから
===============================================*/
@media screen and (min-width: 768px) {
  .pconly {
    display: block; }
  .sponly {
    display: none !important; }
}
/*===============================================
●smart.css  画面の横幅が767pxまで
===============================================*/
@media screen and (max-width: 767px) {
	:root {
		--sp-wrapper-width: clamp(380px, 80vw ,750px);
	}
	.pconly {
      display: none !important; }
	.sponly {
      display: block; }
    #outer{
      background-position: center bottom;}
	#container {
		position: relative;
		margin: 0 auto;
		left: 0; }
	#site_header {
		left: 50%;
		transform: translateX(-50%); }
	#pagetop {
		left: auto;
		right: calc((100vw - var(--sp-wrapper-width)) / 2); }	
}
@media screen and (max-width: 540px) {
	#outer{
	  display: none;}
	#container,
	#site_header{
		width: 100%;}
	#nav_slide:checked ~ #nav_slide_cnt{
		width: 101vw;}
	#pagetop{
		right: 20px;}
}