@charset "utf-8";

/*===============================
reset & new role
=================================*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Nunito+Sans:wght@200;700&display=swap');
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box
}

* {
font-family: "Noto Sans JP","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-display: swap;
/* outline: #29b12c 1px outset; */
scroll-behavior: smooth;
font-feature-settings: "palt";
}

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%;
background:transparent;
}

a {
color: #00a5c7;
}

a:hover,
a:active {
text-decoration: unset;
}

a img{
border:0;
}

img{
max-width: 100%;
height: auto;
width :auto;
backface-visibility: hidden;
}

::marker {
color: #004E98;
}


/*===============================
wrapper, box, content
=================================*/

body,html {
width:100%;
box-sizing: border-box;
color: #000;
font-size: 16px;
font-weight: 400;
line-height : 1.75;
letter-spacing: 0.05em;
}

.site-wrap {
min-width: 1180px;
margin: 0 auto;
padding: 0;
background-color: #fff;
border-top: 10px solid #004E98;
}

.content-wrap {
display: flex;
column-gap: 0.5em;
justify-content: space-between;
max-width: 1080px;
margin: 0 auto;
padding: 0;
}

.main {
width: 100%;
}

.container {
min-height: 600px;
}

/*===============================
header
=================================*/
.header {
padding: 1em;
text-align: center;
}


/*===============================
footer
=================================*/
.footer {
display: flex;
justify-content: space-between;
margin-top: 4rem;
padding-top: 1.5rem;
border-top: 1px solid #D3D3D3;
}

.footer > div {
width: 350px;
box-sizing: content-box;
padding: 0 2rem;
color: #004E98;
font-weight: bold;
letter-spacing: 0;
}

.footer .office {
border-right: 1px solid #D3D3D3;
}

.footer .heading {
text-align: center;
background-color: #E6E6E6;
font-size: 20px;
line-height: 36px;
}

.footer .name {
padding: 0.5em 0;
font-size: 18px;
}

.footer .address {
font-size: 14px;
}

.copyright {
margin-top: 2rem;
padding: 0.5em 1em;
background-color: #004E98;
color: #FFF;
font-size: 14px;
text-align: center;
}

/*===============================
nav
=================================*/

.nav_list {
width: 250px;
list-style: none;
}

.nav_item {
background: linear-gradient(103deg, #0765BE 0%, #68DBE5 100%);
border-radius: 5px;
transition: 0.5s all;
}

.nav_item a {
position: relative;
display: flex;
align-items: center;
min-height: 56px;
margin-bottom: 0.5em;
padding: 0.5em 1em;
background: url(../images/nav_bg.png) no-repeat top 0 right 1em;
color: #FFF;
font-size: 18px;
font-weight: bold;
line-height: 23px;
}

.nav_item.outlink a::after {
position: absolute;
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
content: '';
width: 1rem;
height: 1rem;
background: url(../images/icon_outlink.svg) no-repeat center / 100%;
}


.nav_item.new a::after {
position: absolute;
bottom: 0.2rem;
right: 0.75rem;
transform: translateY(-50%);
content: 'NEW!';
text-align: center;
width: 2.2rem;
height: 1.5rem;
background-color: #d34b4b;
color: #fff;
font-size: 9px;
line-height: 1.5rem;
}

.nav_item:hover,
.nav_item:focus,
.nav_item:active,
.nav_item.active {
background: linear-gradient(103deg, #E56749 0%, #E5C062 79%, #E5D768 100%);
}



/*===============================
text
=================================*/

.indent1em {
text-indent: -1em;
margin-left: 1em;
}

.indent2em {
text-indent: -2em;
margin-left: 2em;
}

.bold{
font-weight: 700;
}

.text-center {
text-align: center;
}

.text-right {
text-align: right;
}

.text-left {
text-align: left;
}

.text-justify {
text-align: justify;
}

.line-through-red {
color: #d34b4b;
text-decoration: line-through;
}

.line-through-red span {
color: #000;
}

.text-red {
color: #d34b4b;
}

.uchikeshi {
position: relative;
}
.uchikeshi::after {
content: "";
display: inline-block;
background: #d34b4b;
width: 100%;
height: 3px;
z-index: 2;
position: absolute;
top: 48%;
left: 0;
}


.c-h1 {
display: block;
min-height: 100px;
margin-bottom: 1em;
padding: 0.7em 1em;
color: #fff;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.15em;
background-color: #004E98;
}

.c-h2 {
display: block;
margin: 0 0 0.7em;
padding: 0.5em 0.75em;
color: #004E98;
font-size: 1.6rem;
letter-spacing: 0.1em;
background-color: #eee;
border-left: 0.5em solid #004E98;
}

.c-h3 {
display: block;
margin: 0 0 20px;
padding: 0.5em 0.75em;
color: #fff;
font-size: 1.3rem;
letter-spacing: 0.1em;
background: #0765BE;
background: linear-gradient(90deg, #1d60d2 0%, #40a7c6 69%, rgb(100, 197, 224) 100%);
}

.c-h4-c {
padding: 0.5em 0 0.3em;
color: #0765BE;
letter-spacing: 0.1em;
position: relative;
font-weight: bold;
}

.c-h4 {
margin: 0 0 15px;
padding: 0.5em 0.75em;
color: #444;
font-size: 1.2rem;
letter-spacing: 0.1em;
border-bottom: solid 3px #0765BE;
position: relative;
}

.c-h4:after {
position: absolute;
left: 0px;
content: " ";
display: block;
border-bottom: solid 3px #e59449;
bottom: -3px;
width: 10%;
}

.c-h5 {
margin: 0 0 0.3rem;
font-size: 1.2rem;
font-weight: bold;
color: #004E98;
}

.c-h5::before {
content: '◆';
margin-right: 0.5rem;
font-size: 1rem;
}

.comingsoon {
width: 200px;
margin: 100px auto 80vh;
padding: 20px;
text-align: center;
background-color: #fff;
border: 3px solid #00a5c7;
}

ol.decimal-leading {
list-style-type: decimal-leading-zero;
}


/*===============================
btn
=================================*/

.btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 400px;
min-height: 90px;
margin: 20px auto;
padding: 10px 25px;
color: #FFF;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.2em;
background: linear-gradient(90deg, rgba(229,103,73,1) 0%, rgba(236,160,63,1) 100%);
border: 3px solid #E56749;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(206, 145, 33, 0.2);
transition: all 0.5s ease;
}

.btn:active,
.btn:focus,
.btn:hover {
text-decoration: none;
background: linear-gradient(90deg, #FFF 0%, #FFF 100%);
color: #E56749;
transition: all 0.5s ease;
}

.disabled {
pointer-events: none;
}

.btn .icon-dlbtn {
stroke:#FFF;
fill: #FFF;
transition: all 0.5s ease;
}

.btn:active .icon-dlbtn,
.btn:focus .icon-dlbtn,
.btn:hover .icon-dlbtn {
stroke:#E56749;
fill: #E56749;
}

.btn.btn02 {
background: linear-gradient(90deg, #13c196 0%, rgb(26, 207, 89) 100%);
border: 3px solid #12ac86;
box-shadow: 0 10px 10px rgba(206, 145, 33, 0.2);
}

.btn.btn02:active,
.btn.btn02:focus,
.btn.btn02:hover {
text-decoration: none;
background: linear-gradient(90deg, #FFF 0%, #FFF 100%);
color: #12ac86;
}

.btn.disabled {
border: 3px solid #444444;
background: #898989;
}




/*===============================
table
=================================*/



/*===============================
box
=================================*/

.box-red {
border: 2px solid #d34b4b;
padding: 1em 0.75em;
}

.box-red02 {
border: 2px solid #d34b4b;
padding: 1em 0.75em;
background-color: #feebeb;
}

.box-yellow {
padding: 1em 1.5em;
background-color: #fcf9da;
}