@charset "utf-8";

body {
font-family:'roboto',"Hiragino Kaku Gothic ProN",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
font-size: 1.6rem;/* 1.4rem=14px */
}

:root {
--white:#fff !important;
--black:#434343 !important;
--blue: #056FD2 !important;
--hoverblue: #2E99FD !important;
--lightblue: #F2F6FD !important;
--deepgray:#434343 !important;
--mdlgray:#7C7D81 !important;
--lightgray: #F6F6F6 !important;
--redorange:#E34F28 !important;
--lightorange: #F67662 !important;

--rounded-s: 10px !important;
--rounded-m: 15px !important;
--rounded-l: 50rem !important;
}

@media (max-width: 991.98px) {
.top-btn {
bottom:125px;
right: 18px;
}
}

/*------------------------------------
text
--------------------------------------*/
h2 {font-size: 2.6rem;}
h3 {font-size: 2.2rem;}
h4 {font-size: 1.8rem;}
.text-s {font-size:1.4rem}

@media (min-width: 768px) {
h2 {font-size: 3rem;}
h3 {font-size: 2.5rem;}
h4 {font-size: 2rem;}
}

.text-highlight {
font-size: 1.8rem;
font-weight: bolder;
}

.t-blue {color: var(--blue);}

/*※付きリスト*/
ul.bikou {
padding-left: 0;
counter-reset: note;

}
ul.bikou > li {
list-style-position:inside;
text-indent: -3rem;
padding-left: 3rem;
counter-increment: note;
}
ul.bikou > li::before {
content: "※" counter(note, decimal);
margin-right: .8rem;
}

/*チェックマークリスト*/
.b-check-mark {padding-left: 0;}
.b-check-mark > li {
position: relative;
list-style-position:inside;
padding-left: 3.2rem;
}
.b-check-mark > li::before {
position: absolute;
top: 0;
left: 0;
font-family: 'icomoon';
content: '\ea2a';
font-size: 2.3rem;
color: var(--blue);
line-height: 1.2;
}

.attention-title::before {
font-size: 1.1em;
}


/*------------------------------------
kv
--------------------------------------*/
.kv {
/*background:image-set(url("../images/bg-top.webp") type("image/webp"),
url("../images/bg-top.jpg") type("image/jpg")) center center no-repeat #e4f5f7;
background-size:cover;*/
width: 100%;
overflow: hidden;
position: relative;
}

.kv::before {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(100deg,rgba(255, 242, 254, 1) 0%, rgba(233, 240, 245, 1) 50%, rgba(203, 227, 247, 1) 100%);
animation: Grad 5s infinite  alternate;
z-index: -2;
}

@keyframes Grad {
0% {
-webkit-filter: hue-rotate(100deg);
filter: hue-rotate(100deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}

.kv::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/bg-over2.png) repeat;
mix-blend-mode: normal; 
opacity: .9;
z-index: -1;
}


@media (min-width: 768px) {
.top-kv {
padding: 6rem 1.5rem;
}
.page-kv {
position: relative;
display: flex;
align-items: center;
height: 300px;
}
.page-kv img {
position: relative;
z-index: 2;
max-width: 280px;
}
.page-kv.p2 img {
max-width: 315px;
}
.page-kv.p3 img {
max-width: 335px;
}

.page-kv::before {
position: absolute;
display: inline-block;
content:"";
background:image-set(url("../images/p1_top-ill.webp") type("image/webp"),
url("../images/p1_top-ill.png") type("image/png"))  center right no-repeat;
background-size: contain;
top: 50%;
right: -9%;
width: 430px;
height: 300px;
transform: translateY(-50%);
z-index: 1;
}
.page-kv.p2::before,
.page-kv.p3::before {
background:image-set(url("../images/p2_top-ill.webp") type("image/webp"),
url("../images/p2_top-ill.png") type("image/png"))  bottom 3rem right no-repeat;
background-size: contain;
}
}

@media (min-width: 992px) {
.top-kv {
padding: 8rem 1.5rem;
}
.page-kv {
height: 380px;
}
.page-kv img {
max-width: 300px;
}
.page-kv.p2 img {
max-width: 340px;
}
.page-kv.p3 img {
max-width: 370px;
}
.page-kv::before {
background:image-set(url("../images/p1_top-ill.webp") type("image/webp"),
url("../images/p1_top-ill.png") type("image/png"))  center right no-repeat;
background-size: contain;
right: -2%;
width: 460px;
height: 380px;
}
}

@media (min-width: 1200px) {
.page-kv.p3 img {
max-width: 560px;
}
}

/*------------------------------------
contents
--------------------------------------*/
.gray-box {
background: var(--lightgray);
border-radius: var(--rounded-m);
padding: 2rem 1.5rem;
}

.blue-box {
background: var(--lightblue);
border-radius: var(--rounded-m);
padding: 2rem 1.5rem;
}

.wappen {
border-radius: var(--rounded-l);
background: var(--lightorange);
font-size: 1.5rem;
color: var(--white);
font-weight: bolder;
white-space: nowrap;
line-height: 1.2;
padding: .5rem 1.5rem;
margin-right: 1rem;
}
@media (max-width: 767.98px) {
.wappen {
align-self: flex-start;
}
}

/*--- top page ---*/
.b-fukidashi {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--white);
padding: 1rem;
border-radius: var(--rounded-s);
margin-bottom: 1.5rem;
}
.b-fukidashi::before {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
width: 15px;
height: 15px;
box-sizing: border-box;
background: var(--blue);
rotate: 135deg;
translate: -50%;
}
.trend-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap:15px 0;
}

@media (min-width: 768px) {
.trend-item {
flex-direction: row;
gap:0 15px;
}
}
.trend-item_inner {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 15px;
text-align: center;
font-size: 1.4rem;
font-weight: bolder;
}
.trend-item_img {
display: flex;
justify-content: center;
align-items: center;
background: var(--white);
border-radius: var(--rounded-m);
padding: 1.5rem;
width: 100%;
height: 180px;
}

/*--- ifd・ifo・repeat 比較表 ---*/
.order-comp {
border:2px solid var(--mdlgray);
border-radius: var(--rounded-m);
}
.order-comp .bb-1 {
border-bottom: 1px solid var(--mdlgray);
} 
/*ifd・ifo*/
.order-comp .row {
margin: 0;
}
.order-comp .row > div {
padding: 0 !important;
border-radius: 15px 15px 0 0;
}
.order-comp h4 {
padding: 1.5rem 1rem;
background: var(--lightgray);
border-bottom: 1px solid var(--mdlgray);
text-align: center;
margin-bottom: 0;
}
.order-comp .row > div:first-of-type h4 {
border-radius: 13px 13px 0 0;
}
.order-comp .row > div:nth-of-type(2) h4 {
border-radius: 0;
}

@media (min-width: 768px) {
.order-comp .br-md-1 {
border-right: 1px solid var(--mdlgray);
} 
.order-comp .bb-md-0 {
border-bottom: none;
}
.order-comp .row > div:first-of-type {
border-radius: 15px 0 0 0;
}
.order-comp .row > div:nth-of-type(2) {
border-radius: 0 15px 0 0;
}
.order-comp .row > div:first-of-type h4 {
border-radius: 13px 0 0 0;
}
.order-comp .row > div:nth-of-type(2) h4 {
border-radius: 0 13px 0 0;
}
}

.order-comp h3 {
padding: 1.5rem 1rem;
background: var(--blue);
text-align: center;
color: var(--white);
border-bottom: 1px solid var(--mdlgray);
border-radius: 13px 13px 0 0;
margin-bottom: 0;
}

/*--- feature-sec ---*/
.feature-sec {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
align-items: stretch;
margin: auto 3rem 3rem;
}

.feature-sec-inner {
flex: 1 1 46%;
display: flex;
min-width: 0;
}

.feature-sec-inner > .blue-box {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}

@media (min-width: 768px) {
.feature-sec-inner {
flex: 0 0 46%;
}
}

/*--- p1 ---*/
h2.label-ttl {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 15px;
margin-bottom: 1.5rem;
}

.label-ttl span {
position: relative;
display: inline-block;
content: "";
width: 70px;
height: 70px;
background: var(--blue);
border-radius: var(--rounded-l);
}

.label-ttl span::before {
position: absolute;
content: "";
background: url(../images/1-a.svg) no-repeat;
top: 50%;
left: 50%;
width: 50px;
height: 35px;
transform: translate(-50%, -50%);
}

.label-ttl.lblb span::before {
background: url(../images/1-b.svg) no-repeat;
height: 31px;
}
.label-ttl.lblc span::before {
background: url(../images/1-c.svg) no-repeat;
top: 53%;
height: 34px;
}


/*--- comp-sec ---*/
.comp-sec {
align-items: stretch;
}

.comp-sec > div {
display: flex;
flex-direction: column;
position: relative;
}

.comp-sec-img {
position: absolute;
bottom: 0;
right: 5px;
}

.comp-sec .gray-box {
display: flex;
flex: 1;
margin-bottom: 130px;
}



/*------------------------------------
button link
--------------------------------------*/
/*--- menu area ---*/
.content-navarea {
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 50;
}
.button-list {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}

@media (max-width: 991.98px) {
.content-navarea {
display: flex;
flex-direction: column;
z-index: 1020;
}
.button-list {
box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.15);
}
}

@media (min-width: 992px) {
.content-navarea {
position: sticky;
align-self: flex-start;
bottom: auto;
top: calc(55px + 1rem);
}
.button-list {
gap: 1rem 0;
}
}

/*背景*/
.nav-backdrop {
position: fixed;
top: 40px; 
left: 0; 
right: 0; 
bottom: 0;
background: rgba(0,0,0,.4);
opacity: 0; 
pointer-events: none;
transition: opacity .1s ease;
z-index: 90; 
}
body.nav-open {overflow: hidden;}
body:has(#content-nav.show) .nav-backdrop {
opacity: 1; 
pointer-events: auto;
}
body:has(#content-nav.show){ overflow: hidden; }

/*--- pc menu ---*/
a.button-b-line {
position: relative;
background: #fff;
border-bottom: 1px solid var(--blue);
width: 100%;
padding: 1.45rem .5rem;
text-align: center;
font-size: 1.5rem;
color: var(--blue);
transition: .2s;
}
a.button-b-line::after {
display: inline-block;
position: absolute;
font-family: 'icomoon';
font-size: 1.5rem;
font-weight: normal;
content: "\e912";
color: var(--blue);
transform: rotate(90deg);
margin: auto;
top: 0;
bottom: 0;
height: 1em;
right: .8rem;
transition: .2s;
}
a.button-b-line.active {
background: #def0ff;
}

@media (max-width: 991.98px) {
a.button-b-line:last-of-type {
border-bottom: 0;
}
}

@media (min-width: 992px) {
a.button-b-line {
border: 2px solid var(--blue);
border-radius: 50rem;
padding: 1.45rem .5rem;
font-size: 1.5rem;
}
a.button-b-line:hover,
a.button-b-line.active:hover {
background: var(--blue);
color: var(--white);
transition: .2s;
}
a.button-b-line:hover::after,
a.button-b-line.active:hover::after {
color: var(--white);
}
}

/*--- sp menu btn ---*/
.sp-trigger {
position: fixed;
background: var(--blue);
border-radius: var(--rounded-s);
box-shadow: 0 -3px 5px rgba(0, 0, 0, .2),
-2px 3px 5px rgba(0, 0, 0, .2);
color: var(--white);
font-size: 1rem;
right: 15px;
bottom: 45px;
width: 60px;
height: 60px;
padding:39px 3px 5px;
z-index: 1020;
}
.sp-trigger::before {
position: absolute;
content: "";
background: url(../images/icon_spmenu.svg) no-repeat;
top: 12px;
left: 50%;
width: 28px;
height: 25px;
transform: translateX(-50%);
}
.sp-trigger:active,
.sp-trigger:focus {
color: var(--white);
}

.nav-close {
position: relative;
display: inline-block;
align-self: flex-end;
width: 50px;
height: 50px;
background: var(--blue);
border: 0;
border-radius: var(--rounded-s) var(--rounded-s) 0 0;
}
.nav-close::before {
position: absolute;
content: "";
background: url(../images/icon-close.svg) no-repeat;
top: 12px;
left: 50%;
width: 26px;
height: 26px;
transform: translateX(-50%);
}

/*--- inner link ---*/
a.link-blue-arw {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 1.5rem 4rem;
font-size: 1.8rem;
font-weight: bolder;
line-height: 1.8;
color: var(--blue);
transition: .2s;
}

a.link-blue-arw span {
display: inline-block;
position: relative;
background:var(--blue);
width: 34px;
height: 34px;
border-radius: 50%;
line-height: 1;
transition: .2s;
}

a.link-blue-arw span::after {
display: inline-block;
position: absolute;
font-family: 'icomoon';
font-size: 1.8rem;
font-weight: normal;
content: "\e912";
color: var(--white);
top: 50%;
left: 50%;
transform: rotate(90deg) translate(-50%, 50%);
transition: .2s;
}

a.link-blue-arw:hover {
color: var(--hoverblue);
}
a.link-blue-arw:hover span::after {
color: var(--hoverblue);
}
a.link-blue-arw:hover span {
background: none;
border: 2px solid var(--hoverblue);
}

@media (max-width: 498px) {
a.link-blue-arw {
padding: 1.5rem 0;
font-size: 1.5rem;
gap: 15px;
}
a.link-blue-arw span {
width: 32px;
height: 32px;
}
}

/*--- page btn ---*/
a.button-blk {
position: relative;
background: var(--black);
border: 2px solid var(--black);
border-radius: 50rem;
width: 100%;
max-width: 450px;
padding: 1.45rem .5rem;
text-align: center;
font-size: 1.5rem;
color: var(--white);
transition: .2s;
}
a.button-blk::after {
display: inline-block;
position: absolute;
font-family: 'icomoon';
font-size: 1.4rem;
font-weight: normal;
content: "\e912";
color: var(--white);
transform: rotate(90deg);
margin: auto;
top: 0;
bottom: 0;
height: 1em;
right: .8rem;
transition: .2s;
}
a.button-blk:hover,
a.button-blk:active {
background: var(--white);
color: var(--black);
transition: .2s;
}
a.button-blk:hover::after,
a.button-blk:active::after {
color: var(--black);
}

a.button-blk.l2 {
line-height: 1.2;
padding: .85rem .5rem;
}
a.button-blk.l2 span {
font-size: .875em;
}


@media (min-width: 768px) {
a.button-blk {
padding: 1.45rem .5rem;
font-size: 1.6rem;
}
a.button-blk::after {
font-size: 1.6rem;
}
}