@charset "utf-8";

/*-----スタイルシート　1910--------------------------------------------*/
/*HTML5 Doctor Reset Stylesheet*/

@import url("rest.css");

/*-------------------------------------------------*/
/*全体設定*/

:root{
--ac1:#1E286E;
--ac2:#FFE600;
--tx1:#000;
--f-not:"Noto Sans JP", sans-serif;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
/*--------------------*/

.sp_only { display:none!important;}
#wrapper {
width:100%;
font-family: var(--f-not);
font-size: 21px;
color: var(--tx1);
}
#contents {
width:100%;
margin:0 auto;
}
div,section {
justify-content: space-between;
flex-wrap: wrap;
}
p {
line-height: 1.5em;
letter-spacing: 0.06em;
}

/*-------------------------------------------------*/
/*ヘッダー*/
header{
width: 100%;
min-width: 1100px;
z-index: 50;
position: fixed;
display: flex;
justify-content: space-between;
background: var(--ac1);
}
header a {
display: block;
height: 90px;
}
header a:nth-of-type(1) {
}
header a:nth-of-type(1) img {
height: 84px;
margin: 2px 0 4px;
}
header a:nth-of-type(2) {
background: var(--ac2);
padding: 16px 30px;
font-weight: 800;
font-size: 24px;
color: var(--ac1);
text-align: center;
line-height: 1.2em;
}

/*--pagetop--------*/
.pagetop {
position: fixed;
padding: 20px 14px;
right: 10px;
bottom: -110px;
z-index: 101;
background: var(--ac2);
font-size: 18px;
text-align: center;
letter-spacing: 0.00em;
transition: 0.7s;
}
.pagetop.act {
bottom: 10px;
}

/*-------------------------------------------------*/
/*フッター*/

footer {
width: 100%;
min-width: 1100px;
text-align: center;
background: url("../images/foot.webp");
background-size: cover;
}
footer > div {
width: 1100px;
margin: 0 auto;
padding: 100px 0 20px;
background: rgba(255,255,255,0.8);
}
footer > div h2 {
font-size: 31px;
color: var(--ac1);
font-weight: 800;
margin-bottom: 60px;
line-height: 1.3em;
}
footer > div p {
width: 740px;
margin: 0 auto 80px;
}
.linkset {
width: 740px;
margin: 0 auto 80px;
display: flex;
}
.linkset a {
display: block;
background: var(--ac1);
background-image: linear-gradient(150deg, rgba(75, 83, 139, 1), rgba(120, 126, 168, 1) 20%, rgba(30, 40, 110, 1) 65%);
color: #fff;
text-align: center;
width: 340px;
padding: 15px 0;
border-radius: 25px;
}

#copyright {
font-size: 14px;
font-family:var(--f-ftu);
margin-top: 50px;
}



/*-------------------------------------------------*/
/*コンテンツ*/

/*--////　main_visual　////--*/
#main_visual{
width: 100%;
min-width: 1100px;
height:660px;
background: url("../images/main_bg.webp");
background-size: cover;
padding-top: 140px;
position: relative;
}
#main_visual::after{
position: absolute;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.4);
content: "";
top: 0;
left: 0;
z-index: 1;
}
#main_visual > div {
display: flex;
width: 1100px;
margin: 0 auto;
position: relative;
z-index: 2;
}
#main_visual > div img {
width: 450px;
margin-top: -10px;
}
#main_visual > div div {
width: 630px;
text-align: center;
}
#main_visual > div div h3 {
font-weight: 900;
padding: 10px 25px;
color: var(--ac1);
background: var(--ac2);
display: inline-block;
font-size: 30px;
transform: rotate(-3deg);
margin-bottom: 20px;
}
#main_visual > div div h2 {
font-size: 47px;
font-weight: 800;
line-height: 1.25em;
margin-bottom: 25px;
}
#main_visual > div div p {
margin-bottom: 35px;
}
#main_visual > div div p strong {
font-weight: 700;
}
#main_visual > div div a {
display: inline-block;
background: var(--ac1);
background-image: linear-gradient(150deg, rgba(75, 83, 139, 1), rgba(120, 126, 168, 1) 20%, rgba(30, 40, 110, 1) 65%);
color: #fff;
text-align: center;
width: 420px;
padding: 15px 0;
border-radius: 25px;
}



/*--////　dif　////--*/
#dif {
position: relative;
z-index: 3;
padding-bottom: 140px;
}

/*--dif_what--*/
.dif_what {
display: flex;
justify-content: center;
width: 1100px;
height: 250px;
background: url("../images/dif_waku.png");
background-size: cover;
margin: -70px auto 40px;
}
.dif_what h1 {
width: 730px;
font-size: 36px;
font-weight: 900;
margin-top: 62px;
line-height: 1.3em;
text-align: center;
color: var(--ac1);
}
.dif_what img {
width: 144px;
margin-top: -42px;
}
/*--dif_ans--*/
.dif_ans {
width: 1100px;
margin: 0 auto;
padding: 50px 0;
display: flex;
}
.dif_ans img {
width: 330px;
}
.dif_ans > div {
width: 720px;
}
.dif_ans > div h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}
.dif_ans > div h2 strong {
font-weight: 700;
position: relative;
}
.dif_ans > div h2 strong::after {
position: absolute;
z-index: -1;
content: "";
width: 100%;
height: 10px;
bottom: 2px;
left: 0;
background: var(--ac2);
}
.dif_ans > div p {

}

/*--cmp-table--*/
/* ベース */
.cmp-table {
width: 1100px;
margin: 0 auto 50px;
border-collapse: collapse;
font-size: 19px;
line-height: 1.6;
font-weight: 500;
}
.cmp-table caption {
text-align: center;
font-weight: 800;
padding: 12px 16px 20px;
color: var(--ac1);
font-size: 26px;
}
.cmp-table th,
.cmp-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--ac1);
vertical-align: top;
}
.cmp-table thead th {
background: #eef3ff;
font-weight: 800;
text-align: left;
}
.cmp-table .blank { background: none; width: 14rem; }
.cmp-table tbody th[scope="row"] {
background: #f9fbff;
font-weight: 800;
white-space: nowrap;
}
.cmp-table tbody th i {
color: #64BEC8;
margin-right: 5px;
}
.cmp-table  th:last-of-type,
.cmp-table  td:last-of-type{
color: var(--ac1);
font-weight: 700;
background: rgba(255,251,217,0.2);
}
.cmp-table  th:last-of-type{
background: rgba(226,231,242,0.95);
}
.cmp-table  td:last-of-type{
background: rgba(248,242,205,0.4);
}

/* 列幅（PC） */
.cmp-table .col-label { width: 20%; }
.cmp-table .col-a     { width: 40%; }
.cmp-table .col-b     { width: 40%; }

/* スマホ：カード化 */
@media (max-width: 768px) {
.cmp-table thead { 
/* 見出し行は隠して、カード内でdata-labelを見出しにする */
position: absolute;
left: -9999px;
top: -9999px;
}

.cmp-table,
.cmp-table tbody,
.cmp-table tr,
.cmp-table th[scope="row"],
.cmp-table td {
display: block;
width: 100%;
}

.cmp-table tr { 
border-bottom: 8px solid #f1f4f9;
padding: 8px 0;
}

/* 行ヘッダ（項目名）を上部に固定 */
.cmp-table tbody th[scope="row"] {
background: transparent;
border-bottom: none;
padding-bottom: 4px;
color: #334155;
}

/* 各セルの前に列ヘッダ名（data-label）を表示 */
.cmp-table td::before {
content: attr(data-label);
display: block;
font-size: 0.88em;
font-weight: 700;
margin-bottom: 4px;
color: #3b82f6; /* 見出し色（ブランド色に合わせて変更） */
}

.cmp-table td {
border: 1px solid #e8ecf3;
border-radius: 8px;
padding: 12px;
margin: 6px 0 10px;
background: #fff;
}
}

/*--dif_bun--*/
.dif_bun {
width: 830px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-weight: 500;
}

/*--////　voice　////--*/
#voice {
background: #a8d8e4;
padding: 0 0 100px;
}
#voice h2 {
width: 754px;
height: 122px;
background: url("../images/voc_waku.png");
background-size: cover;
text-align: center;
font-weight: 800;
padding: 32px 0 0;
color: var(--ac1);
font-size: 34px;
transform: translateY(-45px);
margin: 0 auto;
}
.voc_pce {
width: 1100px;
margin: 28px auto;
background: #fff;
border: var(--ac1) solid 3px;
padding: 50px;
display: flex;
}
.voc_pce:nth-of-type(2n) {
flex-flow: row-reverse;
}
.voc_pce div {
width: 280px;
text-align: center;
}
.voc_pce div h3 {
background: var(--ac2);
padding: 8px 0;
width: 240px;
margin: 0 auto;
border-radius: 20px;
font-weight: 700;
}
.voc_pce div img {
height: 200px;
margin-top: 20px;
margin-bottom: -30px;
}
.voc_pce p {
width: 670px;
}

/*--////　TOP5　////--*/
#five {
background: #4b538b;
}
#five h3 {
color: #fff;
text-align: center;
background: #4b538b;
padding: 50px 0 60px;
width: 260px;
margin: 0px auto -105px;
transform: translateY(-70px);
border-radius:130px 130px 0 0;
font-size: 26px;
font-weight: 600;
}
#five h3 span {
display: inline-block;
}
#five h3 span:nth-of-type(1) {
transform: rotate(-12deg);
}
#five h3 span:nth-of-type(2) {
transform: rotate(12deg);
}
#five h2 {
color: #fff;
text-align: center;
position: relative;
z-index: 2;
font-size: 42px;
font-weight: 800;
margin-bottom: 30px;
}

.five_block {
background: #fff066;
padding: 90px 0 150px;
position: relative;
}
.five_block ul {
width: 1100px;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap:40px;
flex-wrap: wrap;
}
.five_block ul li {
}
.five_block ul li a {
width: 340px;
background: #fff;
border-radius: 50px;
padding: 30px;
text-align: center;
border: 3px solid var(--ac1);
height: 100%;
display: flex;
align-items: center;
flex-flow: column;
justify-content: space-between;
transition: 0.1s ease-in-out;
}
.five_block ul li a:hover {
background: #d3ebf1;
}

.five_block ul a h4 {
font-size: 43px;
margin-bottom: 15px;
font-weight: 700;
color: var(--ac1);
}
.five_block ul a p {
margin-bottom: 15px;
font-weight: 600;
font-size: 24px;
line-height: 1.3em;
}
.five_block ul a img {
width: 40px;
transition: 0.17s ease-in-out;
}
.five_block ul li a:hover img {
transform: translateY(12px);
}
.five_block > img {
position: absolute;
bottom: 150px;
left: 50%;
transform: translateX(-50%);
width: 300px;
}

/*--////　top5-中身の共通　////--*/
div[id^="conce"]{
margin:-20px 0 20px; 
}

#f1,#f3,#f5 {
padding-bottom: 150px;
}
#f2,#f4 {
padding-bottom: 150px;
background: #dbeff4;
}
#f1 h3,#f2 h3,#f3 h3,#f4 h3,#f5 h3 {
color: var(--ac1);
text-align: center;
background: #fff;
padding: 50px 0 60px;
width: 260px;
margin: 0px auto -105px;
transform: translateY(-70px);
border-radius:130px 130px 0 0;
font-size: 80px;
font-weight: 600;
}
#f1 h2,#f2 h2,#f3 h2,#f4 h2,#f5 h2 {
color: var(--ac1);
text-align: center;
position: relative;
z-index: 2;
font-size: 31px;
width: 1100px;
font-weight: 800;
margin: 0 auto 20px;
padding-bottom: 30px;
line-height: 1.3em;
border-bottom: 2px var(--ac1) solid;
}

#f2 h3,#f4 h3 {
color: var(--ac1);
background: #dbeff4;
}
#f2 h2,#f4 h2 {
color: var(--ac1);
}
.fiv_man {
width: 1100px;
margin: 0 auto 30px;
display: flex;
align-items: center;
}
.fiv_man img {
width: 210px;
margin: 0 20px;
}
.fiv_man p {
width: 780px;
}
.marutit {
width: 1100px;
padding: 18px 30px;
margin: 80px auto 50px;
border-radius: 32px;
background: #fff280;
position: relative;
font-weight: 800;
}
.marutit span {
position: absolute;
right: 30px;
font-size: 16px;
bottom: 17px;
font-weight: 500;
}

/*--////　top5-01　////--*/
.f1_grh {
width: 960px;
margin: 0 auto;
display: flex;
}
.f1_grh img {
width: 440px;
}

/*--////　top5-02　////--*/


#f2 .marutit {
background: #fff;
text-align: center;
}
#f2 table{
width: 1100px;
margin: 50px auto 30px;
font-weight: 600;
}
#f2 table tr{
display: block;
margin-bottom: 30px;
}
#f2 table th{
background: var(--ac2);
padding: 8px 0;
text-align: center;
border-radius: 19px;
width: 200px;
}
#f2 table tr:first-of-type th{
background: var(--ac1);
color: #fff;
}
#f2 table td:first-of-type{
width: 250px;
padding: 0 20px;
}
#f2 table td:last-of-type{
width: 650px;
}
#f2 table td.co2{
width: 900px;
}
#f2 table td.co3{
width: 1100px;
text-align: center;
color: var(--ac1);
font-weight: 800;
position: relative;
padding: 15px 0;
font-size: 27px;
}
#f2 table td.co3::before{
content: "";
background: var(--ac1);
height: 3px;
width: calc(50% - 2.3em - 20px);
position: absolute;
left: 0;
top: 49%;
}
#f2 table td.co3::after{
content: "";
background: var(--ac1);
height: 3px;
width: calc(50% - 2.3em - 20px);
position: absolute;
right: 0;
top: 49%;
}
#f2 > p{
text-align: center;
font-weight: 600;
font-size: 25px;
}

/*--////　top5-03　////--*/

.mochi {
width: 1100px;
display: flex;
margin: 0 auto;
}
.mochi div {
width: 520px;
}
.mochi div p {
}
.mochi div ul {
margin: 15px 0;
line-height: 1.8em;
font-weight: 600;
}
.mochi div ul li {
}
.mochi div ul li i {
color: #64bec8;
margin-right: 5px;
}
.mochi div a {
display: block;
background: var(--ac1);
background-image: linear-gradient(150deg, rgba(75, 83, 139, 1), rgba(120, 126, 168, 1) 20%, rgba(30, 40, 110, 1) 65%);
color: #fff;
text-align: center;
width: 340px;
padding: 15px 0;
border-radius: 25px;
margin: 20px auto 0;
position: relative;
}
.mochi div a::after {
position: absolute;
content: "";
width: 11px;
height: 11px;
border: solid #fff;
border-width: 2px 2px 0 0;
transform: rotate(45deg);
top: 21px;
right: 20px;
}
.mochi img {
width: 380px;
margin: 0 70px;
}
.setsu {
}
.setsu ul {
display: flex;
justify-content: center;
gap:80px;
margin-bottom: 40px;
}
.setsu ul li {
width: 240px;
text-align: center;
}
.setsu ul li img {
width: 240px;
background: var(--ac1);
border-radius: 120px;
margin-bottom: 15px;
}
.setsu > p {
text-align: center;
}

/*--////　top5-04　////--*/


#f4 ul {
width: 1100px;
margin: 50px auto 40px;
display: flex;
flex-wrap: wrap;
gap:20px;
}
#f4 ul li {
width: 100%;
padding: 21px 35px;
background: #fff;
font-size: 24px;
font-weight: 700;
}
#f4 ul li i {
color: #64bec8;
margin-right: 12px;
font-size: 26px;
display: inline-block;
transform: translateY(2px);
}
#f4 > p {
text-align: center;
margin-bottom: 70px;
}
.nintei {
width: 1100px;
margin: 0 auto;
display: flex;
}
.nintei h4 {
width: 300px;
text-align: center;
padding: 20px;
line-height: 1.4em;
font-size: 23px;
position: relative;
font-weight: 700;
}
.nintei h4::before,
.nintei h4::after{
width: 55px;
height: 154px;
content: "";
position: absolute;
top: 0;
}
.nintei h4::before {
left: 0;
background: url("../images/fiv4_kwakuL.png");
background-size: cover;
}
.nintei h4::after {
right: 0;
background: url("../images/fiv4_kwakuR.png");
background-size: cover;
}
.nintei p {
width: 750px;
}

/*--////　top5-05　////--*/

#f5 a {
display: block;
background: var(--ac1);
background-image: linear-gradient(150deg, rgba(75, 83, 139, 1), rgba(120, 126, 168, 1) 20%, rgba(30, 40, 110, 1) 65%);
color: #fff;
text-align: center;
width: 380px;
padding: 15px 0;
border-radius: 25px;
margin: -20px auto 0;
position: relative;
}
#f5 a::after {
position: absolute;
content: "";
width: 11px;
height: 11px;
border: solid #fff;
border-width: 2px 2px 0 0;
transform: rotate(45deg);
top: 21px;
right: 20px;
}