@charset "utf-8";

/* スタイルシート
作成者：Hirama Inc.
作成日：R5.8.24
-------------------------------------------------------------------------------------*/

.home {}

.home #mainVisual {
margin-top: 60px;
position: relative;
}

.home #mainVisual .outer {
width: 100%;
/*max-width: 1300px;*/
height: 100%;
margin: auto;
padding: 0;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}

@media only screen and (min-width: 1351px){
.home #mainVisual .outer {
max-width: 1300px;
}
}

.home #mainVisual .inner {
position: relative;
padding: 0 2rem;
height: 100%;
display: flex;
align-items: center;
}

.home #mainVisual .inner h2{
height: 100%;
display: flex;
align-items: center;
}

.home #mainVisual .inner h2 img{
width: auto;
}

@media only screen and (min-width: 481px){
.home #mainVisual .inner h2 img{
height: 85%;
}
}

@media only screen and (max-width: 480px){
.home #mainVisual .inner h2 img{
height: 80%;
}
}


/*************************************************************************************
**************************************************************************************

main

**************************************************************************************
**************************************************************************************/

.home #main {}

.home #main .block {
position: relative;
}


.home #main .outer {
width: 100%;
/*max-width: 1300px;*/
height: 100%;
margin: auto;
padding: 0;
}

@media only screen and (min-width: 1351px){
.home #main .outer {
max-width: 1300px;
}
}

.home #main .inner {
height: 100%;
}

@media only screen  and (max-width: 1350px){
.home #main .inner {
padding: 0 2rem;
}
}

#main .ttl {
font-weight: bold;
letter-spacing: 0.12em;
}

@media only screen  and (min-width: 701px){
#main .ttl {
font-size: 1.9rem;
}
}

@media only screen  and (min-width: 481px)  and (max-width: 700px){
#main .ttl {
font-size: 2.2rem;
}
}

@media only screen  and (max-width:480px){
#main .ttl {
font-size: 1.6rem;
}
}

#main .nextpage {
display: flex;
justify-content: center;
}

#main .nextpage a {
font-weight: bold;
width: 100%;
}

@media only screen  and (min-width:481px){
#main .nextpage a {
height: 50px;
max-width: 350px;
}
}

@media only screen  and (max-width:480px){
#main .nextpage a {
height: 40px;
}
}

#main table  {
width: 100%;
}


/*************************************************************************************

pr

**************************************************************************************/

.home #main section#pr {}

.home #main section#pr .block {
padding: 4rem 0;
background-image: 
linear-gradient(to bottom,  rgba(9,74,151,0.9) 0%,rgba(9,74,151,0.3) 30%,transparent 100%),
linear-gradient(to top,  rgba(9,74,151,0.9) 0%,rgba(9,74,151,0.3) 30%,transparent 100%),
url(../images/home_s01_bg.jpg);
background-position: center top,center bottom,center center;
background-repeat: no-repeat;
background-size: cover;
}

.home #main section#pr .block h3 {
max-width: 80%;
margin: 0 auto;
}

.home #main section#pr .block .separator {
margin-top: 2rem;
display: grid;
gap:2rem;
}

@media only screen and (min-width: 551px){
.home #main section#pr .block .separator {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}

@media only screen and (max-width: 550px){
.home #main section#pr .block .separator {
 grid-template-columns: repeat( 2 , 1fr); 
}
}

.home #main section#pr .block .separator .item {
position: relative;
background-color: #FFF;
border-radius: 10px;
}

.home #main section#pr .block .separator .item:before {
content: "";
display: block;
padding-top: 100%;
}

.home #main section#pr .block .separator .item_inner{
width: 100%;
/*height: 100%;*/
z-index: 1;
position: absolute;
top: 32%;
left: 50%;
transform: translate(-50%, -32%);
display: flex;
flex-direction: column;
align-items: center;
}

@media only screen and (min-width: 701px) and (max-width: 1000px){
.home #main section#pr .block .separator .item_inner{
top: 25%;
transform: translate(-50%, -25%);
}
}

.home #main section#pr .block .separator .item .photo  {
text-align: center;
min-height: 70%;
}

.home #main section#pr .block .separator .item .photo img  {
display: inline;
}

@media only screen and (min-width: 1001px){
.home #main section#pr .block .separator .item .photo img  {
/*width: 60%;
height: 60%;*/
width: 8rem;
height: 8rem;
}
}

@media only screen and (min-width: 701px) and (max-width: 1000px){
.home #main section#pr .block .separator .item .photo img  {
/*width: 60%;
height: 60%;*/
width: 5.5rem;
height: 5.5rem;
}
}

@media only screen and (min-width: 551px) and (max-width: 700px){
.home #main section#pr .block .separator .item .photo img  {
/*width: 60%;
height: 60%;*/
width: 5rem;
height: 5rem;
}
}

@media only screen and (min-width: 481px) and (max-width: 550px){
.home #main section#pr .block .separator .item .photo img  {
/*width: 60%;
height: 60%;*/
width: 13rem;
height: 13rem;
}
}

@media only screen and (max-width: 480px){
.home #main section#pr .block .separator .item .photo img  {
/*width: 60%;
height: 60%;*/
width: 5.5rem;
height: 5.5rem;
}
}

.home #main section#pr .block .separator .item .text {
font-weight: bold;
line-height: 1.2;
letter-spacing: .04em;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space:nowrap;
}

@media only screen and (min-width: 1001px){
.home #main section#pr .block .separator .item .text {
font-size: 1.15rem;
top: 75%;
}
}

@media only screen and (min-width: 701px) and (max-width: 1000px){
.home #main section#pr .block .separator .item .text {
font-size: .9rem;
top: 72%;
}
}

@media only screen and (min-width: 551px) and (max-width: 700px){
.home #main section#pr .block .separator .item .text {
font-size: 1.05rem;
top: 70%;
}
}

@media only screen and (min-width: 481px) and (max-width: 550px){
.home #main section#pr .block .separator .item .text {
font-size: 1.5rem;
top: 78%;
}
}

@media only screen and (min-width: 401px) and (max-width: 480px){
.home #main section#pr .block .separator .item .text {
font-size: 1.0rem;
top: 76%;
}
}

@media only screen and (max-width: 400px){
.home #main section#pr .block .separator .item .text {
font-size: 1.2rem;
bottom: 1rem;
}
}

.home #main section#pr .ttl {
margin: 3rem auto;
text-align: center;
color: #FFF;
text-shadow: 
rgba(9,74,151,0.8) 2px 2px 6px,
rgba(9,74,151,0.8) -2px 2px 6px,
rgba(9,74,151,0.8) 2px -2px 6px,
rgba(9,74,151,0.8) -2px -2px 6px;
}

.home #main section#pr .nextpage {
margin: 3rem auto 0;
}


/*************************************************************************************

system

**************************************************************************************/

.home #main section#system {}


.home #main section#system .block {
padding: 3rem 0;
background-image: 
linear-gradient(to bottom,  rgba(9,74,151,0.9) 0%,rgba(9,74,151,0.3) 30%,transparent 100%),
linear-gradient(to top,  rgba(9,74,151,0.9) 0%,rgba(9,74,151,0.3) 30%,transparent 100%),
url(../images/home_s03_bg.jpg);
background-position: center top,center bottom,center center;
background-repeat: no-repeat;
background-size: cover;
}

.home #main section#system .ttl {
margin: 0 auto 3rem;
text-align: center;
color: #FFF;
text-shadow: 
rgba(9,74,151,0.8) 2px 2px 6px,
rgba(9,74,151,0.8) -2px 2px 6px,
rgba(9,74,151,0.8) 2px -2px 6px,
rgba(9,74,151,0.8) -2px -2px 6px;
}

.home #main section#system .nextpage {
margin: 3rem auto 0;
}

.home #main section#system .separator {
display: grid;
gap:2rem;
}

@media only screen and (min-width: 551px){
.home #main section#system .separator {
grid-template-columns: 1fr 1fr;
}
}

@media only screen and (max-width: 550px){
.home #main section#system .separator {
}
}

.home #main section#system .separator li {
background-color: #FFF;
border-radius: 7px;
padding: 1rem 1rem;
}

@media only screen and (min-width: 1001px){
.home #main section#system .separator li {
display: grid;
grid-template-columns: 100px auto;
gap: 1rem;
}
}

@media only screen and (min-width: 551px) and (max-width: 1000px){
.home #main section#system .separator li {
display: flex;
flex-direction: column;
gap: 1rem;
}
}

@media only screen and (max-width: 550px){
.home #main section#system .separator li {
display: grid;
grid-template-columns: 100px auto;
gap: 1rem;
align-items: center;
}
}

.home #main section#system .separator li .photo {
display: flex;
justify-content: center;
}

@media only screen and (max-width: 550px){
.home #main section#system .separator li .photo {
display: block;
}
}

.home #main section#system .separator li .photo img {}

@media only screen and (min-width: 1001px){
.home #main section#system .separator li .photo img {
}
}

@media only screen and (min-width: 551px) and (max-width: 1000px){
.home #main section#system .separator li .photo img {
max-width: 180px;
}
}

@media only screen and (max-width: 550px){
.home #main section#system .separator li .photo img {
}
}

.home #main section#system .separator li .text {
display: flex;
flex-direction: column;
justify-content: center;
}

.home #main section#system .separator li .text h4 {
font-weight: bold;
border-left: #256FB8 solid 3px;
padding-left: .7rem;
line-height: 1.5;
}

@media only screen  and (min-width: 1001px){
.home #main section#system .separator li .text h4 {
font-size: 1rem;
margin-bottom: .3rem;
}
}

@media only screen  and (min-width: 701px)  and (max-width: 1000px){
.home #main section#system .separator li .text h4 {
font-size: 1rem;
margin-bottom: .5rem;
}
}

@media only screen  and (min-width: 551px)  and (max-width: 700px){
.home #main section#system .separator li .text h4 {
font-size: 1.2rem;
margin-bottom: .7rem;
}
}

@media only screen  and (min-width: 481px)  and (max-width: 550px){
.home #main section#system .separator li .text h4 {
font-size: 1.3rem;
margin-bottom: .5rem;
}
}

@media only screen  and (max-width:480px){
.home #main section#system .separator li .text h4 {
font-size: 1.0rem;
margin-bottom: .5rem;
}
}

.home #main section#system .separator li .text p {
line-height: 1.5;
}


/*************************************************************************************

application

**************************************************************************************/

.home #main section#application {}

.home #main section#application .block {
padding: 3rem 0;
background-color: rgba(28,72,152,1.00);
}

.home #main section#application .ttl {
margin: 0 auto 3rem;
text-align: center;
color: #FFF;
text-shadow: 
rgba(9,74,151,0.8) 2px 2px 6px,
rgba(9,74,151,0.8) -2px 2px 6px,
rgba(9,74,151,0.8) 2px -2px 6px,
rgba(9,74,151,0.8) -2px -2px 6px;
}

.home #main section#application .nextpage {
margin: 3rem auto 0;
}

.home #main section#application table  {}

.home #main section#application table th  {}

@media only screen  and (min-width:601px){
.home #main section#application table th  {
width: 15rem;
}
}

@media only screen  and (max-width:600px){
.home #main section#application table th  {
width: 100%;
}
}


/*************************************************************************************

detail

**************************************************************************************/

.home #main section#detail {}

.home #main section#detail section {
display: flex;
margin: auto;
}

@media only screen  and (min-width: 1301px){
.home #main section#detail section {
justify-content: space-between;
max-width: 1300px;
}
}

@media only screen  and (min-width: 801px) and (max-width: 1300px){
.home #main section#detail section {
justify-content: space-between;
padding: 0 2rem;
}
}

@media only screen  and (max-width:800px){
.home #main section#detail section {
flex-direction: column;
}
}

.home #main section#detail section.reverse {
}

@media only screen  and (min-width: 801px){
.home #main section#detail section.reverse {
flex-direction: row-reverse;
}
}

@media only screen  and (max-width:800px){
.home #main section#detail section.reverse {
}
}

.home #main section#detail section .column {
}

@media only screen  and (min-width: 801px){
.home #main section#detail section .column {
width: 35%;
display: flex;
flex-direction: column;
justify-content: center;
}
}

@media only screen  and (max-width:800px){
.home #main section#detail section .column {
}
}

.home #main section#detail section .column.text {
}

@media only screen  and (min-width: 801px){
.home #main section#detail section .column.text {
}
}

@media only screen  and (min-width: 1301px)  and (max-width: 1350px){
.home #main section#detail section.reverse .column.text > * {
padding-left: 2rem;
}

.home #main section#detail section .text > * { 
padding-right: 2rem;
}
}

@media only screen  and (max-width:800px){
.home #main section#detail section .column.text {
padding: 2rem 2rem;
}
}

.home #main section#detail section .column h3 {
position: relative;
font-weight: bold;
color: #1C4898;
padding-bottom: 1rem;
margin-bottom: 1rem;
line-height: 1.6;
}

@media only screen  and (min-width: 701px){
.home #main section#detail section .column h3 {
font-size: 1.4rem;
}
}

@media only screen  and (min-width: 481px)  and (max-width: 700px){
.home #main section#detail section .column h3 {
font-size: 1.7rem;
}
}

@media only screen  and (max-width:480px){
.home #main section#detail section .column h3 {
font-size: 1.1rem;
}
}

.home #main section#detail section .column h3 br.wide {
}

@media only screen  and (max-width:1200px){
.home #main section#detail section .column h3 br.wide {
display: none;
}
}

.home #main section#detail section .column h3::before {
content: "";
display: block;
height: 3px;
background-color: #1C4898;
position: absolute;
bottom: 0;
}

@media only screen  and (min-width: 801px){
.home #main section#detail section .column h3::before {
width: 130%;
}
}

@media only screen  and (max-width:800px){
.home #main section#detail section .column h3::before {
width: 100%;
}
}

.home #main section#detail section.reverse .column h3::before {
}

@media only screen  and (min-width: 801px){
.home #main section#detail section.reverse .column h3::before {
left: 0;
}
}

@media only screen  and (max-width:800px){
.home #main section#detail section.reverse .column h3::before {
left: 0;
}
}

.home #main section#detail section .column h3::before {
}

@media only screen  and (min-width: 801px){
.home #main section#detail section .column h3::before {
right: 0;
}
}

@media only screen  and (max-width:800px){
.home #main section#detail section .column h3::before {
left: 0;
}
}


/*右側へ要素を広げる（2カラム）*/
.home #main section#detail section .column.column-outside-right {
}

@media only screen  and (min-width: 801px){
.home #main section#detail section .column.column-outside-right {
flex: 1;
margin-right: calc(50% - 50vw);
margin-left: 4%;
}
}

@media only screen  and (max-width:800px){
.home #main section#detail section .column.column-outside-right {
}
}

/*左側へ要素を広げる（2カラム）*/
.home #main section#detail section .column.column-outside-left {
}

@media only screen  and (min-width: 801px){
.home #main section#detail section .column.column-outside-left {
flex: 1;
margin-left: calc(50% - 50vw);
margin-right: 4%;
}
}

@media only screen  and (max-width:800px){
.home #main section#detail section .column.column-outside-left {
}
}

/*右側へ要素を広げる（1カラム）*/
.home #main section#detail section .column.outside-right {
margin-right: calc(50% - 50vw);
}

@media only screen  and (min-width: 801px){
.home #main section#detail section .column.outside-right {
margin-right: calc(50% - 50vw);
}
}

@media only screen  and (max-width:800px){
.home #main section#detail section .column.outside-right {
margin-right: calc(50% - 50vw);
}
}

/*左側へ要素を広げる（1カラム）*/
.home #main section#detail section .column.outside-left {
margin-left: calc(50% - 50vw);
}

@media only screen  and (min-width: 801px){
.home #main section#detail section .column.outside-left {
margin-left: calc(50% - 50vw);
}
}

@media only screen  and (max-width:800px){
.home #main section#detail section .column.outside-left {
margin-left: calc(50% - 50vw);
}
}

.home #main section#detail section .column .photo {
position: relative;
}

@media only screen  and (min-width:801px)  and (max-width:1050px){
.home #main section#detail section .column .photo {
overflow: hidden;
}
}


.home #main section#detail section .column .photo figure {
position: relative;
}

.home #main section#detail section .column .photo figure img {}

@media only screen  and (min-width:801px)  and (max-width:1050px){
.home #main section#detail section .column .photo figure img {
width: auto;
height: 300px;
max-width: none;
}
}

.home #main section#detail section .column .photo figure figcaption {
color: #FFF;
font-weight: bold;
position: absolute;
top: 2.5rem;
}

@media only screen  and (min-width: 1351px){
.home #main section#detail section .column .photo figure figcaption {
/*width: 100%;*/
display: block;
}

.home #main section#detail section .column.column-outside-right .photo figure figcaption {
right: 0;
padding-right: calc((100vw - 1300px) / 2);
}

.home #main section#detail section .column.column-outside-left .photo figure figcaption {
left: 0;
padding-left: calc((100vw - 1300px) / 2);
}
}

@media only screen  and (min-width: 1301px)  and (max-width: 1350px){
.home #main section#detail section .column .photo figure figcaption {
/*width: 100%;*/
display: block;
}

.home #main section#detail section .column.column-outside-right .photo figure figcaption {
right: 0;
padding-right: calc((100vw - 1300px + 2rem) / 2);
}

.home #main section#detail section .column.column-outside-left .photo figure figcaption {
left: 0;
padding-left: calc((100vw - 1300px + 2rem) / 2);
}
}

@media only screen  and (max-width:1300px){
.home #main section#detail section .column.column-outside-right .photo figure figcaption {
right: 2rem;
}

.home #main section#detail section .column.column-outside-left .photo figure figcaption {
left: 2rem;
}
}

@media only screen  and (min-width: 701px){
.home #main section#detail section .column .photo figure figcaption {
font-size: 1.9rem;
}
}

@media only screen  and (min-width: 481px)  and (max-width: 700px){
.home #main section#detail section .column .photo figure figcaption {
font-size: 2.2rem;
}
}

@media only screen  and (max-width:480px){
.home #main section#detail section .column .photo figure figcaption {
font-size: 1.6rem;
}
}

@media only screen  and (max-width:800px){
.home #main section#detail section .column .photo figure figcaption {
top:50%;
transform: translateY(-50%);
}
}