@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/*---------------------------
リセット
---------------------------*/
*,
*::before,
*::after {
box-sizing: border-box;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

html {
font-family: 'Noto Sans JP', sans-serif;
}

body {
line-height: 1;
color: #555;
font-size: 16px;
font-weight: 500;
}

html,
body {
overflow-x: hidden;
}

footer address {
font-style: normal;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}

nav ul {
list-style: none;
}

blockquote,
q {
quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}

a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
}

li {
list-style: none;
}

ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}

mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}

del {
text-decoration: line-through;
}

abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}

input,
select {
vertical-align: middle;
}

p {
line-height: 1.8;
margin-bottom: 20px;
font-weight: 600;
font-size: 18px;
}

img {
width: 100%;
max-width: 100%;
vertical-align: bottom;
}

.sp {
display: none;
}

/*---------------------------
PC
---------------------------*/
header {
height: 180px;
background: url(img/fv_bg.jpg) no-repeat center / cover;
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding-top: 35px;
z-index: 1;
overflow: hidden;
margin: 0 0 30px;
}

.header-text {
background: #f69493;
color: #fff;
line-height: 35px;
text-align: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
font-size: 16px;
}

.header-in {
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
color:#333;
}


.header-in img {
width: 400px;
}

section h2 {
border-bottom: 2px solid #e71a20;
}

section h2 span {
position: relative;
display: block;
width: fit-content;
margin: 0 auto;
padding: 50px 0;
font-size: 30px;
font-weight: 800;
}

section h2 span:before,
section h2 span:after {
content: '';
display: block;
width: 60px;
height: 80px;
background: url(img/h1_ashirai.png) no-repeat center / contain;
position: absolute;
opacity: 0.6;
transform: rotate(8deg);
}

section h2 span:before {
left: -80px;
top: 16px;
}
section h2 span:after {
right: -80px;
bottom: 16px;
}
section h3 {
font-weight: 700;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
section h3:before {
content: '';
width: 28px;
height: 28px;
display: inline-block;
background: url(img/h2_ashirai.svg) no-repeat center / contain;
}


.area-wrap{
text-align: center;
padding: 0px 10px 50px;
position: relative;
}
section .area-wrap h2 span{
position: relative;
display: block;
width: fit-content;
margin: 0 auto;
padding: 30px 0;
font-size: 30px;
font-weight: 800;
}
section .area-wrap h2 span:before,
section .area-wrap h2 span:after {
content: '';
display: block;
width: 50px;
height: 80px;
background: url(img/h1_ashirai.png) no-repeat center / contain;
position: absolute;
opacity: 0.6;
transform: rotate(8deg);
}
section .area-wrap h2 span:before {
left: -80px;
top: 5px;
}
section .area-wrap h2 span:after {
right: -80px;
bottom: 5px;
}
.area-txt-box{
padding:20px;
background: #fffbf5;
width:550px;
margin:20px auto 0;
border-radius:5px;
font-size:16px;
}

.flow-wrap,
.qa-wrap,
.end-btn-wrap {
text-align: center;
padding: 60px 10px;
position: relative;
}

.flow-wrap,
.end-btn-wrap {
background: #ffe3e3;
}

.area-wrap .text {
margin-top: 30px;
font-weight: 600;
font-size: 18px;
}

.area-img {
width: 430px;
display: block;
margin: 16px auto 6px;
}

.area-btn {
margin-bottom: 30px;
position: relative;
}

.area-btn:before {
content: '';
display: block;
width: 220px;
height: 340px;
position: absolute;
right: 50%;
top: -200px;
margin-right: -780px;
background: url(img/main_illust01.png) no-repeat center / contain;
}

.area-btn .top,
.area-btn .bottom {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 30px;
}

.area-btn a,
.btn-red,
.btn-orange {
width: 480px;
height: 110px;
background: #fff;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border:0px solid #e71a20;
color: #ffffff;
background: #e71a20;
gap: 8px;
font-size: 28px;
font-weight: 700;
box-shadow: 0 4px 3px rgba(0, 0, 0, 10%);
padding-left: 1px;
}

.area-btn a:before {
content: '';
display: block;
width: 44px;
height: 44px;
background: url(img/plug.png) no-repeat center / contain;
}

.area-btn a:after,
.btn-red:after,
.btn-orange:after {
display: block;
content: '';
width: 16px;
height: 16px;
border-top: solid 5px #FFF;
border-right: solid 5px #FFF;
transform: rotate(45deg);
margin-left: 3px;
}

.area-btn a .s,
.btn-red .s {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
text-align: center;
font-size: 15px;
}

.area-btn .bottom a:last-child .s {
font-size: 12px;
}

.area-btn .bottom a {
border-color: #0080cc;
color: #0080cc;
padding-bottom: 10px;
}

.area-btn .bottom a:before {
background: url(img/stop.png) no-repeat center / contain;
}

.area-btn .bottom a:after {
border-top-color: #0080cc;
border-right-color: #0080cc;
}

.area-btn .bottom a:last-child {
border-color: #23a84b;
color: #23a84b;
}

.area-btn .bottom a:last-child:before,
.btn-red:before {
background: url(img/tell_g.png) no-repeat center / contain;
width: 30px;
height: 30px;
transform: rotate(10deg);
}

.btn-red:before {
content: '';
display: block;
background: url(img/tell_r.png) no-repeat center / contain;
}

.area-btn .bottom a:last-child:after {
border-top-color: #23a84b;
border-right-color: #23a84b;
}

.btn-red,
.btn-orange {
width: 650px;
margin: 0 auto;
border: 0;
}

.btn-red {
padding-bottom: 8px;
}

.btn-red .s {
font-size: 18px;
}

.btn-orange {
color: #FFF;
font-size: 29px;
margin-top: 50px;
background: #ff9022;
border: 0px;
}

.btn-orange:before {
content: '';
display: block;
width: 34px;
height: 34px;
background: url(img/net.png) no-repeat center / contain;
}

.btn-orange:after {
border-top-color: #FFF;
border-right-color: #FFF;
margin-left: 10px;
}

.text-red {
color: #e71a20;
font-size: 24px;
font-weight: 800;
margin: 50px 0 0;
}

.flow-wrap:after {
content: '';
display: block;
width: 450px;
height: 170px;
position: absolute;
left: 50%;
bottom: 30px;
margin-left: -890px;
background: url(img/main_illust02.png) no-repeat center / contain;
}

.flow-wrap ol {
display: flex;
justify-content: center;
gap: 30px;
margin: 82px 0 52px;
}

.flow-wrap li {
background: #fff;
border-radius: 10px;
box-shadow: 0 0 0 5px #dd5252;
width: 310px;
height: 310px;
display: flex;
flex-direction: column;
padding: 8px 20px;
position: relative;
}

.flow-wrap .step {
position: absolute;
left: -7px;
top: -36px;
background: #fabe00;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 110px;
height: 100px;
font-size: 24px;
font-weight: 600;
}

.flow-wrap .step .num {
font-size: 42px;
}

.flow-wrap li .img,
.flow-wrap li .text {
height: 50%;
display: flex;
justify-content: center;
align-items: center;
}

.flow-wrap li .img {
border-bottom: 1px solid #dd5252;
}

.flow-wrap li .img img {
width: 54px;
}

.flow-wrap li .text {
color: #dd5252;
line-height: 1.6;
font-size: 24px;
font-weight: 600;
}

.flow-wrap li:nth-child(2) {
box-shadow: 0 0 0 5px #0080cc;
}

.flow-wrap li:nth-child(3) {
box-shadow: 0 0 0 5px #23a84b;
}

.flow-wrap li:nth-child(2) .img {
border-bottom-color: #0080cc;
}

.flow-wrap li:nth-child(3) .img {
border-bottom-color: #23a84b;
}

.flow-wrap li:nth-child(2) .img img {
width: 74px;
}

.flow-wrap li:nth-child(3) .img img {
width: 100px;
}

.flow-wrap li:nth-child(2) .text {
color: #0080cc;
}

.flow-wrap li:nth-child(3) .text {
color: #23a84b;
}

.flow-wrap li:after {
content: '';
display: block;
width: 56px;
height: 56px;
position: absolute;
right: -42px;
top: 0;
bottom: 0;
margin: auto;
background: url(img/sankaku_r.svg) no-repeat center / contain;
z-index: 2;
}

.flow-wrap li:nth-child(2):after {
background: url(img/sankaku_b.svg) no-repeat center / contain;
}

.flow-wrap li:nth-child(3):after {
display: none;
}

.qa-wrap:before {
content: '';
display: block;
width: 350px;
height: 390px;
position: absolute;
top: 640px;
right: 50%;
margin-right: -900px;
background: url(img/main_illust03.png) no-repeat center / contain;
}

.qa-acd {
max-width: 1000px;
width: 100%;
margin: 44px auto 0;
text-align: left;
}

.qa-acd .acd-wrap {
border-bottom: 2px solid #dd5253;
}

.qa-acd .acd-wrap:first-child {
border-top: 2px solid #dd5253;
}

.qa-acd .acd-head {
cursor: pointer;
position: relative;
padding: 10px 64px;
font-size: 18px;
line-height: 1.4;
height: 86px;
display: flex;
align-items: center;
margin: 0;
justify-content: flex-start;
min-height: max-content;
}

.qa-acd .acd-head:before,
.qa-acd .acd-cont:before {
content: 'Q';
position: absolute;
width: auto;
height: auto;
left: 30px;
top: 0;
bottom: 6px;
margin: auto;
background: none;
display: flex;
align-items: center;
font-size: 26px;
font-weight: 800;
}

.qa-acd .acd-cont:before {
content: 'A';
bottom: 2px;
left: 32px;
}

.qa-acd .pulamai {
position: absolute;
width: 16px;
height: 16px;
right: 30px;
top: 0;
bottom: 0;
margin: auto;
pointer-events: none;
}

.qa-acd .pulamai span {
position: relative;
display: block;
width: 100%;
height: 100%;
}

.qa-acd .pulamai:before,
.qa-acd .pulamai:after {
content: '';
display: block;
width: 100%;
height: 3px;
background: #dd5253;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}

.qa-acd .pulamai:after {
transform: rotate(90deg);
transition: 0.3s;
}

.qa-acd .acd-on .pulamai:after {
transform: rotate(0deg);
}

.qa-acd .acd-cont {
height: 0;
overflow: hidden;
transition: height 0.3s, padding 0.3s;
padding: 0 20px 0 64px;
position: relative;
color: #dd5253;
background: #fff5f5;
font-size: 18px;
font-weight: 700;
margin: 0;
display: flex;
align-items: center;
line-height: 1.4;
}

.qa-acd .acd-on .acd-cont {
height: 86px;
min-height: max-content;
padding-top: 10px;
padding-bottom: 10px;
}

.end-btn-wrap:before {
content: '';
display: block;
width: 310px;
height: 300px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -830px;
background: url(img/main_illust04.png) no-repeat center bottom / contain;
}

footer {
background: #525252;
padding: 90px 0;
}

footer ul {
display: flex;
justify-content: center;
gap: 100px;
}

footer ul a {
color: #fff;
font-size: 26px;
}

img[class*="header-bg"] {
position: absolute;
z-index: -1;
}

.header-bg1 {
left:-600px;
top:0;
bottom:-35px;
right:0;
margin:auto;
width: 100px;
}

.header-bg2 {
left:-850px;
top:0;
bottom:-35px;
right:0;
margin:auto;
width: 100px;
}

.header-bg3 {
left:850px;
top:0;
bottom:-35px;
right:0;
margin:auto;
width: 100px;
}

.header-bg4 {
left:600px;
top:0;
bottom:-35px;
right:0;
margin:auto;
width: 100px;
}

img[class*="bg-ashirai"] {
position: absolute;
opacity: 0.6;
transform: rotate(8deg);
}

.bg-ashirai1 {
left:65%;
top: 50px;
margin-left: -1100px;
width: 250px;
}

.bg-ashirai2 {
top: -100px;
right: 50%;
width: 500px;
margin-right: -1200px;
}

.bg-ashirai3 {
left: 50%;
top: -80px;
margin-left: -960px;
width: 210px;
}

.bg-ashirai4 {
top: -250px;
right: 50%;
width: 470px;
margin-right: -1160px;
}

.bg-ashirai5 {
top: -150px;
right: 50%;
width: 250px;
margin-right: -1000px;
}

.bg-ashirai6 {
left: 50%;
top: -200px;
margin-left: -1160px;
width: 470px;
}
.modal-btn{
cursor: pointer;
}
.modal{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
z-index: 100;
}
.modal-on{
display: flex;
}
.modal-close{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1;
}
.modal-cont{
width: 500px;
background: #ffe3e3;
padding: 40px 30px 50px;
border-radius: 20px;
position: relative;
z-index: 2;
}
.modal2 .modal-cont,.modal3 .modal-cont{
background: #fdfdfd;
}
.modal2 .modal-cont p,.modal3 .modal-cont p{
font-size:13px;
font-weight:normal;
}
.modal-cont:before{
content: '';
display: block;
width: 100px;
height: 100px;
background: url(img/attention.png) no-repeat center / contain;
margin: 0 auto 24px;
}
.modal-cont p,.modal-cont .text-red{
font-weight: 700;
text-align: center;
font-size: 18px;
line-height: 1.5;
}
.modal-cont p{
margin-bottom: 30px;
}
.tel-btn{
width: 100%;
background: #e71a20;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 100px;
color: #FFF;
gap: 6px;
font-weight: 600;
font-size: 14px;
position: relative;
}
.tel-btn .middle{
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
}
.tel-btn .middle:before{
content: '';
display: block;
background: url(img/tell_r.png) no-repeat center / contain;
width: 22px;
height: 22px;
transform: rotate(10deg);
margin-right: 4px;
}
.tel-btn:after{
display: block;
content: '';
width: 16px;
height: 16px;
border-top: solid 5px #FFF;
border-right: solid 5px #FFF;
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
right: 64px;
margin: auto;
}
.modal .btn-orange{
width: 100%;
height: 100px;
box-shadow: inset 0 0 0 3px #ff9022, 0 4px 3px rgba(0, 0, 0, 10%);
position: relative;
font-size: 20px;
padding-right: 40px;
margin-top: 30px;
}
.modal .btn-orange:before{
width: 24px;
height: 24px;
}
.modal .btn-orange:after{
position: absolute;
top: 0;
bottom: 0;
right: 64px;
margin: auto;
}

@media only screen and (orientation:landscape) and (min-width : 813px),
(orientation:portrait) and (min-width : 753px) {
a:hover,.modal-btn:hover,.area-wrap button:hover {
opacity: 0.6;
transition: 0.3s;
}
}

/*---------------------------
SP
---------------------------*/
@media only screen and (orientation:landscape) and (max-width : 813px),
(orientation:portrait) and (max-width : 753px) {
.sp {
display: block;
}

header {
padding-top: 35px;
background: url(img/fv_bg-sp.jpg) no-repeat center / cover;
height:35px;
margin: 0;
}

.header-text {
line-height: 35px;
font-size: 16px;
}

.header-in {
width: 90%;
height: 150px;
border-radius: 14px;
display: none;
}

.header-in img {
width: 270px;
}

.header-bg1 {
top: 52px;
width: 110px;
left: 50%;
margin-left: -120px;
display: none;
}

.header-bg2 {
top: 50px;
width: 120px;
right: 50%;
margin-right: -200px;
display: none;
}

.header-bg3 {
bottom: 10px;
width: 120px;
left: 50%;
margin-left: -188px;
display: none;
}

.header-bg4 {
bottom: 9px;
width: 117px;
right: 50%;
margin-right: -140px;
display: none;
}

section h2 span {
padding: 60px 0;
font-size: 26px;
}

section h2 span:before {
left: -55px;
top: 10px;
}

section h2 span:after {
right: -55px;
bottom: 10px;
}

.flow-wrap,
.qa-wrap,
.end-btn-wrap {
padding: 60px 10px;
}
.area-wrap{
padding: 0px 10px 50px;
}
section h3 {
font-size: 24px;
}

section h3:before {
width: 26px;
height: 26px;
}

.area-wrap .text {
margin-top: 36px;
font-size: 16px;
}

.area-img {
max-width: 94%;
display: none;
}

.area-wrap p {
font-size: 15px;
background: #fffbf5;
padding: 13px;
border-radius: 10px;
margin: 10px 0;
text-align: left;
width:100%;
}

.area-btn .top,
.area-btn .bottom {
display: grid;
margin-top: 20px;
gap: 0px;
}

.area-btn a,
.btn-red,
.btn-orange {
max-width: 100%;
height: 100px;
font-size: 24px;
border-width: 4px;
}

.area-btn a:before {
width: 38px;
height: 38px;
}

.area-btn .bottom a:last-child:before,
.btn-red:before {
width: 26px;
height: 26px;
}

.area-btn a:after,
.btn-red:after,
.btn-orange:after {
width: 14px;
height: 14px;
border-top-width: 4px;
border-right-width: 4px;
}

.area-btn .bottom a:last-child {
margin-top: 34px;
}

.area-btn a .s,
.btn-red .s {
font-size: 13px;
bottom: 12px;
}

/* .area-btn .bottom a:last-child .s {
font-size: 10px;
} */

.btn-red,
.btn-orange {
font-size: 22px;
}

.btn-orange {
margin-top: 30px;
font-size: 23px;
}

.btn-orange:before {
width: 30px;
height: 30px;
}

.btn-orange:after {
margin-left: 5px;
}

.area-wrap .text-red {
text-align: center;
font-size: 18px;
}

.flow-wrap ol {
display: block;
margin: 50px 0;
}

.flow-wrap li {
margin: 0 auto 36px;
height: 250px;
}

.flow-wrap .step {
left: -16px;
top: -20px;
}

.flow-wrap li:last-child {
margin-bottom: 0;
}

.flow-wrap li:after {
transform: rotate(90deg);
top: auto;
right: 0;
left: 0;
bottom: -47px;
}

.qa-acd {
width: auto;
}

.qa-acd .acd-head {
padding: 0 50px;
font-size: 16px;
}

.qa-acd .acd-head:before,
.qa-acd .acd-cont:before {
left: 16px;
font-size: 24px;
}

.qa-acd .pulamai {
right: 16px;
}

.qa-acd .acd-cont {
font-size: 16px;
padding: 0 14px 0 50px;
}

footer {
padding: 60px 0;
}

footer ul {
gap: 30px;
}

footer ul a {
font-size: 18px;
}

.area-btn:before,
.bg-ashirai1,
.bg-ashirai2,
.flow-wrap:after,
.qa-wrap:before,
.end-btn-wrap:before {
display: none;
}

.bg-ashirai3 {
left: -120px;
top: -24px;
margin-left: 0;
width: 140px;
}

.bg-ashirai4 {
top: -116px;
right: -118px;
width: 160px;
margin-right: 0;
}

.bg-ashirai5 {
top: -112px;
right: -82px;
width: 130px;
margin-right: 0;
}

.bg-ashirai6 {
left: 0;
top: -48px;
margin-left: -110px;
width: 170px;
}
.modal-cont{
max-width: calc(100% - 40px);
padding: 30px 14px 40px;
}
.modal-cont:before{
width: 60px;
height: 60px;
margin: 0 auto 20px;
}
.modal-cont p, .modal-cont .text-red{
font-size: 15px;
}
.tel-btn:after,.modal .btn-orange:after{
right: 30px;
}
.modal .btn-orange{
font-size: 18px;
padding-right: 20px;
}
.modal .btn-orange:before {
width: 22px;
height: 22px;
}
}

@media screen and (max-width : 391px) {
.header-in img {
width: 250px;
}

.area-wrap p {
font-size: 14px;
}

/* .area-btn .bottom a:last-child .s {
bottom: 28px;
} */

.btn-red {
font-size: 20px;
}

.btn-orange {
font-size: 21px;
}
.modal-cont {
max-width: calc(100% - 30px);
}
}

@media screen and (max-width : 376px) {
.area-wrap{
padding:0px 5px 50px;
}
.flow-wrap,
.qa-wrap,
.end-btn-wrap {
padding:50px 5px 50px;
}

.area-wrap p {
font-size: 13px;
}

.area-btn a,
.btn-red,
.btn-orange {
gap: 6px;
padding-left: 0px;
border-width: 3px;
}

.area-btn a:after,
.btn-red:after,
.btn-orange:after {
margin-left: 0px;
}

.area-btn a .s,
.btn-red .s {
font-size: 12px;
}

.btn-red {
box-shadow: inset 0 0 0 3px #e71a20, 0 4px 3px rgba(0, 0, 0, 10%);
}

.btn-orange {
box-shadow: inset 0 0 0 3px #ff9022, 0 4px 3px rgba(0, 0, 0, 10%);
}

.area-wrap .text-red {
font-size: 18px;
}
.modal-cont {
max-width: calc(100% - 24px);
padding: 30px 12px 40px;
}
.modal-cont p, .modal-cont .text-red {
font-size: 14px;
}
}

@media screen and (max-width : 361px) {
section h2 span {
font-size: 24px;
}

section h3 {
font-size: 22px;
}

/* .area-btn .bottom a:last-child .s {
bottom: 30px;
} */
.tel-btn:after, .modal .btn-orange:after {
right: 24px;
}
}


/*---------------------------
追加CSS
---------------------------*/


@media only screen and (orientation:landscape) and (max-width : 1300px),
(orientation:portrait) and (min-width : 754px) {
.header-in img {
width: 200px;
}
.sp-br {
display: block;
}
}

@media only screen and (orientation:landscape) and (max-width : 901px),
(orientation:portrait) and (min-width : 751px) {
.bottom {
display: inline-flex;
align-content: flex-end;
flex-wrap: wrap;
}
}

@media only screen and (orientation: landscape) and (max-width: 813px), (orientation: portrait) and (max-width: 753px) {
.area-btn .bottom a .s {
bottom: 10px;
line-height: 16px;
}
}

@media only screen and (orientation:landscape) and (max-width : 1000px),
(orientation:portrait) and (min-width : 900px) {
.area-btn:before {
right: 68%;
width: 150px;
height: 100%;
top: -550px;
margin-right: -630px;
}

.flow-wrap:after {
margin-left: -640px;
}

.end-btn-wrap:before {
margin-left: -668px;
}
}

@media screen and (max-width : 500px) {
.area-btn .top,
.area-btn .bottom {
display: block;
}
}


/*---------------------------
下層
---------------------------*/
.lower{
padding-bottom: 80px;
}
.lower section{
position: relative;
}
.lower section h1 {
border-bottom: 2px solid #e71a20;
margin-bottom: 120px;
}
.lower section h1 span{
position: relative;
display: block;
width: fit-content;
margin: 0 auto;
padding: 90px 0;
font-size: 40px;
font-weight: 800;
}
.lower section h1 span:before,.lower section h1 span:after{
content: '';
display: block;
width: 60px;
height: 80px;
background: url(img/h1_ashirai.png) no-repeat center / contain;
position: absolute;
opacity: 0.6;
transform: rotate(8deg);
}
.lower section h1 span:before{
left: -80px;
top: 16px;
}
.lower section h1 span:after{
right: -80px;
bottom: 16px;
}
.lower section h2 {
font-weight: 700;
font-size: 26px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin: 40px auto 30px;
border: 0;
border-bottom: 1px dashed #ccc;
padding: 0 0 25px;
width: 95%;
}
.lower section h2:before{
content: '';
width: 28px;
height: 28px;
display: inline-block;
background: url(img/h2_ashirai.svg) no-repeat center / contain;
}
.lower p{
text-align: center;
}
.bikkuri{
position: relative;
font-size: 20px;
font-weight: 700;
}
.bikkuri:before{
content: '';
display: block;
width: 60px;
height: 60px;
background: url(img/attention.png) no-repeat center / contain;
position: absolute;
left: 0;
right: 0;
top: -80px;
margin: auto;
}
.lower form dl{
display: flex;
width: 1000px;
margin: 0 auto 20px;
}
.lower form dt {
width: 320px;
font-weight: 800;
font-size: 18px;
display: flex;
align-items: center;
}
.lower form dt:before{
content: '必須';
display: inline-block;
width: 62px;
line-height: 20px;
border-radius: 30px;
background: #e71a20;
color: #fff;
font-size: 10px;
text-align: center;
margin-right: 10px;
}
.lower form dt.ninni:before{
content: '任意';
background: #707070;
}
.lower form dt .s {
font-size: 14px;
margin-left: -3px;
margin-bottom: -4px;
}
.lower form dd{
width: calc(100% - 320px);
}
.lower form .kome {
font-size: 12px;
font-weight: 500;
color: #7f7f7f;
}
.lower form dt .kome{
margin-left: 5px;
}
.lower form input,.lower form select{
border: 2px solid #f69293;
border-radius: 5px;
display: block;
width: 100%;
line-height: 56px;
height: 56px;
outline: none;
font-size: 16px;
font-weight: 500;
padding-left: 20px;
box-shadow: 0 0 5px 0px rgb(0 0 0 / 10%);
}
.lower form .tel dd{
position: relative;
}
.lower form .tel .kome {
position: absolute;
left: 0;
top: 100%;
line-height: 1.4;
padding-top:10px;
}
.lower .text-privacy,.lower .text-privacy2{
color: #7f7f7f;
margin-top: 130px;
font-size: 14px;
font-weight: 500;
}
.lower .text-privacy2{
font-size: 12px;
margin-top: 30px;
}
.lower .text-privacy a,.lower .text-privacy2 a{
text-decoration: underline;
color: #0080cc;
}
.form-btn-red,.form-btn-gray{
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 100px;
border: 5px solid #e71a20;
color: #e71a20;
border-radius: 100px;
margin: 50px auto 0;
background: none;
cursor: pointer;
font-size: 28px;
font-weight: 600;
box-shadow: 0 4px 3px rgba(0, 0, 0, 10%);
}
.form-btn-gray{
border-color: #707070;
color: #FFF;
border: 0;
background: #eaeaea;
color: #707070;
}
.form-btn-red{
background: #e71a20;
color: #FFF;
}
.form-btn-red:after{
display: block;
content: '';
width: 16px;
height: 16px;
border-top: solid 5px #FFF;
border-right: solid 5px #FFF;
transform: rotate(45deg);
right: -35px;
position: relative;
}
.form-btn-gray:before{
display: block;
content: '';
width: 16px;
height: 16px;
border-left: solid 5px #707070;
border-bottom: solid 5px #707070;
transform: rotate(45deg);
left: -35px;
position: relative;
}
.lower .bg-ashirai1{
top: 240px;
}
.lower .bg-ashirai2{
top: -60px;
}
.lower .bg-ashirai3{
top: 80%;
}
.lower .bg-ashirai4{
top: 70%;
}
.lower.confirmation section h1{
margin-bottom: 90px;
}
.lower.confirmation form dt:before{
display: none;
}
.lower.confirmation form dt{
width: 230px;
}
.lower.confirmation form dd {
width: calc(100% - 230px);
font-size: 18px;
border-bottom: 2px solid #f69293;
padding: 20px 0;
color:#666;
}
.lower.confirmation .text-red {
font-size: 24px;
font-weight: 700;
}
.lower.confirmation .f18{
font-size: 20px;
margin-top: 30px;
}
.lower.confirmation form dl{
margin-bottom: 40px;
}
.lower.confirmation .text-sousin {
margin-top: 80px;
}
.form-btn-red.submit{
position: relative;
}
.form-btn-red.submit input{
border: 0;
background: none;
border-radius: 0;
line-height: 1;
height: 100%;
padding: 0;
font-size: 28px;
font-weight: 600;
cursor: pointer;
color: #FFF;
box-shadow: 0 0 0 0;
}
.form-btn-red.submit:after{
position: absolute;
top: 0;
bottom: 0;
right: 40px;
margin: auto;
}
.must-read{
width: 1000px;
margin: 40px auto 0;
background: #ffe3e3;
text-align: center;
border-radius: 4px;
padding: 40px 0;
}
div.must-read p,.must-read .text-red {
font-weight: 700;
font-size: 20px;
}
.must-read .tel-num {
font-weight: 700;
font-size: 50px;
color: #e71a20;
margin-bottom: 20px;
}
.must-read .tel-num:before{
content: '';
display: block;
background: url(img/tell_r.png) no-repeat center / contain;
width: 30px;
height: 30px;
transform: rotate(10deg);
}

@media only screen and (orientation:landscape) and (min-width : 813px),(orientation:portrait) and (min-width : 753px){
.form-btn-red:hover,.form-btn-gray:hover{
opacity: 0.6;
transition: 0.3s;
}
}

/*---------------------------
下層SP
---------------------------*/
@media only screen and (orientation:landscape) and (max-width : 813px),(orientation:portrait) and (max-width : 753px){
.lower {
padding-bottom: 60px;
}
.lower section h1 {
margin-bottom: 100px;
}
.lower section h1 span{
padding: 60px 0;
font-size: 26px;
}
.lower section h1 span:before{
left: -55px;
top: 10px;
}
.lower section h1 span:after{
right: -55px;
bottom: 10px;
}
.bikkuri {
font-size: 16px;
}
.bikkuri:before{
width: 50px;
top: -72px;
}
.lower section h2{
font-size: 20px;
margin: 40px auto 10px;
border-bottom: 1px dashed #ccc;
padding: 0 0 10px;
width: 95%;
}
.lower section h2:before{
width: 26px;
height: 26px;
}
.lower form dl {
display: block;
width: auto;
margin: 0 10px 20px;
}
.lower form dt {
width: auto;
margin-bottom: 14px;
}
.lower form dd {
width: auto;
}
.lower form input, .lower form select{
font-size: 13px;
padding-left: 12px;
box-shadow: 0 0 5px 0px rgb(0 0 0 / 10%);
}
.lower form .kome {
font-size: 11px;
}
.lower .text-privacy, .lower .text-privacy2 {
margin-top: 100px;
font-size: 12px;
}
.lower .text-privacy2{
margin-top: 30px;
}
.form-btn-red, .form-btn-gray{
max-width: calc(100% - 20px);
height: 80px;
font-size: 24px;
border-width: 4px;
margin: 20px auto 0;
}
.form-btn-red:after{
width: 14px;
height: 14px;
border-top-width: 4px;
border-right-width: 4px;
}
.form-btn-gray:before{
width: 14px;
height: 14px;
border-left-width: 4px;
border-bottom-width: 4px;
}
.lower .bg-ashirai3 {
top: auto;
bottom: -50px;
}
.lower .bg-ashirai4 {
top: auto;
bottom: 382px;
right: -130px;
}
.lower.confirmation section h1 {
margin-bottom: 60px;
}
.lower.confirmation .text-red {
font-size: 20px;
}
.lower.confirmation .f18 {
font-size: 16px;
margin-top: 20px;
padding: 0 10px;
}
.lower.confirmation form dt {
width: auto;
margin-bottom: 0;
}
.lower.confirmation form dd{
width: auto;
line-height: 1.4;
padding: 16px 0;

}
.lower.confirmation .text-sousin {
margin-top: 50px;
font-size: 16px;
}

.form-btn-red.submit input{
font-size: 24px;
}
.lower.confirmation .bg-ashirai3 {
bottom: -135px;
}
.lower.confirmation .bg-ashirai4{
bottom: 342px;
}
}

@media screen and (max-width : 376px){
.bikkuri {
font-size: 15px;
}
.lower .text-privacy, .lower .text-privacy2 {
font-size: 11px;
}
.lower.confirmation .f18 {
font-size: 14px;
}
.lower.confirmation .text-sousin {
font-size: 15px;
}
}

@media screen and (max-width : 361px){
.lower section h1 span {
font-size: 24px;
}
.lower section h2 {
font-size: 20px;
}
.lower form dt{
font-size: 18px;
}
}

/*---------------------------
下層追記
---------------------------*/
.thanks .bikkuri{
font-size: 22px;
}
.must-read .tel-num{
display: flex;
justify-content: center;
align-items: center;
}
.must-read .tel-num:before{
width: 50px;
height: 34px;
margin: 8px 5px 0 0;
}
.must-read .tel-btn{
width: 440px;
margin: 0 auto;
}
.thanks .form-btn-gray{
margin-top: 80px;
}

.err_msg{
color: #e71a20;
margin:10px 0 0;
display:block;
}

@media only screen and (orientation:landscape) and (max-width : 813px),(orientation:portrait) and (max-width : 753px){
.thanks .bikkuri {
font-size: 20px;
}
.must-read{
max-width: calc(100% - 30px);
margin: 30px auto 0;
}
div.must-read p, .must-read .text-red {
font-size: 16px;
}
.must-read .tel-btn{
max-width: calc(100% - 20px);
}
.must-read .tel-num {
font-weight: 700;
font-size: 34px;
color: #e71a20;
margin-bottom: 20px;
}
.must-read .tel-num:before{
width: 25px;
height: 30px;
margin: 5px 5px 0 0;
}
}

@media screen and (max-width : 391px) {
div.must-read p, .must-read .text-red {
font-size: 15px;
}
}

@media screen and (max-width : 376px) {
div.must-read p, .must-read .text-red {
font-size: 14px;
}
}

@media screen and (max-width : 361px) {
.must-read {
max-width: calc(100% - 20px);
}
}


/*---------------------------
モーダル追加
---------------------------*/
.area-btn button {
width: 480px;
height: 110px;
background: #fff;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 0px solid #e71a20;
color: #e71a20;
gap: 8px;
font-size: 28px;
font-weight: 700;
box-shadow: 0 4px 3px rgba(0, 0, 0, 10%);
padding-left: 1px;
cursor: pointer;
}
.area-btn button:before {
content: '';
display: block;
width: 44px;
height: 44px;
background: url(img/plug.png) no-repeat center / contain;
}
.area-btn button:after{
display: block;
content: '';
width: 16px;
height: 16px;
border-top: solid 5px #e71a20;
border-right: solid 5px #e71a20;
transform: rotate(45deg);
margin-left: 3px;
}
.area-btn .bottom button {
color: #0080cc;
padding-bottom: 25px;
background: #f0faff;
}
.area-btn .bottom button:before {
background: url(img/stop.png) no-repeat center / contain;
}
.area-btn .bottom button:after {
border-top-color: #0080cc;
border-right-color: #0080cc;
}
.area-btn .bottom button:last-child {
border-color: #23a84b;
color: #23a84b;
background: #f6fff8;
}
.area-btn .bottom button:last-child:before{
background: url(img/tell_g.png) no-repeat center / contain;
width: 40px;
height: 40px;
transform: rotate(10deg);
}
.area-btn .bottom button:last-child:after {
border-top-color: #23a84b;
border-right-color: #23a84b;
}
.area-btn button .s{
position: absolute;
left: 0;
right: 0;
bottom: 12px;
text-align: center;
font-size: 12px;
}
.area-btn .bottom button:last-child .s {
font-size: 12px;
}
.modal2,.modal3{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
z-index: 100;
}
.modal-on{
display: flex;
}
.modal-close2,.modal-close3{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1;
}
.gray-btn {
width: 100%;
background: #aaa;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 100px;
box-shadow: 0 4px 3px rgba(0, 0, 0, 10%);
color: #fff;
font-weight: 600;
font-size: 20px;
position: relative;
}
.gray-btn:after {
display: block;
content: '';
width: 16px;
height: 16px;
border-top: solid 5px #fff;
border-right: solid 5px #fff;
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
right: 38px;
margin: auto;
display: none;
}
.modal2 .modal-cont:before,.modal3 .modal-cont:before{
display: none;
}

@media only screen and (orientation:landscape) and (min-width : 813px),
(orientation:portrait) and (min-width : 753px) {
.area-btn button:hover {
opacity: 0.6;
transition: 0.3s;
}
}

@media only screen and (orientation:landscape) and (max-width : 813px),
(orientation:portrait) and (max-width : 753px) {
.area-btn button{
max-width: 100%;
height: 100px;
font-size: 24px;
}
.area-btn button:before {
width: 38px;
height: 38px;
}
.area-btn button:after{
width: 14px;
height: 14px;
border-top-width: 4px;
}
.area-btn button .s{
font-size: 13px;
bottom: 12px;
}
.area-btn .bottom button .s {
bottom: 10px;
line-height: 16px;
}
.area-btn .bottom button:last-child {
margin-top:20px;
}
.area-btn .bottom button:last-child:before{
width: 36px;
height: 36px;
}
.modal2 .modal-cont p,.modal3 .modal-cont p{
text-align: left;
}
}

@media screen and (max-width : 376px) {
.area-btn button{
gap: 6px;
padding-left: 0px;
}
.area-btn button:after{
margin-left: 0px;
}
.area-btn button .s{
font-size: 12px;
}
}

.footernone{
display: none;
}


/*---------------------------
複製版
---------------------------*/
.fv {
height: auto;
background: #fff79a;
display: block;
padding: 0 0 30px;
}
.header-text-ss {
text-align: center;
font-size: 10px;
padding: 10px 0;
}
.header-text-s {
text-align: center;
background: #fcd323;
font-size: 16px;
line-height: 40px;
font-weight: bold;
}
.h1-top {
position: relative;
width: fit-content;
margin: 40px auto 20px;
font-size: 34px;
font-weight: 800;
}
.h1-top .b{
font-size: 40px;
}
.h1-top:before {
content: '';
display: block;
width: 108%;
height: 60%;
position: absolute;
left: 50%;
bottom: -10px;
transform: translate(-50%, 0);
background: #fee600;
z-index: -1;
}
.h1-top:after {
content: '';
display: block;
width: 40px;
height: 40px;
position: absolute;
right: -30px;
top: -20px;
background: url(img/fv-txt-icon.svg) no-repeat center / contain;
}
.h1-text{
font-size: 60px;
width: fit-content;
margin: 0 auto 40px;
position: relative;
font-weight: 900;
}
.h1-text .red{
color: #f9301c;
}
.h1-text:before {
content: '';
display: block;
width: 180px;
height: 130px;
position: absolute;
left: -90px;
top: -76px;
background: url(img/fv-bgimg-l.svg) no-repeat center / contain;
}
.h1-text:after {
content: '';
display: block;
width: 140px;
height: 190px;
position: absolute;
right: -150px;
top: -80px;
background: url(img/fv-bgimg-r.svg) no-repeat center / contain;
z-index: -1;
}
.fv ul{
display: flex;
justify-content: center;
gap: 30px;
}
.fv li{
width: 270px;
}
.fv-text{
text-align: center;
margin: 30px 0 0;
font-weight: 900;
line-height: 1.4;
}
.fv-text .red{
color: #f9301c;
}
.fv-text .b{
font-size: 30px;
}
.area-wrap h4{
width: 1000px;
max-width: 100%;
display: flex;
align-items: center;
gap: 20px;
margin: 60px auto 20px;
font-size: 20px;
font-weight: bold;
position: relative;
font-weight: 900;
}
.area-wrap h4:before,.area-wrap h4:after{
content: '';
display: block;
width: 10px;
flex-grow: 1;
height: 1px;
background: #333;
}
.area-wrap .h4-sinki{
margin-bottom: 44px;
}
.area-wrap .h4-sinki span {
position: absolute;
left: 0;
right: 0;
bottom: -26px;
margin: auto;
font-size: 13px;
color: #888;
font-weight: 700;
}
.area-wrap .triangle{
display: block;
margin: 0 auto 20px;
width: 0;
height: 0;
border-style: solid;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 14px solid #ff3d00;
border-bottom: 0;
}
.apply-phone-btn.pc{
display: flex;
width: 1000px;
margin: 0 auto;
justify-content: space-between;
gap: 20px;
}
.area-wrap a,.area-wrap button{
height: 70px;
width: 100px;
flex-grow: 1;
background: #fff;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 0px solid #e71a20;
color: #ffffff;
background: #e71a20;
gap: 8px;
font-size: 22px;
font-weight: 700;
box-shadow: 0 4px 3px rgba(0, 0, 0, 10%);
padding-left: 1px;
cursor: pointer;
}
.area-wrap a:before, .area-wrap button:before{
content: '';
display: block;
width: 34px;
height: 34px;
background: url(img/bt-icon-denki.svg) no-repeat center / contain;
}
.area-wrap a:after, .area-wrap button:after{
display: block;
content: '';
width: 16px;
height: 16px;
border-top: solid 5px #FFF;
border-right: solid 5px #FFF;
transform: rotate(45deg);
margin-left: 3px;
}
.area-wrap .s {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
text-align: center;
font-size: 12px;
}
.area-wrap .gas:before{
background: url(img/bt-icon-gasu.svg) no-repeat center / contain;
}
.area-wrap .water:before{
background: url(img/bt-icon-mizu.svg) no-repeat center / contain;
}
.area-wrap .confirmation-cancellation{
background: #aaa;
width: 450px;
margin: 0 auto;
}
.area-wrap .confirmation-cancellation:before{
background: url(img/stop.png) no-repeat center / contain;
}
.area-wrap .web-inquiry-btn{
width: 450px;
margin: 0 auto;
background: #ff9022;
}
.area-wrap .web-inquiry-btn:before,.btn-orange:before {
background: url(img/net.png) no-repeat center / contain;
width: 28px;
}
.btn-wrap-pcFlex{
display: flex;
justify-content: center;
gap: 30px;
}
.btn-wrap-pcFlex .btn-red,.btn-wrap-pcFlex .btn-orange{
width: 450px;
height: 70px;
margin: 0;
font-size: 22px;
}
.btn-wrap-pcFlex .btn-red .s {
font-size: 15px;
bottom: 2px;
}
.flow-wrap ol{
gap: 80px 80px;
margin: 82px auto;
width: 1000px;
flex-wrap: wrap;
}
.flow-wrap li{
width: 278px;
height: 278px;
}
.flow-wrap li .text,.flow-wrap li:nth-child(2) .text,.flow-wrap li:nth-child(3) .text{
flex-direction: column;
line-height: 1.4;
color: #333;
}
.flow-wrap li .text .s {
font-size: 13px;
text-align: left;
color: #666;
margin-top: 10px;
}
.flow-wrap li .img img {
width: auto;
height: 80px;
}
.flow-wrap .step{
left: -36px;
top: -36px;
background: #0080cc;
width: 100px;
}
.flow-wrap li:after{
display: none;
}
.flow-wrap li,.flow-wrap li:nth-child(3){
box-shadow: 0 0 0 5px #0080cc;
}
.flow-wrap li .img,.flow-wrap li:nth-child(3) .img{
border-bottom: 4px solid #0080cc;
}
.modal2 .gray-btn{
margin-bottom: 20px;
height: 70px;
}
.modal2 .gray-btn:last-child{
margin-bottom: 0;
}
.modal-cont .tel-num{
text-align: center;
font-size: 18px;
font-weight: bold;
}
.modal-cont .tel-num .middle{
color: #e71a20;
font-size: 50px;
font-weight: bold;
margin: 5px 0;
}
.modal-cont .tel-num .middle:before{
display: inline-block;
content: '';
width: 38px;
height: 38px;
background: url(img/tell_red.png) no-repeat center / contain;
margin-right: 8px;
}
.btn-red.sp{
display: none;
}
.flow-wrap:after,.qa-wrap:before,.end-btn-wrap:before{
display: none;
}

@media only screen and (orientation:landscape) and (max-width : 813px),(orientation:portrait) and (max-width : 753px){
.header-text-ss {
font-size: 9px;
padding: 7px 0;
}
.header-text-s {
font-size: 12px;
line-height: 34px;
}
.h1-top{
font-size: 20px;
margin-top: 22px;
}
.h1-top .b {
font-size: 24px;
}
.h1-top:after {
width: 30px;
height: 30px;
right: -23px;
top: -17px;
}
.h1-text{
font-size: 44px;
text-align: center;
line-height: 1.2;
margin-bottom: 20px;
}
.h1-text:before{
background: url(img/fv-bgimg-l-sp.svg) no-repeat center / contain;
width: 72px;
height: 68px;
left: -46px;
top: -48px;
}
.h1-text:after{
width: 118px;
height: 160px;
right: -90px;
top: -38px;
}
.fv ul {
gap: 6px;
padding: 0 6px;
}
.fv-text {
margin: 20px 0 0;
line-height: 1.2;
font-size: 15px;
}
.fv-text .b {
font-size: 26px;
}
.btn-red.sp{
display: flex;
}
.pc,.btn-red.pc,.apply-phone-btn.pc{
display: none;
}
.area-wrap a, .area-wrap button{
width: 450px;
max-width: 100%;
margin: 0 auto 20px;
}
.area-wrap a:after, .area-wrap button:after{
width: 14px;
height: 14px;
border-top-width: 4px;
border-right-width: 4px;
}
.btn-wrap-pcFlex {
display: block;
}
.btn-wrap-pcFlex .btn-red .s {
font-size: 14px;
bottom: 6px;
}
.btn-wrap-pcFlex .btn-orange{
margin-top: 30px;
}
.flow-wrap ol{
width: auto;
margin: 50px 0;
}
.flow-wrap li:after,.flow-wrap li:nth-child(3):after{
display: block;
background: url(img/sankaku_b.svg) no-repeat center / contain;
}
.flow-wrap li:last-child:after{
display: none;
}
.flow-wrap .step{
top: -20px;
}
}

@media screen and (max-width : 391px){
.h1-top {
font-size: 18px;
}
.h1-top .b {
font-size: 22px;
}
.h1-text{
font-size: 42px;
}
.fv-text .b {
font-size: 24px;
}
.area-wrap a, .area-wrap button,.area-wrap .confirmation-cancellation,.area-wrap .web-inquiry-btn,.btn-wrap-pcFlex .btn-red, .btn-wrap-pcFlex .btn-orange{
font-size: 21px;
}
}

@media screen and (max-width : 376px){
.h1-text:after {
width: 112px;
height: 148px;
right: -78px;
top: -25px;
}
.fv-text{
font-size: 14px;
}
.area-wrap h4{
gap: 12px;
}
}

@media screen and (max-width : 361px){
.h1-text {
font-size: 40px;
}
.fv-text .b {
font-size: 22px;
}
.area-wrap h4{
font-size: 19px;
}
}

/*---------------------------
simple-edition
---------------------------*/
.simple-edition{
color: #1E1E1E;
}
.simple-edition main{
max-width: 800px;
margin: 0 auto;
padding-top: 26px;
}
.simple-edition h1{
font-weight: 700;
font-size: 32px;
text-align: center;
line-height: 1.4;
color: #000;
}
.simple-edition section{
margin-top: 70px;
}
.simple-edition h1 + section{
margin-top: 60px;
}
.simple-edition h2{
font-weight: 700;
font-size: 16px;
color: #fff;
background: linear-gradient(to bottom, #ff9296, #e65257);
position: relative;
padding: 8px 0 8px 40px;
line-height: 1.4;
margin-bottom: 18px;
border: 0;
}
.simple-edition h2:before{
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 8px solid #fff;
border-right: 0;
position: absolute;
left: 18px;
top: 0;
bottom: 0;
margin: auto;
}
.simple-edition .img-area{
border: 1px solid #ccc;
margin-bottom: 60px;
}
.simple-edition p,.simple-edition th,.simple-edition td,.simple-edition footer li a{
font-weight: 400;
font-size: 16px;
line-height: 1.5;
}
.simple-edition table,.simple-edition th,.simple-edition td{
border: 1px solid #ccc;
}
.simple-edition table{
width: 100%;
text-align: center;
margin: 44px 0;
}
.simple-edition th,.simple-edition td{
padding: 10px;
color: #000;
}
.simple-edition th{
background: #F0F0F0;
}
.simple-edition th:first-child{
width: 68%;
}
.simple-edition .blue-btn{
background: #49A5F0;
color: #fff;
font-weight: 700;
font-size: 16px;
line-height: 1.5;
text-align: center;
display: block;
padding: 15px 0;
border: 0;
outline: none;
}
.simple-edition .blue-btn.sp{
display: none;
}
.simple-edition td .blue-btn{
margin: 8px auto;
width: calc(100% - 40px);
}
.simple-edition .qa-wrap{
text-align: left;
padding: 10px 0 0;
position: static;
}
.simple-edition .qa-wrap h3{
display: block;
font-weight: 700;
font-size: 16px;
line-height: 1.5;
position: relative;
padding-left: 40px;
margin-bottom: 16px;
}
.simple-edition .qa-wrap p{
color: #636363;
padding-left: 40px;
position: relative;
padding-bottom: 44px;
border-bottom: 1px solid #ccc;
margin-bottom: 44px;
}
.simple-edition .qa-wrap p:last-child{
margin-bottom: 0;
}
.simple-edition .qa-wrap h3:before,.simple-edition .qa-wrap p:before{
display: block;
font-weight: 700;
font-size: 20px;
position: absolute;
line-height: 1;
}
.simple-edition .qa-wrap h3:before{
content: 'Q';
color: #090979;
left: 12px;
top: 1px;
width: auto;
height: auto;
background: none;
}
.simple-edition .qa-wrap p:before{
content: 'A';
color:#E71A20 ;
top: 2px;
left: 13px;
}
.simple-edition footer{
background: #EDEDED;
margin-top: 70px;
padding: 30px 0;
}
.simple-edition footer ul{
display: flex;
align-items: center;
justify-content: center;
gap: 100px;
}
.simple-edition footer li a{
color: #000;
}
.simple-edition .modal-cont p, .simple-edition .modal-cont .text-red {
font-weight: 700;
text-align: center;
font-size: 18px;
line-height: 1.5;
}

@media only screen and (orientation:landscape) and (max-width : 813px),(orientation:portrait) and (max-width : 753px){
.simple-edition .blue-btn.pc {
display: none;
}
.simple-edition .blue-btn.sp {
display: block;
}
.simple-edition main{
padding: 25px 15px 0;
}
.simple-edition h1{
font-size: 20px;
}
.simple-edition h1 + section {
margin-top: 25px;
}
.simple-edition .img-area {
margin-bottom: 20px;
}
.simple-edition h2{
padding: 8px 0 8px 26px;
}
.simple-edition h2:before{
left: 10px;
}
.simple-edition table {
width: 100%;
margin: 22px 0;
}
.simple-edition td .blue-btn {
margin: 2px auto;
width: calc(100% - 8px);
}
.simple-edition .qa-wrap{
padding: 4px 0 0;
}
.simple-edition .qa-wrap h3{
padding-left: 28px;
}
.simple-edition .qa-wrap p{
padding-left: 28px;
padding-bottom: 30px;
margin-bottom: 30px;
}
.simple-edition .qa-wrap h3:before{
left: 2px;
}
.simple-edition .qa-wrap p:before{
left: 3px;
}
.simple-edition footer ul{
gap: 40px;
}
}
/* 運営会社ページのスタイル */
.company-info {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

.company-section {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
}

.simple-edition .company-section h2 {
  font-weight: 700;
  font-size: 20px;
  color: #333;
  background: none;
  padding: 0;
  border: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #0066cc;
  position: static;
}
.simple-edition .company-section h2:before {
  content: none;
}

.company-section dl {
    margin: 0;
}

.company-section dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    /* 左ラベル幅を調整 */
    gap: 10px 16px;
    /* 行/列の隙間 */
    align-items: start;
    /* 複数行でも上揃え */
    margin: 0;
}

.company-section dt {
    margin: 0;
    font-weight: 700;
}

.company-section dd {
    margin: 0;
}

.company-section a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.company-section a:hover {
    color: #004080;
    text-decoration: underline;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
    .company-section {
        padding: 20px;
    }

    .company-section h2 {
        font-size: 18px;
    }

    .company-section dt {
        float: none;
        margin-bottom: 5px;
    }

    .company-section dd {
        margin-left: 0;
        margin-bottom: 20px;
    }
}
html, body {
  height: 100%;
}

body.simple-edition {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 画面の高さに合わせる */
}

.simple-edition main {
  flex: 1 0 auto; /* メインを可変領域にして押し下げる */
}

.simple-edition footer {
  flex-shrink: 0;  /* フッターは縮まない */
  margin-top: 0;   /* 余計な上マージンを無くす */
  width: 100%;
}