@charset "UTF-8";
/* CSS Document */

body.noScroll,html.noScroll { overflow: hidden;}
.content { width: calc( 100% - 40px ); margin-left: auto; margin-right: auto; max-width: 740px;}

.num { font-family: Arial,"Noto Sans JP", Helvetica, 'sans-serif';}

/* BASIC */
.cvBtn01 { }
.cvBtn02 { display: block; position: relative; width: calc( 100% - 8px ); border-radius: 5px; background: #f25b18; overflow: hidden; box-shadow: inset 0 0 10px 0 rgba(255,255,255,1) , 8px 8px 0 0 #d5173a; color: #fff; padding: 1em 0; text-align: center; font-feature-settings: "palt"; font-weight: 700;}
.cvBtn02:before { content: ''; display: block; width: 100%; height: 100%; top:-0.4em; transform: translateY(-50%); background: rgba(255,255,255,0.2); position: absolute; border-radius: 15px}
.cvBtn02:after { content: '▲'; display: inline-block; top:50%; right:1em; font-size: 16px; color: #fff; transform: translateY(-50%) rotate(90deg) scale(0.6) ; position: absolute;}
.cvBtn03 { display: block; position: relative; width: 100%; border-radius: 5px; background: linear-gradient(to bottom, #1A1717 , #3a3a3a); overflow: hidden; color: #fff; padding: 0.8em 0; text-align: center; font-weight: 500; font-feature-settings: "palt";}
.cvBtn04 { display: block; background: #d5173a; color: #fff; text-decoration: none; text-align: center; border-radius: 5px; box-shadow: 0 5px 0 0 #e38496; padding: 0.8em 0; position: relative; font-weight: 500;}
.cvBtn04:before { position: absolute; content: '▲'; right:1em; font-size: 16px; color: #fff; top:50%; transform: translateY(-50%) rotate(90deg) scale(0.6) ;}

/* HEADER */
#home { position: absolute; left: 0; top:0;}
#header { position: fixed; left: 0; top:0; width: 100%; background: rgba(255,255,255,1); z-index: 1000;}
#header .headerBox { padding: 0 50px 0 20px; }
#header .headerBox .logoBox { flex-basis: 106px; margin: 15px auto 0 0;}
#header .headerBox .cvBox { flex-basis: 200px; margin: 0 0 0 0; }
#header .headerBox .cvBox a { background: #d5173a; box-sizing: border-box; padding: 1em 0 0 1em; font-size: 16px; color: #fff; text-decoration: none; width: 100%; height: 50px; display: block; line-height: 1;}
#header .headerBox .cvBox a:before { content: '▲'; display: inline-block; transform: rotate(90deg) scale(0.6); margin: 0 10px 0 0;}
#header .headerBox .cvBox a:hover { background: #ccc;}
#header .menuBox { position: absolute; right: 0; top:0; width: 50px; z-index: 1002; }
#header .menuBox .menuBtn { outline: none; padding: 0; display: block; position: relative; border: none; background: #302d2c; width: 100%; height: 50px; cursor: pointer; transition: all 0.5s linear 0s;}
#header .menuBox .menuBtn span { position: absolute; width: 18px; height: 1px; background: #fff; transition: all 0.5s linear 0s}
#header .menuBox .menuBtn span:nth-of-type(1) { top:50%; left: 50%; transform: translateX(-50%) translateY(6px)}
#header .menuBox .menuBtn span:nth-of-type(2) { top:50%; left: 50%; transform: translateX(-50%) translateY(-50%) }
#header .menuBox .menuBtn span:nth-of-type(3) { top:50%; left: 50%; transform: translateX(-50%) translateY(-6px)}
#header .menuBox .menuBtn.active  { background: none;}
#header .menuBox .menuBtn.active span { position: absolute; width: 28px; height: 1px; background: #302d2c;}
#header .menuBox .menuBtn.active span:nth-of-type(1) { top:50%; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(405deg);}
#header .menuBox .menuBtn.active span:nth-of-type(2) { top:50%; left: 50%; transform: translateX(-50%) translateY(-50%); opacity: 0; }
#header .menuBox .menuBtn.active span:nth-of-type(3) { top:50%; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(-405deg); }
#menu { display: none; position: absolute; right: 0; top:0; width: 100%; max-width: 607px; background: #f2f2f2; z-index: 1001; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; padding: 90px 60px 0 60px; height: 100vh;  animation-name: fadeIn01; animation-duration: 1s; animation-fill-mode: forwards; }
#menu.active {display: block;}
#menu nav { margin: 0 0 120px 0;}
#menu nav ul { flex-basis: calc( ( 100% - 20px ) ; /2);}
#menu nav ul li { margin: 0 0 40px 0;}
#menu nav ul li a { font-size: 15px; font-weight: bold; color: #302d2c; text-decoration: none;}
#menu nav ul li a b { font-size: 20px;}
#menu .cvBox { margin: 0 0 20px 0; }
#menu .cvBox ul li { margin: 0 0 25px 0;}
#menu .cvBox ul li:last-of-type { margin: 0;}
#menu .cvBox a { font-size: 16px; }
#menu .telBox { width: 100%;  margin: 0 auto; font-size: 14px;}
.telBox .time { align-self: center; flex-basis: calc(50% - 10px );}
.telBox .time p { font-size: 100%; margin: 0 0 0 0; padding-right: 1rem; text-align: right; font-feature-settings: "palt";}
.telBox .time p .holiday { display: block; font-size: clamp(10px, 2.666vw, 14px); margin: 0.41em 0 0 0; line-height: 1.2; }
.telBox .tel { align-self: center; flex-basis: 50%;}
.telBox .tel a { display: inline-block; position: relative; background: url("../img/icon_tel.webp") left center /0.68em 0.86em no-repeat; font-size: 157%; font-family: Arial, Helvetica, "sans-serif"; text-align: right; text-decoration: none; color: #302d2c; box-sizing: border-box; padding: 0 0 0 1em; pointer-events: none; cursor: inherit;}

/* MAIN VISUAL */
#mainVisualWrapper { position: relative;}
#mainVisual { position: relative; width: 100%; max-width: 910px; margin: 0 auto;}
#mainVisual .bg {}
#mainVisual .textBox { position: absolute; left: 50px; bottom:0; background: rgb(67 73 74 / 30%); padding: 25px; box-sizing: border-box; width: 63.07%;}
#mainVisual .textBox h1 { margin: 0 0 25px 0; font-feature-settings: "palt"; font-weight: 700; font-size: 40px; line-height: 1.4; color: #fff;}
#mainVisual .textBox h1 .sub { font-size: 26px; display: block; margin: 0 0 10px 0;}
#mainVisual .textBox h1 .sub2 { font-size: 32px; }
#mainVisual .textBox h2 { color: #fff; font-size:19px; margin: 0 0 15px 0; }
#mainVisual .textBox figure { box-shadow: 0 0 20px 0 rgba(0,0,0,0.16);}
#mainVisual .imgBox { box-shadow: 20px 20px 0 0 rgba(48,45,44,0.8); flex-basis:28.54%;  }
#mainVisual .linkBox { flex-basis: 66%; align-self:flex-end; margin: 0 0 8px 0;}
#mainVisual .linkBox .bubbleBox { width: calc(100% - 15px); transform: translateX(15px); background: #fff; position: relative; display: block; margin: 0 0 20px 0; font-size: 14px; border-radius: 10px; padding: 15px 35px; box-sizing: border-box; font-weight: 500;}
#mainVisual .linkBox .bubbleBox:before {width: 0; height: 0; border-style: solid; border-width: 10px 14px 10px 0; border-color: transparent #ffffff transparent transparent; position: absolute; right:100%; top:50%; transform: translateY(-50%); display: block; content: '';}
#mainVisual .linkBox .bubbleBox b { font-size: 20px; color: #d5173a; font-weight: 500;}
#mainVisual .linkBox .bubbleBox .color { color: #d5173a; }
#mainVisual .linkBox .bubbleBox .sub { font-size: 12px; }
#mainVisual .linkBox a { font-size: 18px; }
#mainVisual .scrollBox { position: absolute; text-align: right; transform: rotate(90deg) translateY(-15px); transform-origin: left top;left: 30px; bottom:140px; color: #000; display: inline-block; padding: 0 120px 0 0; }
#mainVisual .scrollBox .bar { position: absolute; right:0; top:50%; transform: translateY(-50%); height: 2px; background: #000; width: 110px; animation: scroll 4s cubic-bezier(.19,1,.22,1) infinite;}
#mainVisual .bnrBox { position: absolute; right:50px; bottom:30px; max-width: calc( 36.93% - 130px ); text-align: right;}
#mainVisual .bnrBox a,
#mainVisual .bnrBox .bnr { max-width: 140px; display: inline-block;}
#mainVisual .bnrBox ul { margin: 0 0 10px 0;}
#mainVisual .bnrBox ul li { text-align: right;}
#mainVisual .bnrBox p.caption { font-size: 12px;  text-shadow: 0 0 1em #fff, 0 0 1em #fff, 0 0 1em #fff, 0 0 1em #fff, 0 0 1em #fff;}
#main {}

/*#mainVisual .textBox h1 { font-size: 4.5vw;}
#mainVisual .textBox h1 .sub { font-size: 2.85vw;}
#mainVisual .textBox h1 .sub2 { font-size: 3.5vw; }
#mainVisual .textBox h2 { font-size: 2vw;}
#mainVisual .linkBox .bubbleBox { font-size: 1.5vw;}
#mainVisual .linkBox .bubbleBox b { font-size: 2.2vw;}
#mainVisual .linkBox .bubbleBox .sub { font-size: 1.3vw;}
#mainVisual .linkBox a { font-size: 2vw; } */

/*  */
@keyframes fadeIn01 {
	0% { opacity: 0; }
	90% { opacity: 1; }
	100% {  opacity: 1; } 
}
@keyframes scroll {
	0% {  transform-origin: 0 50%;  transform: scaleX(0);}
	50% {  transform-origin: 0 50%;  transform: scaleX(100%);}
	51% {  transform-origin: 100% 50%;}
	100% {  transform-origin: 100% 50%;  transform: scaleX(0);	}
}


/* LOCAL NAVI */
#lNavi { background: #f2f2f2; padding: 50px 0 70px 0; }
#lNavi h3 { font-size: 20px; text-align: center; margin: 0 auto 40px auto; position: relative; font-weight: 500;}
#lNavi h3:before { position: absolute; left: 50%; top:50%; transform: translateY(-50%) translateX(-8em); display: block; content: ''; background: url("../img/line_lnavi_01.webp") center center / 100% 100% no-repeat; width: 1.9em ; height: 1.4em;}
#lNavi h3:after { position: absolute; right: 50%; top:50%; transform: translateY(-50%) translateX(8em); display: block; content: ''; background: url("../img/line_lnavi_02.webp") center center / 100% 100% no-repeat; width: 1.9em ; height: 1.4em;}
#lNavi ul { }
#lNavi ul li { flex-basis: calc( ( 100% - 30px ) / 4 ); margin: 0 0 15px 0; }
#lNavi ul li:last-of-type { flex-basis: calc( ( ( 100% - 30px ) / 4 ) * 2 + 10px ); margin: 0 0 0 calc( ( 100% - 30px ) / 4 + 10px ); }
#lNavi ul li a { display: block; background: #d5173a; color: #fff; text-decoration: none; font-size: 13px; text-align: center; border-radius: 5px; box-shadow: 0 5px 0 0 #e38496; line-height: 1.2; padding: 20px 0; position: relative;}
#lNavi ul li:last-of-type a { padding: 30px 0;}
#lNavi ul li a b { font-size: 20px;}
#lNavi ul li a .ls-01em { letter-spacing: -0.1em; }
#lNavi ul li a:before { position: absolute; content: ''; right:5px; width: 12px; height: 6px; top:50%; transform: translateY(-50%) rotate(180deg); background: url("../img/arrow_01.svg") center center / 100% 100% no-repeat;}

#misunderstand { position: relative; padding: 90px 0 60px 0;}
#misunderstand:before { width: 0; height: 0;border-style: solid;border-width: 21px 16px 0 16px;border-color: #00a1bb transparent transparent transparent; display: block; content: ''; position: absolute; left: 50%; top:0; transform: translateX(-50%) translateY(-50%); z-index: 2;}
#misunderstand h3 { text-align: center; font-size: 32px; line-height: 2.1875; font-weight: 700; margin: 0 0 30px 0;}
#misunderstand h3 b { font-size: 131.25%; position: relative; display: inline-block; font-weight: 700; line-height: 1.66;}
#misunderstand h3 b:before { content: ''; left: 50%; bottom:1.5em; color: #d5173a; position: absolute; line-height: 1; width: 0.19em; height: 0.19em; border-radius: 50%; background: #d5173a; transform: translateX(-50%);}
#misunderstand .consultBox { background: #fff0f0; border-radius: 10px; padding: 40px 90px 40px 90px; box-sizing: border-box; margin: 0 auto 40px auto; max-width: 650px;}
#misunderstand .consultBox h4 { font-size: 22px; font-weight: normal; padding: 0 0 20px 0; margin: 0 auto 50px auto; background: url("../img/dot_01.webp") center bottom / auto 3px no-repeat; text-align: center; }
#misunderstand .misunderstandText { font-size: 38px; font-weight: 700; text-align: center;}
#misunderstand .misunderstandText span { display: inline-block; position: relative; }
#misunderstand .misunderstandText span:before { display: block; content: ''; width: 100%; height: 10px; background: #d5173a; left: 0; bottom: 0; position: absolute;}

#merit { background: #e9e8e8; padding: 60px 0 160px 0; position: relative;}
#merit:before { width: 0; height: 0;border-style: solid;border-width: 21px 16px 0 16px;border-color: #FFF transparent transparent transparent; display: block; content: ''; position: absolute; left: 50%; top:0; transform: translateX(-50%); z-index: 2;}
#merit h3 { border-top: #302d2c solid 4px; border-bottom: #302d2c solid 4px; margin: 0 0 50px 0; padding: 25px 0; text-align: center; font-size: 38px; font-weight: 700; line-height: 1.2;}
#merit h3 span { color: #00a1bb; font-size: 22px; margin: 0 0 10px 0; display: block; line-height: 1.2;}
#merit .meritList { margin: 0 0 40px 0; }
#merit .meritList ul { width: 100%; max-width: 380px; margin: 0 auto 0 auto;}
#merit .meritList ul li { display: block; position: relative; font-size: 22px; box-sizing: border-box; padding: 0 0 0 1.3em; margin: 0 0 20px 0; font-weight: 500;}
#merit .meritList ul li:before { content: ''; display: block; width: 0.8em; height: 1em; top:0.2em; left: 0; position: absolute;background: url(../img/arrow_02.svg) center bottom / 100% auto no-repeat;  }
#merit .meritBox { background: #fff; padding: 70px; border-radius: 10px; margin: 0 0 40px 0; }
#merit .meritBox h4 { font-size: 30px; text-align: center; margin: 0 0 40px 0; font-weight: 500;}
#merit .meritBox h4:before { content: ''; width: 0.8em; height: 1em; display: inline-block; background: url(../img/arrow_02.svg) center bottom / 100% auto no-repeat; margin: 0 0.2em 0 0;}
#merit .meritBox figure { margin: 0 0 20px 0; position: relative;}
#merit .meritBox p { font-size: 16px; line-height: 2; margin: 0 0 20px 0; }
#merit .meritBox p:last-of-type { margin: 0;}
#merit .meritBox p .sub { font-size: 12px; }
#merit .meritBox p.caption { font-size: 14px; line-height: 24px; }
#merit .meritBox p b,
#merit .meritBox p.caption b { color: #d5173a; font-weight: 500;}
#merit #merit2 figure { margin: 0 0 40px 0;}
#merit #merit2 figure span { position: absolute; left:-1.01%; bottom:-10%; width: 28.13%;}
#merit #riskAnchor { position: absolute;left: 0; bottom:130px; display: block; opacity: 0; }

#risk { position: relative; padding: 240px 0 50px 0;}
#risk .bubble { position: absolute; width: calc( 100% - 40px ) ; max-width: 402px; transform: translateX(-50%) translateY(-36.62%); left: 50%; top:0;}
#risk h3 { text-align: center; font-size: 36px; font-weight: 700; padding: 0 0 20px 0; margin: 0 0 10px 0;background: url("../img/dot_02.webp") center bottom / auto 3px no-repeat;}
#risk h3 span { color: #00a1bb; font-weight: 700;}
#risk .riskText { font-size: 22px; text-align: center; margin: 0 0 40px 0; font-weight: 500;}
#risk .riskImage { width: 100%; max-width: 500px; margin: 0 auto 10px auto; background: url("../img/img_risk_03.webp") center bottom / 8px auto no-repeat; padding: 0 0 48px 0;}
#risk h4 { width: 100%; max-width: 457px; margin: 0 auto 45px auto;}
#risk .reasonList { width: 100%; max-width: 590px; margin: 0 auto 0 auto;}
#risk .reasonList ul {}
#risk .reasonList ul li { display: block; box-sizing: border-box; margin: 0 0 20px 0; padding:10px 20px; text-align: center; font-size: 21px; border:#d5173a solid 4px; border-radius: 10px; font-weight: 500;}
#risk .reasonList ul li:last-of-type { margin: 0;}
#risk .reasonList ul li b { font-size: 32px; color:#d5173a; font-weight: 700; }
#risk .reasonList ul li b.num { font-weight: 700;}
#risk .reasonList ul li .rel { display: inline-block; position: relative;}
#risk .reasonList ul li .rel .sub { position: absolute; bottom:1.2em; right: -0.2em; font-weight: normal; font-size: 18px;}
#risk .reasonList p.caption { font-size: 14px; text-align: right; margin: 5px 0 0 0;}


#reason { overflow: hidden;}
#reason .bg { background: #d1cdcb; min-height: 300px; border-bottom-right-radius: 2000px 600px; border-bottom-left-radius: 2000px 600px;border-top-right-radius: 2000px 600px; border-top-left-radius: 2000px 600px; margin-left: -200px; margin-right: -200px;padding:75px 200px;}
#reason h3 { font-size: 35px; text-align: center;font-weight: 700;}
#reason h3 span { font-size: 26px; display: block; font-weight: 700;}
#reason h3 b { font-size: 55px; font-weight: 700; display: block;}
#gooddesign { margin:  0 auto 40px auto;}
#gooddesign h4 { color: #00a1bb; font-size: 30px; text-align: center; font-size: 30px; font-weight: 500; padding: 0 0 10px 0; margin: 0 auto 40px auto; max-width: 460px;  background: url("../img/dot_03.webp") center bottom / auto 4px no-repeat;}
#gooddesign h5 { padding: 90px 0 0 0; background: url("../img/line_reason_01.webp") center top / auto 65px no-repeat; font-size: 26px; text-align: center; margin: 40px 0 20px 0; font-weight: 700; }
#gooddesign h5 b { color: #d5173a; font-weight: 700; font-size: 42px;}
#gooddesign .bnrBox { width: 100%; max-width: 315px; margin: 0 auto 0 auto;}
#awards { position: relative; padding: 50px 0 0 0; margin: 0 auto 70px auto;}
#awards .estate01, #awards .estate02, #awards .estate03 { position: relative; z-index: 3; flex-basis: 47.3%;}
#awards .estate02 { margin-top: 22px;}
#awards .estate03 { margin: 37px auto 0;}
#awards h5 { background: #1a1717; color: #fff; font-size: 22px; text-align: center; padding: 0.5em 0; width: 100%; max-width: 252px; position: absolute; font-weight: 500;}
#awards h5:after { content: ''; display: block;position: absolute; top:calc( 100% + 10px ); height: 7px; width: calc( 100% - 35px ) ; background: #1a1717; line-height: 1;}
#awards .estate01 h5 { left: 0; top:0; transform: translateY(-50%);}
#awards .estate01 h5:after { left: 0;}
#awards .estate02 h5 { right: 0; top:0; transform: translateY(-50%);}
#awards .estate02 h5:after { right: 0;}
#awards .estate03 h5 { left: 0; top:0; transform: translateY(-50%);}
#awards .estate03 h5:after { left: 0;}
#awards:before { position: absolute; content: ''; display: block; width: 392px; height: 20%; max-width: calc(60% - 40px ); box-sizing: border-box; z-index: 2; border: #fff solid 7px; right:40px; top:0; }
#awards:after {position: absolute; content: ''; display: block; width: 537px; height: 35.74%; max-width: calc(80% - 40px ); box-sizing: border-box; z-index: 2; border: #fff solid 7px; left: 40px; bottom: 179px;}
#voice { width: 100%; max-width:540px; margin: 0 auto 0 auto;}
#voice h4 { color: #302d2c; font-size: 26px; text-align: center; font-weight: 500; padding: 0 0 10px 0; margin: 0 0 40px 0;background: url("../img/dot_04.webp") center bottom / auto 4px no-repeat;}
#voice .voiceBox { flex-basis: calc( ( 100% - 30px ) / 2 );}
#voice .voiceBox figure { width: 100%; max-width: 120px; margin: 0 auto 10px auto;}
#voice .voiceBox h5 { text-align: center; font-size: 18px; margin: 0 0 10px 0; font-weight: 300;}
#voice .voiceBox p { display: block; background: #fff; position: relative; padding: 30px 40px; border-radius: 30px; font-size: 17px;}
#voice .voiceBox p:before { content: ''; display: block; position: absolute; left: 30px; bottom:calc( 100% - 1px ); width:26px; height: 22px; background: url(../img/arrow_03.webp) center center / 100% 100% no-repeat; }

/* OWNER */
#owner { padding: 50px 0 70px 0; background: #f2f2f2;}
#owner h3 { font-size: 26px; font-weight: 700; padding: 0 0 20px 0; margin: 0 auto 50px auto; background: url("../img/dot_01.webp") center bottom / auto 3px no-repeat; text-align: center; max-width: 390px; }
#owner .ownerBox { flex-basis: calc( ( 100% - 20px ) / 2 ); box-sizing: border-box; padding: 25px; border: #afadab solid 1px; background: #fff; border-radius: 5px;}
#owner .ownerBox h4 { font-size: 18px; line-height: 23px; font-weight:700; margin: 0 0 10px 0; padding: 0 0 25px 0; background: url("../img/line_owner_01.webp") center bottom / 100% auto no-repeat;}
#owner .ownerBox h4 b { color: #d5173a;}
#owner .ownerBox h4 .adjust { transform: translateY(12px); display: block;}
#owner .ownerBox .photoBox { flex-basis: 43.33%; }
#owner .ownerBox .textBox { flex-basis: 50%; align-self: center;}
#owner .ownerBox .textBox p { font-size: 15px; }
#owner .ownerBox .textBox p b { font-size: 16px; font-weight: normal; display: block;}
#owner .ownerBox .tableBox { margin: 15px 0 0 0;}
#owner .ownerBox .tableBox figure figcaption { font-size: 12px; text-align: right; display: block; padding: 5px 0 0 0; line-height: 1.5;}

#cta01 { padding: 60px 0 60px 0;}
#cta01  h3 { text-align: center; font-size: 26px; font-weight: 700; margin: 0 auto 40px auto;}
#cta01 h3 b { font-size: 32px; font-weight: 700; color: #d5173a;}
#cta01 h3 .sub { font-size: 22px; font-weight: 700; display: block;}
#cta01 figure { width: 100%; max-width: 370px; margin: 0 auto 20px auto;;}
#cta01 figure img { box-shadow: 0 0 20px 0 rgba(0,0,0,0.16);}
#cta01 figure figcaption { font-size: 14px; text-align: right; display: block; padding: 10px 0 0 0;}
#cta01 h4 { text-align: center; font-size: 26px; margin: 0 0 20px 0; position: relative; font-feature-settings: "palt";}
#cta01 h4:before { content: ''; display: block; width: 26px; height: 3px; background: #4a4746; position: absolute; left: 50%; transform: translateX(-5em) translateY(-50%) rotate(40deg); top:50%;}
#cta01 h4:after { content: ''; display: block; width: 26px; height: 3px; background: #4a4746; position: absolute; right: 50%; transform: translateX(5em) translateY(-50%) rotate(-40deg); top:50%;}
#cta01 .linkBox { width: 100%; max-width: 470px; margin: 0 auto;}
#cta01 .linkBox a { font-size: 24px;}

#cta02 { padding: 60px 0 100px 0;}
#cta02 h3 { text-align: center; font-size: 26px; font-weight: 700; margin: 0 auto 40px auto;}
#cta02 h3 b { font-size: 32px; font-weight: 700; color: #d5173a;}
#cta02 h3 .sub { font-size: 26px; font-weight: 700; display: block;}
#cta02 figure { width: 100%; max-width: 370px; margin: 0 auto 20px auto;;}
#cta02 figure img { box-shadow: 0 0 20px 0 rgba(0,0,0,0.16);}
#cta02 figure figcaption { font-size: 14px; text-align: right; display: block; padding: 10px 0 0 0;}
#cta02 h4 { text-align: center; font-size: 26px; margin: 0 0 10px 0; position: relative; font-feature-settings: "palt";}
#cta02 h4:before { content: ''; display: block; width: 26px; height: 3px; background: #4a4746; position: absolute; left: 50%; transform: translateX(-8em) translateY(-50%) rotate(40deg); top:50%;}
#cta02 h4:after { content: ''; display: block; width: 26px; height: 3px; background: #4a4746; position: absolute; right: 50%; transform: translateX(8em) translateY(-50%) rotate(-40deg); top:50%;}
#cta02 h4 .sub { font-size: 14px; transform: translateY(-10px); display: inline-block;}
#cta02 .linkBox { width: 100%; max-width: 470px; margin: 0 auto;}
#cta02 .linkBox a { font-size: 24px;}
#cta02 .linkBox p.caption {text-align: center; font-size: 14px; margin: 0 auto 20px auto;}
#cta02 .telBox { width: 100%; max-width: 470px; margin:60px auto 0 auto; }
#cta02 .telBox .telNote .telBox { margin: 0 auto 0 auto; font-size: 17px;}
#cta02 .telBox .telNote .telBox a { margin: 0 auto; font-size: 188%;}
#cta02 .telBox a { font-size: 24px; margin: 0 auto 30px auto;}
#cta02 .telBox h5 {text-align: center; font-size: 26px; margin: 0 auto 20px auto;}

/* FAQ */
#faq { padding: 50px 0 0 0;}
#faq h3 { font-size: 26px; font-weight: 700; padding: 0 0 20px 0; margin: 0 0 50px 0; background: url("../img/dot_01.webp") center bottom / auto 3px no-repeat; text-align: center;}
.faqBox	{ border-radius: 5px; overflow: hidden; position: relative; margin: 0 0 20px 0;}
.faqBox:before { content: ''; display: block; width: 100%; height: 100%; border-radius: 5px; border: #9e9b99 solid 1px; position: absolute; left: 0; top:0; box-sizing: border-box;}
.faqBox .question { background: #d5173a; color: #fff; font-size: 16px; line-height: 1.375; padding: 1.375em 40px 1.375em calc(40px + 2em); box-sizing: border-box; position: relative; cursor: pointer;}
.faqBox .question:before { content: 'Q.'; display: inline-block; left: 40px; top:50%; transform: translateY(-50%); position: absolute;}
.faqBox .answer { display: none; padding: 40px; box-sizing: border-box; font-size: 16px; line-height: 2;animation-name: fadeIn01; animation-duration: 1s;   animation-fill-mode: forwards;}
.faqBox .answer.active { display: block; }
.faqBox .answer b {border-bottom:#d82647 solid 4px; font-weight: 700;}
.faqBox .questionBtn { position: absolute; z-index: 2; right:40px; top:50%; transform: translateY(-50%); width: 1em; height: 1em; background: none; border: none; outline: none; padding: 0; cursor: pointer;}
.faqBox .questionBtn:before { position: absolute; width: 100%; height: 2px; left: 0; top:50%; transform: translateY(-50%) rotate(90deg); content: ''; display: block; background: #fff; transition: transform 0.5s linear 0s;}
.faqBox .questionBtn:after { position: absolute; width: 100%; height: 2px; left: 0; top:50%; transform: translateY(-50%); content: ''; display: block; background: #fff;}
.faqBox .questionBtn.active:before { transform: translateY(-50%);}
.faqBox .caption { display: block; font-size: 14px; margin: 3em 0 0 0;}

#pageTop { position: sticky; bottom:0; right: 20px; float: right; width: 50px; height: 50px; z-index: 3; transform: translateY(-25px);}
#pageTop a { display: block; width:100%; height: 100%; background: #302d2c url("../img/arrow_01.svg") center center / 16px auto no-repeat; border-radius: 50%;}

/* FOOTER */
#footer { background: #e9e8e8; padding: 40px 0 40px 0;}
#footer .content { max-width: 810px;}
#footer .logoBox { align-self: center; flex-basis: 340px;}
#footer .logoBox h3 { margin: 0 0 30px 0;}
#footer .logoBox p { font-size: 12px;}
#footer .outlineBox { align-self: center; flex-basis: 360px;}
#footer .outlineBox .companyName { font-size: 16px; font-weight: 700; margin: 0 0 20px 0;}
#footer .outlineBox dl { margin: 0 0 20px 0; }
#footer .outlineBox dl dt { font-size: 13px; line-height: 18px;}
#footer .outlineBox dl dd { font-size: 13px; line-height: 18px; }
#footer .outlineBox .companyLicense { font-size: 13px; line-height: 18px;}

@media screen and (min-width:911px) {
	#mainVisualWrapper:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top:0; background: url("../img/img_main_01_pc.webp") center center / cover no-repeat; filter: blur(10px)}
}
@media screen and  (max-width:910px) {
	#mainVisual .textBox h1 { font-size: 4.5vw;}
#mainVisual .textBox h1 .sub { font-size: 2.85vw;}
#mainVisual .textBox h1 .sub2 { font-size: 3.5vw; }
#mainVisual .textBox h2 { font-size: 2vw;}
#mainVisual .linkBox .bubbleBox { font-size: 1.5vw;}
#mainVisual .linkBox .bubbleBox b { font-size: 2.2vw;}
#mainVisual .linkBox .bubbleBox .sub { font-size: 1.3vw;}
#mainVisual .linkBox a { font-size: 2vw; } 
	
}
@media screen and  (max-width:767px) {
	.content { width: 89.33%; }
	#header .headerBox { padding: 0 0 0 10px;}
	#header .headerBox .logoBox { max-width: calc( 100% - 220px );}
	#header .headerBox .cvBox { width: 160px; }
	#header .headerBox .cvBox a { font-feature-settings: "palt"; padding: 1em 0 0 0.5em;}
	#header .headerBox .cvBox a:before { margin: 0 5px 0 0;}
	#menu { padding: calc( 50px + 8vw ) 0 120px 0;}
	#menu:before {content: ''; display: block; width: 106px; height: 23px; position: absolute; left: 20px; top:15px; background: url("../img/logo_01.svg") center center / 100% 100% no-repeat;}
	#menu .telBox { font-size: 3.73w;}
	#menu .telBox .tel a { display: block;}
	#menu nav { margin: 0 auto 2vw auto; width: 78.66%;}
	#menu nav ul { flex-basis:100%;}
	#menu nav ul li { margin: 0 0 8vw 0;}
	#menu nav ul li a { font-size: 4vw; }
	#menu nav ul li a b { font-size: 5.33vw;}
	#menu .cvBox { margin: 0 auto 20px auto; width: 78.66%; max-width: none; }
	#menu .cvBox a { font-size: 4.26vw; }
	#menu .telBox { font-size: 3.3vw; }
	#menu .telBox .tel a { font-size: 191%; pointer-events: auto; cursor: pointer; white-space: nowrap; text-align: left;}

	#mainVisual .textBox { left: 0; top:calc(50px + 8vw ); background: none; padding: 0;  width: 100%; }
	#mainVisual .textBox h1 { font-size: 7.4vw;  background: rgb(67 73 74 / 50%); margin: 0; padding: 5.3% 2.6% 2.6% 2.6%; box-sizing: border-box;}
	#mainVisual .textBox h1 .sub { font-size: 4.8vw; }
	#mainVisual .textBox h1 .sub2 { font-size: 6.13vw; }
	#mainVisual .textBox h2 { color: #fff; font-size: 4vw; margin: 0 0 4% 0; background: rgb(67 73 74 / 50%); padding: 0 2.6% 5.3% 2.6%; box-sizing: border-box; }
	#mainVisual .textBox .flexBox { padding: 0 5.3% 0 8.6%;}
	#mainVisual .textBox figure { }
	#mainVisual .imgBox { box-shadow: 20px 20px 0 0 rgba(48,45,44,0.8); flex-basis:34.84%; margin: 0 0 40px 0;  }
	#mainVisual .linkBox { flex-basis: calc(65.16% - 30px); align-self:center; margin: 0 0 0 0;}
	#mainVisual .linkBox .bubbleBox { width: calc(100% - 15px ); transform: translateX(15px); background: #fff; position: relative; display: block; margin: 0 0 0 0; font-size: 3.46vw; border-radius: 10px; padding: 15px 4.7%; box-sizing: border-box; font-feature-settings: "palt";} 
	#mainVisual .linkBox .bubbleBox:before {width: 0; height: 0; border-style: solid; border-width: 10px 14px 10px 0; border-color: transparent #ffffff transparent transparent; position: absolute; right:100%; top:50%; transform: translateY(-50%); display: block; content: '';}
	#mainVisual .linkBox .bubbleBox b { font-size: 4.8vw; color: #d5173a; font-weight: normal;}
	#mainVisual .linkBox .bubbleBox .sub { font-size: 2.66vw;}
	#mainVisual .scrollBox { position: absolute; text-align: right; transform: rotate(90deg) translateY(-15px); transform-origin: left top;left: 3.5%; bottom:77vw; color: #000; display: inline-block; padding: 0 120px 0 0; }
	#mainVisual .scrollBox .bar { position: absolute; right:0; top:50%; transform: translateY(-50%); height: 2px; background: #000; width: 110px; animation: scroll 4s cubic-bezier(.19,1,.22,1) infinite;}
	#mainVisual .bnrBox { position: absolute; width: 89%; display: flex; flex-wrap: wrap; justify-content: space-between; max-width: none; right: 50%; transform: translateX(50%); bottom: 14.66vw;}
	#mainVisual .bnrBox a,
	#mainVisual .bnrBox .bnr { max-width: 140px; display: inline-block;}
	#mainVisual .bnrBox ul { margin: 0 0 0 0; flex-basis: 34.49%; order: 2;}
	#mainVisual .bnrBox ul li { text-align: left;}
	#mainVisual .bnrBox p.caption { font-size: 2.93vw; flex-basis: calc( 65.51% - 20px ); order: 1; text-align: left; line-height: 1.54;}
	#mainVisual .textBox a.spOnly { font-size: 4.53vw; max-width: 88%; margin: 0 auto 0 auto;}

	/*  */
	#lNavi h3 { font-size: 5.3vw;}
	#lNavi ul li { flex-basis: calc( ( 100% - 10px ) / 2 ); margin: 0 0 20px 0; }
	#lNavi ul li:last-of-type { flex-basis: 100%; margin: 0 0 0 0; }
	#lNavi ul li a { font-size: 3.4vw;}
	#lNavi ul li a b { font-size: 4.8vw;}

	#misunderstand h3 { font-size: 6.13vw;}
	#misunderstand .consultBox { padding:7.5% 2.2%;}
	#misunderstand .consultBox h4 { font-size: 4.8vw; max-width: 90%; margin: 0 auto 25px auto;}
	#misunderstand .misunderstandText { font-size: 6.66vw;}

	#merit  { padding: 80px 0 26.66% 0 ;}
	#merit h3 { font-size: 6.66vw; padding: 1em 0; }
	#merit h3 span { font-size:	4.26vw;}
	#merit .meritList ul { margin: 0 auto 0 auto; width: 89%; }
	#merit .meritList ul li { font-size: 4.26vw;}
	#merit .meritBox { padding:10% 6%;	}
	#merit .meritBox:last-of-type { margin: 0 auto 0 auto;}
	#merit .meritBox h4 { font-size: 4.6vw; margin: 0 auto 6% auto;}
	#merit #merit2 figure span { position: absolute; left:-1.01%; bottom:-5%; width: 41.01%;}

	#risk .bubble { max-width: none; width: 72.8%;}
	#risk h3 { font-size: 6.13vw; max-width: 9.5em; margin: 0 auto 20px auto;}
	#risk .riskText { font-size: 4.8vw; }
	#risk .riskImage { max-width: none; width: 90%;}
	#risk h4 { max-width: none; width: 91%;}
	#risk .reasonList ul li { font-size: 4vw; padding: 0.5em 0; line-height: 1.2;}
	#risk .reasonList ul li b { font-size: 6.1vw; }
	#risk .reasonList ul li .rel .sub { font-size: 3.2vw;}

	#reason .bg { border-bottom-right-radius: 2000px 1500px; border-bottom-left-radius: 2000px 1500px;border-top-right-radius: 2000px 1500px;border-top-left-radius: 2000px 1500px; padding-bottom:80px; }
	#reason h3 { font-size: 6.13vw; margin: 0 auto 1em auto}
	#reason h3 span { font-size: 4.8vw; }
	#reason h3 b { font-size: 9.86vw; }
	#gooddesign h4 { font-size: 5.86vw;}
	#gooddesign h5 { font-size: 4.8vw;}
	#gooddesign h5 b { font-size: 8vw;}
	#gooddesign .bnrBox { max-width: none; width: 68%;}
	#awards { margin: 0 auto 10vw auto;}
	#awards .estate01 { flex-basis: 89vw; transform: translateX(-5.33vw); margin: 0 0 9.33vw 0;}
	#awards .estate02 { flex-basis: 89vw; margin: 0 0 0 auto; transform:translateX(5.33vw) ;}
	#awards .estate03 { flex-basis: 89vw; transform: translateX(-5.33vw); margin: 9.33vw 0 0 0;}
	#awards:before { width: 11.2vw; height: 100vw; right: 0; transform: translateX(2.67vw) translateY(-4.8vw);}
	#awards:after { width: 34.6vw; height: 100vw; left: 0; bottom:42.6vw;}
	#awards h5  { font-size: 4.26vw; max-width: none; width: 48vw;}

	#voice h4 { font-size: 4.8vw;}
	#voice .voiceBox { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 20px 0;}
	#voice .voiceBox .photoBox { flex-basis: 30%;}
	#voice .voiceBox .textBox { flex-basis: 66%;}
	#voice .voiceBox:last-of-type { margin: 0 auto 0 auto;}
	#voice .voiceBox p { font-size: 3.73vw; padding: 6.78% 10% ; box-sizing: border-box; width: 100%;}
	#voice .voiceBox p:before { left: 0; bottom:0; top:auto; transform: translateY(20px) translateX(100%) rotate(180deg);}
	#voice .voiceBox h5 { font-size: 3.73vw;}

	#owner { padding: 10vw 0;}
	#owner h3 { font-size: 4.8vw; max-width: 14.5em;}
	#owner .ownerBox { flex-basis: 100%; padding: 10% 6.7%; margin: 0 0 40px 0;}
	#owner .ownerBox:last-of-type { margin: 0;}
	#owner .ownerBox h4 { font-size: 4.8vw; font-feature-settings: "palt"; line-height: 1.5; height: auto !important; min-height: inherit !important;}
	#owner .ownerBox h4 .adjust { transform: none;}
	#owner .ownerBox .textBox p { font-size: 4vw; }
	#owner .ownerBox .textBox p b { font-size: 4.26vw;}
	#owner .ownerBox .tableBox figure figcaption { font-size: 3.2vw;}

	#faq h3 { font-size: 4.8vw;}
	.faqBox .question { font-size: 3.73vw; padding: 1em 4.5% 1em calc(4.5% + 2em);}
	.faqBox .question:before { left: 4.5%;}
	.faqBox .answer { padding: 4.5%; font-size: 3.73vw;}
	.faqBox .questionBtn { right: 4.5%;}
	.faqBox .caption { font-size: 3.2vw;}

	#cta01  h3 {  font-size: 4.66vw;}
	#cta01 h3 b { font-size: 5.46vw;}
	#cta01 h3 .sub { font-size: 4.26vw;}
	#cta01 figure { max-width: none; width: 88%;}
	#cta01 figure figcaption { font-size:	3.2vw;}
	#cta01 h4 { font-size: 4.8vw; }
	#cta01 .linkBox a { font-size: 4.53vw;}

	#cta02 h3 { font-size: 4.86vw; }
	#cta02 h3 b { font-size: 5.86vw;}
	#cta02 h3 .sub { font-size: 4.86vw; }
	#cta02 h4 { font-size: 4.26vw;}
	#cta02 .linkBox p.caption { font-size: 3.2vw;}
	#cta02 figure { max-width: none; width: 88%;}
	#cta02 figure figcaption { font-size:	3.2vw;}
	#cta02 .linkBox a { font-size: 4.53vw;}
	#cta02 .telBox h5 { font-size: 4.8vw }
	#cta02 .telBox a { margin: 0 auto 1em auto; font-size: 4.26vw;}
	#cta02 .telBox .telNote .telBox { margin: 0 auto 0 auto; font-size: 3.2vw;}
	#cta02 .telBox .telNote .telBox a { margin: 0 auto;  pointer-events: auto; cursor: pointer;}

	#pageTop { width: 13.3vw; height: 13.3vw; transform: translateY(-50%);}

	#footer { padding: 10vw 0 50px 0;}
	#footer .logoBox { flex-basis: 100%; order: 2;}
	#footer .logoBox h3 { }
	#footer .logoBox p { text-align: center; font-size: 2.93vw; }
	#footer .outlineBox { flex-basis: 100%; order: 1; margin: 0 0 90px 0;}
	#footer .outlineBox .companyName { font-size: 3.73vw;}
	#footer .outlineBox dl dt { font-size: 3.1vw; line-height: 1.5;}
	#footer .outlineBox dl dd { font-size: 3.1vw; line-height: 1.5; }
	#footer .outlineBox .companyLicense {font-size: 3.1vw; line-height: 1.5;}
}