@charset "utf-8";

:root {
/* メインカラー */
--color-navy: #013c7b;
--color-navy-bg: #eef8fe;
--color-navy-border: #bfe4fb;
--color-red: #ee4d2d;
--color-gold: #c38d31;

/* グラデーション */
--gradient-navy: linear-gradient(
-90deg,
#002c58 0%,
#003f75 25%,
#07528f 85%,
#07528f 100%
);

--gradient-gold:
linear-gradient(
 180deg,
#f1d77d 0%,
#c99527 48%,
#a96f12 100%
);

  --gradient-cta:
linear-gradient(180deg, #ff684b 0%, #ef442b 100%);
}

/* ============================
   下部固定ボタン
============================ */

.follow-cta{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(transparent, rgba(255, 255, 255, 0.95));
transform: translateY(110%);
opacity: 0;
visibility: hidden;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s, visibility 0.4s;
}

.follow-cta.is-visible{
transform: translateY(0);
opacity: 1;
visibility: visible;
}

.follow-cta a{
display: block;
width: 90%;
max-width: 540px;
margin: 0 auto;
}

.follow-cta img{
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}

.has-follow-cta .wrapper{
padding-bottom: calc(min(25vw, 150px) + 24px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
.follow-cta{
transition: none;
}
}

/* CSS Document */

* {
margin: 0;
padding: 0;
}
html {line-height: 1.4;}
html {  scroll-behavior: smooth;}
body {
font-size:16px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
background-color: #ffffff;
color:#333333;
line-height: 1.6;
}
p{
font-size:16px;
line-height: 1.6;
}

@media screen and (max-width: 979px) {
body {
font-size: 16px;
line-height: 1.6;
}
p{
font-size:16px;
line-height: 1.6;
}
}


img {vertical-align: bottom;}
.pc {display: block;}
.sp {display: none;}


.wrapper {
padding:0;
margin: 0 auto;
width: 600px;
text-align: center;
box-shadow: -0.7px 0.7px 10px 0px rgba(86, 59, 31, 0.42);
}

.wrapper img {max-width: 100%;}


@media screen and (max-width: 979px) {
.pc {display: none;}
.sp {display: block;}

.wrapper {
padding:0;
margin: 0 auto;
width: 100%;
text-align: center;
min-width:100%;
}



}

/* ============================
   000 タイトル
============================ */

h2{
font-size: 42px;
font-family: "Noto Serif JP", serif;
text-align: center;
line-height: 1.4;
margin: 0 auto 0;
padding: 0 0 6% 0;
color: var(--color-navy);

}

h3{
font-size: 28px;
font-family: "Noto Serif JP", serif;
text-align: center;
line-height: 1.4;
}

.line::after {
content: "";
display: block;
width: 150px;
height: 11px;
margin: 16px auto 0;
background-color: currentColor;
clip-path: polygon(
0 0,
100% 0,
100% 3px,
54% 3px,
50% 100%,
46% 3px,
0 3px
);
}
@media screen and (max-width: 979px) {
h2{font-size:32px;}
h3{font-size:26px;}

.line::after{}
}


/* ============================
   000 フォント
============================ */
.txt_red{
color:var(--color-red);
font-weight: 600;
}
.txt_key{
color: #0da989;
}

.txt_b{
font-weight: 600;
}

.txt_big{
font-weight: 600;
font-size: 140%;
line-height: 1.2;
}

.txt_big02{
font-weight: 600;
font-size: 40px;
}

@media screen and (max-width: 979px) {
.line::after{
width: 140px;
height: 2px;
margin: 16px auto 0;
}

.txt_big{

}

.txt_big02{
font-weight: 600;
font-size: 30px;
}
}



/* ============================
   001 メイン
============================ */
.top{
text-align: center;
margin:0 auto ;
padding: 0 0 0 0;
}

.top h1{}



@media screen and (max-width: 979px) {
.top{
text-align: center;
margin:0 auto ;
padding: 0 0 0 0;
background: url("../img/top.jpg") top center no-repeat;
background-size: 100%;
}

}

/* ============================
   000 order
============================ */
#order{
background: url("../img/order_bg.png") bottom center no-repeat;
padding: 4% 6%;
box-sizing: border-box;
}

#order .order_box{
border: 1px solid var(--color-navy-border);
background-color: var(--color-navy-bg);
border-radius: 24px;
position: relative;
padding: 8% 6% 4% 6%;
margin: 4% auto;
}

#order .order_sub{
position: absolute;
top: 0;
left: 50%;
width: min(48%, 465px);
margin: 0;
padding: 12px 30px;
color: var(--color-gold);
background-color: #ffffff;
border: 2px solid var(--color-gold);
border-radius: 999px;
box-sizing: border-box;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
transform: translate(-50%, -52%);
}

#order h2{
font-size: 22px;
padding: 0 0 4% 0;
color: var(--color-navy);
}

#order p{
font-size:12px;
text-align: center;
color: var(--color-navy);
padding: 4% 0 0 0;
font-weight: 600;
line-height: 1.4;
}

.order_form {gap:16px;}
.order_input {
width: 100%;
font-size: 22px;
padding: 16px;
box-sizing: border-box;
border: 2px #999999 solid;
border-radius:4px;
text-align: center;
margin: 0 auto 16px;
  }

#order .order_button {
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
appearance: none;
cursor: pointer;
line-height: 0;
}

#order .order_button_img {
display: block;
width: 100%;
height: auto;
}

#order .order_button:focus-visible {
outline: 2px solid var(--color-navy);
outline-offset: 4px;
}

@media screen and (max-width: 979px) {
#order .order_box{
padding: 8% 4% 4% 4%;
}


#order h2{
font-size:17px;
padding: 0 0 4% 0;

}

.order_input {
width: 100%;
font-size:18px;
padding:16px 8px;
box-sizing: border-box;
border: 1px #999999 solid;
border-radius:4px;
text-align: center;
margin: 0 auto 16px;
  }
#order p{
    font-size: 10px;
}
}


/* ============================
   000 共通
============================ */

.contents{
width:100%;
padding:8% 6%; 
margin:0 auto;
text-align: center;
box-sizing: border-box;
}

.contents p{
}

.contents_bg_a{background-color:  var(--color-navy-bg);}


@media screen and (max-width: 979px) {
.contents{

margin:0 auto;
text-align: center;
}

.contents p{}

}

.row {
display: flex;
flex-wrap: wrap;
gap: 2%;
}

.col {
display: flex;
flex-wrap: wrap;
width: 49%;
box-sizing: border-box;
}



/* ============================
   002 お客様の声
============================ */
#c_002 {}

#c_002 dl {
display: grid;
grid-template-columns: 25% 1fr;
column-gap: 16px;
row-gap: 4px;
width: 100%;
margin: 0;
box-sizing: border-box;

}

#c_002 dt {
margin: 0;
color: #ffffff;
font-size: 110%;
font-weight: 600;
text-align: center;
box-sizing: border-box;
background: var(--gradient-navy);
line-height: 1.4;
display: flex;
align-items: center;
justify-content: center;
}

#c_002 dd {

width: 100%;
min-width: 0;
margin: 0;
padding:4px 0 8px 0;
box-sizing: border-box;
text-align: left;
font-size: 14px;
border-bottom: 2px solid var(--color-navy);
}

@media screen and (max-width: 979px) {
#c_002 dt {font-size: 100%;}
}

#c_002 .seminar_list {
display: block;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}

#c_002 .seminar_list li {
position: relative;
display: block;
width: 100%;
min-width: 0;
padding-left:14px;
box-sizing: border-box;
}

#c_002 .seminar_list li:last-child {
margin-bottom: 0;
}

#c_002 .seminar_list li::before {
content: "\f14a";
position: absolute;
top: 0.35em;
left: 0;
color: var(--color-navy);
font-family: "Font Awesome 7 Free";
line-height: 1;
}
/* ============================
   003 
============================ */
#c_003 {}


/* ============================
   004 
============================ */
#c_004 {

}


/* ============================
   005 
============================ */
#c_005 {
background: url("../img/c05_bg.png") top center no-repeat;
background-size: cover;
padding:0 0 8% 0;
box-sizing: border-box;
}

#c_005 h2{
padding: 0 0 0 0;
margin: 0 auto 6%;
}

#c_005 p{
text-align: left;
margin: 0 auto;
width: 88%;
line-height: 1.8;
box-sizing: border-box;
}

/* ============================
   006 
============================ */
#c_006 {
background-color: var(--color-navy-bg);
padding: 8% 0;
}

#c_006 p{
padding: 0 6%;
text-align:left;
}


#c_006 .box{
padding:4% 6%;
margin: 6% 6% 0 0;
text-align:left;
border-top:2px solid var(--color-navy);
border-bottom:2px solid var(--color-navy);
border-right:2px solid var(--color-navy);
border-radius: 0 8px 8px 0;
background-color: #ffffff;
position: relative;
}

#c_006 .box::after {
content: "";
position: absolute;
z-index: 10;
bottom: -18%;
left: 40%;
width: 0;
height: 0;
border-top: 16px solid var(--color-navy);
border-right: 18px solid transparent;
border-left: 18px solid transparent;
transform: translateX(-50%);
}

#c_006 .box:nth-of-type(3)::after {
display: none;
}


#c_006 .box dl{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;

}

#c_006 .box dt{
width: 80%;
}

#c_006 .box dt p{
padding: 0 0 0 20%;
}


#c_006 .box dd{
width: 20%;
position: relative;

}

#c_006 .box dd img{
position: absolute;
max-width: 130%;
}

#c_006 h3{
font-size: 34px;
}



#c_006 .step_title {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 20px;
margin:0 0 2% 0;
padding: 0;
color: var(--color-navy);
font-family: "Noto Serif JP", serif;
font-size: 26px;
font-weight: 700;
line-height: 1.3;
text-align: left;
}

#c_006 .step_number {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 50px;
height: 54px;
color: #ffffff;
background: var(--gradient-navy);
border-radius: 5px;
font-family: "Noto Serif JP", serif;
font-size: 40px;
font-weight: 400;
line-height: 1;
}

#c_006 .p_box{
margin: 6% 0 0 0;
}

@media screen and (max-width: 979px) {
#c_006 .box{
margin: 8% 6% 0 0;
}

#c_006 .box::after {
content: "";
position: absolute;
z-index: 10;
bottom: -16%;
left: 40%;
width: 0;
height: 0;
border-top: 12px solid var(--color-navy);
border-right: 16px solid transparent;
border-left: 16px solid transparent;
transform: translateX(-50%);
}

#c_006 .box dl{

}

#c_006 .box dt{
width: 75%;
}

#c_006 .box dt p{
padding: 0 0 0 0;
}


#c_006 .box dd{
width: 25%;
position: relative;

}

#c_006 .box dd img{
position: absolute;
max-width: 130%;
}



#c_006 h3{
font-size: 28px;
}
}

/* ============================
   007 
============================ */
#c_007{
background-color: #ffffff;
}

#c_007 .contents {
width: 100%;
padding: 4% 6%; 0 6%
margin: 0 auto;
box-sizing: border-box;
}

#c_007 h3{
text-align: left;
color: var(--color-navy);
border-bottom: 2px solid var(--color-navy);
padding: 0 0 2% 0;
}

#c_007 p{
text-align: left;
padding: 4% 0 8% 0;
}

#c_007 .sub_title{
width:100%;
margin:8% auto 0;
padding: 12px 30px;
color: var(--color-gold);
background-color: #ffffff;
border: 2px solid var(--color-gold);
border-radius: 999px;
box-sizing: border-box;
font-weight: 700;
line-height: 1.2;
font-size: 24px;
}

@media screen and (max-width: 979px) {
#c_007 h3{
font-size: 20px;
}

#c_007 .sub_title{
padding: 12px 10px;
font-size: 20px;
}

}
/* ============================
   008 
============================ */
#c_008 {
background: url("../img/c08_bg.png") top center repeat;
background-size: 100%;
padding: 8% 0 0 0 ;
}

#c_008 .box {
position: relative;
width: 88%;
margin: 0 auto 6%;
padding: 0;
overflow: visible;
background: none;
box-sizing: border-box;
}
#c_008 .box_a{
background-color: var(--color-navy-bg);
border: 2px solid var(--color-navy);
padding:4% 6%;
margin: 6% auto 8%;
width: 88%;
box-sizing: border-box;
position: relative;
border-radius: 12px;
}

#c_008 .box_a::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 100%);
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 14px solid var(--color-navy);
}

#c_008 .box h3 {
display: flex;
align-items: center;
min-height: 100px;
margin: 0;
padding: 20px 4% 20px 26%;
box-sizing: border-box;
color: var(--color-navy);
background-color: var(--color-navy-bg);
border-top: 2px solid var(--color-navy);
border-right: 2px solid var(--color-navy);
border-left: 2px solid var(--color-navy);
border-radius: 12px 12px 0 0;
font-family: "Noto Serif JP", serif;
font-size: 28px;
font-weight: 700;
line-height: 1.4;
text-align: left;
}

#c_008 .box_body {
margin: 0;
padding:4% 6%;
background-color: #ffffff;
border-right: 2px solid var(--color-navy);
border-bottom: 2px solid var(--color-navy);
border-left: 2px solid var(--color-navy);
border-radius: 0 0 12px 12px;
box-sizing: border-box;
}

#c_008 .step_badge {
position: absolute;
z-index: 2;
top: -22px;
left: 4%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 18%;
min-width: 90px;
height: 170px;
padding-top: 30px;
box-sizing: border-box;
color: #ffffff;
background: var(--gradient-navy);
clip-path: polygon(
0 0,
100% 0,
100% 100%,
50% 83%,
0 100%
);
}

#c_008 .step_label {
display: block;
font-family: "Noto Serif JP", serif;
font-size: 16px;
font-weight: 600;
line-height: 1;
}

#c_008 .step_number {
display: block;
margin-top: 6px;
font-family: "Noto Serif JP", serif;
font-size: 58px;
font-weight: 400;
line-height: 1;
}

#c_008 .box_img {
display: block;
width: 88%;
height: auto;
margin: 0 auto;
}

#c_008 p {
text-align: left;
padding: 4% 0 0 0;
}

#c_008 .box_008{
background-color: var(--color-navy-bg);
padding: 2% 6% 8% 6%;
}

#c_008 h4{
background-color: var(--color-navy-bg);
font-family: "Noto Serif JP", serif;
color: var(--color-navy);
font-size: 32px;

}

#c_008 h5{
background-color: var(--color-navy-bg);
font-family: "Noto Serif JP", serif;
color: var(--color-red);
font-size: 38px;
margin: 6% auto 2%;
}


#c_008 h5{
background-color: var(--color-navy-bg);
font-family: "Noto Serif JP", serif;
color: var(--color-red);
font-size: 38px;
margin: 6% auto 2%;
}

#c_008 .seminar_list {
display: block;
width: 100%;
min-width: 0;
margin: 2% auto;
padding: 0;
box-sizing: border-box;
list-style: none;
}

#c_008 .seminar_list li {
position: relative;
display: block;
width: 100%;
min-width: 0;
padding-left:20px;
box-sizing: border-box;
text-align: left;
font-weight:600;
}

#c_008 .seminar_list li:last-child {
margin-bottom: 0;
}

#c_008 .seminar_list li::before {
content: "\f058";
position: absolute;
top: 0.35em;
left: 0;
color: var(--color-red);
font-family: "Font Awesome 7 Free";
line-height: 1;
}


@media screen and (max-width: 979px) {
#c_008 .box_a{
padding:4% 2%;
margin: 6% auto 8%;
width: 88%;
box-sizing: border-box;
}

#c_008 .box {
margin: 0 auto 8%;
}

#c_008 .step_badge {
width: 15%;
min-width:70px;
height: 130px;
padding-top: 20px;

}
#c_008 .step_number {
display: block;
margin-top: 6px;
font-family: "Noto Serif JP", serif;
font-size: 54px;
font-weight: 400;
line-height: 0.8;
}



#c_008 .box h3 {
font-size: 20px;
padding: 6% 4% 6% 26%;
min-height:auto;

}

#c_008 h4{
font-size: 20px;

}

#c_008 h5{
font-size: 28px;

}



}

/* ============================
   009 
============================ */
#c_009 {
background: url("../img/c09_bg.png") top center no-repeat;
background-size: 100%;
padding: 8% 0;
}

#c_009 .box {
position: relative;
width: 88%;
margin: 0 auto 4%;
padding: 0 ;
overflow: visible;
background-color: #ffffff;
border: 2px solid var(--color-navy);
border-radius: 10px;
box-sizing: border-box;
}

#c_009 .box:last-child {
margin-bottom: 0;
}

#c_009 .box h3 {
display: flex;
align-items: center;
min-height: 80px;
margin: 0;
padding: 16px 24% 16px 7%;
box-sizing: border-box;
color: #ffffff;
background: var(--gradient-navy);
border-radius: 7px 7px 0 0;
font-family: "Noto Serif JP", serif;
font-size: 26px;
font-weight: 700;
line-height: 1.4;
text-align: left;
}

#c_009 .box_body {
display: flex;
align-items: center;
padding: 6%;
box-sizing: border-box;
background-position: left bottom;
background-repeat: no-repeat;
background-size: 38% auto;
border-radius: 0 0 8px 8px;
}

#c_009 .box_body p {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
padding: 0;
font-size: 17px;
font-weight: 500;
line-height: 1.75;
text-align: left;
}

#c_009 .point_badge {
position: absolute;
z-index: 2;
top: -16px;
right: 4%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 88px;
height: 122px;
padding-top: 18px;
box-sizing: border-box;
color: #ffffff;
background: var(--gradient-gold);
clip-path: polygon(
0 0,
100% 0,
100% 100%,
50% 83%,
0 100%
);
filter: drop-shadow(0 3px 2px rgb(0 0 0 / 15%));
border:3px solid #c48f37;
}

#c_009 .point_badge span {
display: block;
font-family: "Noto Serif JP", serif;
font-size: 13px;
font-weight: 600;
line-height: 1;
}

#c_009 .point_badge strong {
display: block;
margin-top: 4px;
font-family: "Noto Serif JP", serif;
font-size: 42px;
font-weight: 600;
line-height: 1;
}

#c_009 .box:nth-of-type(1) .box_body {
background: url("../img/c09_bg01.png") bottom left repeat;
background-size: 100%;
}


#c_009 .box:nth-of-type(2) .box_body {
background: url("../img/c09_bg02.png") bottom left repeat;;
background-size: 100%;
}

#c_009 .box:nth-of-type(3) .box_body {
background: url("../img/c09_bg03.png") bottom left repeat;;
background-size: 100%;
}

#c_009 .box:nth-of-type(4) .box_body {
background: url("../img/c09_bg04.png") bottom left repeat;;
background-size: 100%;
}

#c_009 .box:nth-of-type(5) .box_body {
background: url("../img/c09_bg05.png") bottom left repeat;;
background-size: 100%;
}

@media screen and (max-width: 979px) {
#c_009 .box {
margin: 0 auto 6%;
}

}
/* ============================
   010 
============================ */
#c_010 {
position: relative;
z-index: 2;
padding: 8% 0;
overflow: visible;
background-color: var(--color-navy-bg);
box-sizing: border-box;
}

#c_010::before {
content: "";
position: absolute;
z-index: 1;
top: -30px;
right: 0;
width: 40%;
height: calc(100% + 30px);
background-image: url("../img/c010_bg.png");
background-position: top right;
background-repeat: no-repeat;
background-size: 100% auto;
pointer-events: none;
}

#c_010 > * {
position: relative;
z-index: 2;
}

#c_010 h2{
width: 75%;
margin: 0 auto 0 0;
}


#c_010 p{
margin: 0;
width: 70%;
text-align: left;
padding:0 6% 4% 6%;
line-height: 1.8;
}

#c_010 .seminar_list {
padding: 4% 0;
}

#c_010 .seminar_list li {
position: relative;
display: block;
width: 88%;
margin: 0 auto;
padding:6px 0 6px 24px;
box-sizing: border-box;
text-align: left;
border-bottom: 2px dotted var(--color-navy);
line-height: 1.6;
}

#c_010 .seminar_list li:last-child {
margin-bottom: 0;
}

#c_010 .seminar_list li::before {
content: "\f14a";
position: absolute;
top: 8px;
left: 0;
color: var(--color-navy);
font-family: "Font Awesome 7 Free";
line-height: 1;
}

#c_010 .box {
width: 88%;
margin: 6% auto 0;
}

/* ============================
   011
============================ */
#c_011{
padding: 8% 0;
}

#c_011 .box {
width: 88%;
margin: 2% auto 0;
}

#c_011 .box_a{
padding: 4% 4%;
background-color: var(--color-navy-bg);
border: 1px solid var(--color-navy);
position: relative;
margin: 4% auto 6%;
}

#c_011 span{
position: absolute;
top: -20px;
left: 20px;
background-color: var(--color-gold);
color:#ffffff;
padding:5px 10px;
}

#c_011 .seminar_list {}

#c_011 .seminar_list li {
position: relative;
display: block;
margin: 0 auto;
padding:6px 0 0 24px;
box-sizing: border-box;
text-align: left;
line-height: 1.6;
}

#c_011 .seminar_list li::before {
content: "・";
position: absolute;
top: 10px;
left: 0;
line-height: 1;
}
#c_011 p{
font-size: 12px;
text-align: center;
color: var(--color-navy);
padding: 4% 0 0 0;
font-weight: 600;
line-height: 1.4;
}

@media screen and (max-width: 979px) {

#c_011 .box_a{
padding: 4% 2%;
margin: 20px auto;

}
#c_011 .seminar_list li {
font-size: 14px;
line-height: 1.4;
padding:6px 0 0 16px;
}
#c_011 .seminar_list li::before {
content: "・";
position: absolute;
top: 8px;
left: 0;
line-height: 1;
}
#c_011 span{
position: absolute;
top: -20px;
left: 20px;
background-color: var(--color-gold);
color:#ffffff;
padding:5px 10px;
}
}

/* ============================
012 お客様の声
============================ */

#c_012 {
padding: 8% 0;
background: url("../img/c012_bg.png") center center / cover no-repeat;
}

#c_012 h2 {
margin: 0 auto 24px;
padding: 0;
}

#c_012 h2 img {
display: block;
width: 100%;
height: auto;
}

#c_012 .slider-container {
position: relative;
width: 100%;
}

#c_012 .slick-slider-init {
width: 100%;
}

#c_012 .slick-list {
overflow: hidden;
}

#c_012 .slick-track {
display: flex;
align-items: stretch;
}

#c_012 .slick-slide {
display: flex;
flex-direction: column;
float: none;
height: auto;
}

#c_012 .slick-slide > div {
display: flex;
flex: 1;
min-width: 0;
}

#c_012 .slide-item {
display: flex;
flex: 1;
min-width: 0;
padding: 0 6px;
box-sizing: border-box;
}

#c_012 .card {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
overflow: hidden;
background-color: #ffffff;
border: 1px solid var(--color-navy);
border-radius: 9px;
box-sizing: border-box;
}

#c_012 .card h3 {
order: 1;
display: flex;
align-items: center;
justify-content: center;

margin: 0;
padding: 16px 18px;
box-sizing: border-box;
color: #ffffff;
background: var(--color-navy);
font-family: "Noto Serif JP", serif;
font-size: 22px;
font-weight: 700;
line-height: 1.4;
text-align: left;
}

#c_012 .profile-section {
order: 2;
padding: 18px 16px 4px;
text-align: center;
}

#c_012 .avatar {
display: block;
width: 94px;
height: 94px;
margin: 0 auto 10px;
border-radius: 50%;
object-fit: cover;
}

#c_012 .profile_name {
margin: 0;
color: var(--color-navy);
font-size: 13px;
font-weight: 700;
line-height: 1.5;
}

#c_012 .comment {
order: 3;
margin: 0;
padding: 8px 20px 0;
color: #333333;
font-size: 15px;
line-height: 1.65;
text-align: left;
}

#c_012 .comment:last-child {
margin-top: auto;
padding-top: 16px;
padding-bottom: 18px;
color: #555555;
font-size: 11px;
line-height: 1.5;
}

#c_012 .slick-custom-prev,
#c_012 .slick-custom-next {
position: absolute;
z-index: 5;
top: 46%;
width: 36px;
height: 36px;
padding: 0;
color: #ffffff;
background: var(--color-navy);
border: 0;
border-radius: 50%;
font-size: 24px;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
}

#c_012 .slick-custom-prev {
left: 12px;
}

#c_012 .slick-custom-next {
right: 12px;
}

#c_012 .slick-dots {
display: flex;
justify-content: center;
gap: 12px;
margin: 22px 0 0;
padding: 0;
list-style: none;
}

#c_012 .slick-dots li {
width: 13px;
height: 13px;
margin: 0;
}

#c_012 .slick-dots button {
display: block;
width: 13px;
height: 13px;
padding: 0;
overflow: hidden;
color: transparent;
background-color: var(--color-navy);
border: 0;
border-radius: 50%;
font-size: 0;
cursor: pointer;
}

#c_012 .slick-dots .slick-active button {
background-color: var(--color-red);
}

#c_012 .name{
font-weight: 600;
color: var(--color-navy);
}

@media screen and (max-width: 979px) {
#c_012 .card h3 {
padding: 12px;
font-size: 18px;
}

#c_012 .avatar {
width: 80px;
height: 80px;
}

#c_012 .profile_name {
font-size: 12px;
}

#c_012 .comment {
padding-right: 14px;
padding-left: 14px;
font-size: 14px;
}

#c_012 .slick-custom-prev {
left: 4px;
}

#c_012 .slick-custom-next {
right: 4px;
}

#c_012 .name{
font-size: 14px;
}

}
/* ============================
012 お客様の声
============================ */
#c_013{
padding: 8% 0 2% 0;
}
#c_013 .benefit {
width: 100%;
margin: 0 0 40px;
}

#c_013 .benefit_title {
position: relative;
width: 86%;
margin: 0;
padding: 14px 20px 14px calc(7% + 112px);
box-sizing: border-box;
color: #ffffff;
background: var(--gradient-navy);
font-family: "Noto Serif JP", serif;
font-size: 28px;
font-weight: 700;
line-height: 1.3;
text-align: left;

}

#c_013 .benefit_left .benefit_title {
margin-right: auto;
margin-left: 0;
}

#c_013 .benefit_right .benefit_title {
margin-right: 0;
margin-left: auto;
}

#c_013 .benefit_number {
position: absolute;
top: 50%;
left: 7%;
display: grid;
place-items: center;
width:80px;
aspect-ratio: 1;
transform: translateY(-50%);
color: var(--color-navy);
background-color: #ffffff;
border: 2px solid var(--color-navy);
border-radius: 50%;
box-sizing: border-box;
font-size: 48px;
font-weight: 600;
line-height: 1;
}

#c_013 dl{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}

#c_013 dt{
width: 70%;
text-align: left;
}

#c_013 dt p{
width: 96%;
margin: 0 auto;

}

#c_013 dd{
width: 30%;
}


#c_013 .ddimg{
margin: -80px auto 0;
position:relative;
z-index: 999;

}
#c_013 .ddimg02{
margin: -20px auto 0;
position:relative;
z-index: 999;
}
#c_013 .ddimg04{
margin: -40px auto 0;
position:relative;
z-index: 999;
}

#c_013 .dt_left{
margin: 4% 2% 6% 6%;
}

#c_013 .dt_right{
margin: 4% 6% 6% 2%
}


@media screen and (max-width: 480px) {
#c_013 .benefit {
margin-bottom: 28px;
}

#c_013 .benefit_title {
width: 92%;
padding-top: 12px;
padding-right: 10px;
padding-bottom: 12px;
padding-left: calc(4% + 82px);
font-size: 18px;
}

#c_013 .benefit_number {
left: 4%;
width: 72px;
font-size: 38px;
}

#c_013 .ddimg{
margin: -40px auto 0;
position:relative;
z-index: 999;

}
#c_013 .ddimg02{
margin: -20px auto 0;
position:relative;
z-index: 999;
}
#c_013 .ddimg04{
margin: 0 auto 0;
position:relative;
z-index: 999;
}



}


/* ============================
014 よくある質問
============================ */
#c_014{
padding:8% 0;
background: var(--gradient-navy);
}

#c_014 .faq_list{
width: 88%;
margin: 0 auto;
}

#c_014 .faq_item{
margin:0 auto 2%;
overflow: hidden;
background: #ffffff;
border-radius: 8px;
}

#c_014 .faq_item:last-child{
margin-bottom: 0;
}

#c_014 .faq_item summary{
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 3% 44px 3% 3%;
box-sizing: border-box;
background: #f0f8ff;
color: var(--color-navy);
cursor: pointer;
list-style: none;
text-align: left;
}

#c_014 .faq_item summary::-webkit-details-marker{
display: none;
}

#c_014 .faq_item summary::after{
content: "+";
position: absolute;
top: 50%;
right: 12px;
font-family: Arial, sans-serif;
font-size: 34px;
font-weight: 300;
line-height: 1;
transform: translateY(-50%);
}

#c_014 .faq_question{
font-family: "Noto Serif JP", serif;
font-size: 20px;
font-weight: 700;
line-height: 1.4;
}

#c_014 .faq_q,
#c_014 .faq_a{
display: grid;
flex: 0 0 24px;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
color: #ffffff;
font-family: Georgia, serif;
font-size: 17px;
font-weight: 700;
line-height: 1;
}

#c_014 .faq_q{background: var(--color-navy);}
#c_014 .faq_a{background: var(--color-red);}

#c_014 .faq_answer{
display: flex;
align-items: flex-start;
gap: 10px;
padding: 3%;
border-top: 1px solid var(--color-navy);
text-align: left;
}

#c_014 .faq_answer p{
margin: 0;
color: #333333;
font-size: 15px;
line-height: 1.6;
}

@media screen and (max-width: 480px){
#c_014{

}

#c_014 h2{
font-size: 24px;
}

#c_014 .faq_question{
font-size: 15px;
}

#c_014 .faq_answer p{
font-size: 14px;
}
}

/* ============================
015 
============================ */
#c_015 {
padding: 8% 0 6% 0 ;
background: url("../img/c015_bg.png") center right no-repeat;
background-size: 100%;
}

#c_015 p{
margin: 0 auto;
width: 80%;
font-weight: 600;
line-height: 2;
text-align: left;
}

/* ============================
016
============================ */
#c_016 {
padding: 8% 6%;
}

#c_016 .box {
padding: 4% 4%;
background-color: var(--color-navy-bg);
border: 1px solid var(--color-navy);
border-radius: 16px;
}

#c_016 h2 {
border-bottom: 2px solid var(--color-navy);
padding: 0 0 1% 0;
margin: 0 auto 6%;
}


#c_016 dl {
display: grid;
grid-template-columns: 25% 1fr;
column-gap: 16px;
row-gap: 4px;
width: 100%;
margin: 0;
box-sizing: border-box;

}

#c_016 dt {
margin: 0;
color: #ffffff;
font-size: 110%;
font-weight: 600;
text-align: center;
box-sizing: border-box;
background: var(--gradient-navy);
line-height: 1.4;
display: flex;
align-items: center;
justify-content: center;
}

#c_016 dd {

width: 100%;
min-width: 0;
margin: 0;
padding:4px 0 8px 0;
box-sizing: border-box;
text-align: left;
font-weight: 600;
}

@media screen and (max-width: 979px) {
#c_016 dt {font-size: 100%;}
}


/* ============================
   フッダー
============================ */

.footer{
width:100%;
margin:0 auto 0;
padding:50px 0;
font-size:14px;
text-align: center;
}

.footer a{
color: #333333;
font-size:14px;
}
.footer p{
color: #333333;
font-size:14px;
}
.footer a:hover{
color:#990033;
}




@media screen and (max-width: 979px) {
.footer{
padding:20px 0;
font-size:14px;
}
}


@media screen and (max-width: 979px) {
body {min-width: 100%;}
.max_w {
max-width: 100%;
margin: 0 auto;
}

.max_w90 {
width: 90%;
margin: 0 auto;
}

.max_w70 {
max-width:70%;
margin: 0 auto;
}


.max_w50 {
max-width:40%;
margin: 0 auto;
}

.wrapper {
padding:0;
}


}