@charset "UTF-8";
/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Shippori+Mincho:wght@400;500;700&family=Inter:wght@200;300;400;500;600;700;900&display=swap');

/*----------------------------------------------------
　
------------------------------------------------------*/
#main-title{
clear: both;
margin: 20px 0 0;
text-align: center;
background: #F0F7FA;
}
#main-title h2{
padding: 1em 0;
font-size: 250%;
font-weight: 900;
line-height: 1.3;
}
#main-title h2 .en{
display: block;
padding: 1em 0 0;
color: #005FA3;
font-size: 40%;
font-family: 'Inter', sans-serif;
font-weight: 600;
}
@media screen and (max-width: 1000px) {
#main-title h2{
}
}


/*
-------------------------------*/


/* ------------------------------------

---------------------------------------　*/

#mokuji{
clear: both;
padding: 60px 0;
}
#mokuji ul{
overflow: hidden;
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 3em 0 2em 2em;
border-radius: 1em;
border: 1px solid #005FA3;
box-sizing: border-box;
}
#mokuji ul li{
position: relative;
float: left;
min-width: 30%;
margin: 0 3% 1em 0;
padding: 0 0 0 2em;
font-size: 118%;
line-height: 1.8;
box-sizing: border-box;
}
#mokuji ul li::before{
position: absolute;
left: 0;
top:0;
content: "";
display: block;
width: 1.65em;
height: 1.65em;
background: url("/new/img/layout/arrow.svg") no-repeat left 0;
background-size: 1.65em;
}
#mokuji ul li a{
}


@media screen and (min-width: 1200px) {
/*#mokuji ul li:nth-child(5){
min-width: 20%;
}*/
}

@media screen and (max-width: 820px) {
#mokuji ul li{
width: 45%;
}
#mokuji ul li:nth-child(2n+1){
clear: both;
}
}
@media screen and (max-width: 640px) {
#mokuji ul{
padding: 3em 1.5em 2em 1.5em;
}
#mokuji ul li{
float: none;
width: 100%;
margin-right: 0;
}
}


/* ------------------------------------

---------------------------------------　*/
#about{
clear: both;
overflow: hidden;
width: 90%;
max-width: 1200px;
margin: 0 auto 150px;
box-sizing: border-box;
}

#about h2{
margin: 0 0 1em;
padding:0;
font-size: 162%;
text-align: center;
/*background: #F0F7FA;*/
}
#about h2 img{
width: 50%;
max-width: 160px;
}

#about .img{
float: right;
width: 30%;
}

#about .text{
/*float: left;*/
width: 65%;
margin: 0 auto;
padding: 0.5em 0;
line-height: 2;
max-width: 780px;
}

@media screen and (max-width: 1000px) {
#about{
margin: 0 auto 4em;
}
#about h2 img{
width: 30%;
}
}

@media screen and (max-width: 800px) {
#about h2{
font-size: 140%;
/*text-align: left;*/
}
#about .img{
float: none;
width: 100%;
margin: 0 auto;
max-width: 800px;
}

#about .text{
float: none;
width: 100%;
padding: 0.5em 0;
}
}


/* ------------------------------------

---------------------------------------　*/
.cat-title{
margin: 0 0 1em;
color: #005FA3;
font-size: 187%;
border-bottom:2px solid #005FA3;
}
.cat-title .small{
display: inline-block;
margin-left: 2em;
font-size: 75%;
}
.cat-title .small:before{
content: "〜 ";
}
.cat-title .small:after{
content: " 〜";
}

.cat-text{
margin: -1em 0 1.6em;
font-size: 112%;
text-align: left;
}


.text-contents{
clear: both;
position: relative;
overflow: hidden;
}
.text-contents .cont{
overflow: hidden;
width: 90%;
max-width: 1200px;
margin: 0 auto;
text-align: left;
}


@media screen and (max-width: 1200px) {
.cat-title .small{
display: block;
margin-top: 0.2em;
margin-bottom: 0.5em;
margin-left: 0;
line-height: 1.5;
}
}


@media screen and (max-width: 640px) {
.cat-title{
font-size: 162%;
}
}





/* ------------------------------------

---------------------------------------　*/
#text01{
margin: 0 0 100px;
}

@media screen and (max-width: 640px) {
#text01{
margin: 0 0 3.5em;
}
}

/*
-------------------------------*/
#text01 h4{
font-size: 150%;
}
#text01 .text{

}
/*
-------------------------------*/
#text01 .tokutyo{
clear: both;
overflow: hidden;
margin: 0 0 3em;
}
#text01 .img-text{
clear: both;
text-align: left;
line-height: 1.5;
margin: 0 0 3em;
}
#text01 ul.img2 li .img-text{
margin: 1em 0 2em;
}

@media screen and (max-width: 480px) {
#text01 .tokutyo{
margin-bottom: 2em;
}
}
/*
-------------------------------*/

#text01 ul.img2{
clear: both;
overflow: hidden;
margin: 1em 0 0;
}
#text01 ul.img2 li{
float: left;
width: 48%;
max-width: 480px;
margin:0 4% 1em 0;
}
#text01 ul.img2 li:nth-child(2n){
margin-right: 0;
}

@media screen and (max-width: 480px) {
#text01 ul.img2 li{
float: none;
width: 100%;
margin:0 0 1em 0;
}
}

#text01 ul.img3{
clear: both;
overflow: hidden;
margin: 1em 0 0;
}
#text01 ul.img3 li{
float: left;
width: 30.6%;
max-width: 480px;
margin:0 4% 1em 0;
}
#text01 ul.img3 li:nth-child(3n){
margin-right: 0;
}

@media screen and (max-width: 480px) {
#text01 ul.img3 li{
float: none;
width: 100%;
margin:0 0 1em 0;
}
}



/* ------------------------------------

---------------------------------------　*/
#text02{
margin: 0 0 100px;
}
@media screen and (max-width: 640px) {
#text02{
margin: 0 0 3.5em;
}
}

/*
-------------------------------*/
#text02 h4{
font-size: 150%;
}

/*
-------------------------------*/
#text02 .tokutyo{
clear: both;
overflow: hidden;
margin: 0 0 3em;
}
#text02 .img-text{
clear: both;
text-align: left;
line-height: 1.5;
margin: 0 0 3em;
}
#text02 ul.img2 li .img-text{
margin: 1em 0 2em;
}

@media screen and (max-width: 480px) {
#text02 .tokutyo{
margin-bottom: 2em;
}
}
/*
-------------------------------*/

#text02 .img1{
clear: both;
overflow: hidden;
max-width: 800px;
margin: 1em 0 1em;
}


#text02 ul.img2{
clear: both;
overflow: hidden;
margin: 1em 0 0;
}
#text02 ul.img2 li{
float: left;
width: 48%;
max-width: 480px;
margin:0 4% 1em 0;
}
#text02 ul.img2 li:nth-child(2n){
margin-right: 0;
}

@media screen and (max-width: 480px) {
#text02 ul.img2 li{
float: none;
width: 100%;
margin:0 0 1em 0;
}
}





/* ------------------------------------

---------------------------------------　*/
#text03{
margin: 0 0 100px;
}
@media screen and (max-width: 640px) {
#text03{
margin: 0 0 3.5em;
}
}

#text03 .cat-title .small{
display: block;
margin-top: 0.2em;
margin-bottom: 0.5em;
margin-left: 0;
line-height: 1.5;
}

/*
-------------------------------*/
#text03 h4{
font-size: 150%;
}

/*
-------------------------------*/
#text03 .tokutyo{
clear: both;
overflow: hidden;
margin: 0 0 3em;
}
#text03 .img-text{
clear: both;
text-align: left;
line-height: 1.5;
margin: 0 0 3em;
}
#text03 ul.img2 li .img-text{
margin: 1em 0 2em;
}

@media screen and (max-width: 480px) {
#text03 .tokutyo{
margin-bottom: 2em;
}
}
/*
-------------------------------*/
#text03 ul.img2{
clear: both;
overflow: hidden;
margin: 1em 0 0;
}
#text03 ul.img2 li{
float: left;
width: 48%;
max-width: 480px;
margin:0 4% 1em 0;
}
#text03 ul.img2 li:nth-child(2n){
margin-right: 0;
}

@media screen and (max-width: 480px) {
#text03 ul.img2 li{
float: none;
width: 100%;
margin:0 0 1em 0;
}
}





/* ------------------------------------

---------------------------------------　*/
#text04{
margin: 0 0 100px;
}
@media screen and (max-width: 640px) {
#text04{
margin: 0 0 3.5em;
}
}


/*
-------------------------------*/
#text04 h4{
font-size: 150%;
}

/*
-------------------------------*/
#text04 .tokutyo{
clear: both;
overflow: hidden;
margin: 0 0 3em;
}
#text04 .img-text{
clear: both;
text-align: left;
line-height: 1.5;
margin: 0 0 3em;
}
#text04 ul.img2 li .img-text{
margin: 1em 0 2em;
}

@media screen and (max-width: 480px) {
#text04 .tokutyo{
margin-bottom: 2em;
}
}
/*
-------------------------------*/
#text04 ul.img2{
clear: both;
overflow: hidden;
margin: 1em 0 0;
}
#text04 ul.img2 li{
float: left;
width: 48%;
max-width: 480px;
margin:0 4% 1em 0;
}
#text04 ul.img2 li:nth-child(2n){
margin-right: 0;
}

@media screen and (max-width: 480px) {
#text04 ul.img2 li{
float: none;
width: 100%;
margin:0 0 1em 0;
}
}






/* ------------------------------------

---------------------------------------　*/
#text05{
margin: 0 0 100px;
}
@media screen and (max-width: 640px) {
#text05{
margin: 0 0 3.5em;
}
}


/*
-------------------------------*/
#text05 h4{
font-size: 150%;
}

/*
-------------------------------*/
#text05 .tokutyo{
clear: both;
overflow: hidden;
margin: 0 0 3em;
}
#text05 .img-text{
clear: both;
text-align: left;
line-height: 1.5;
margin: 0 0 3em;
}
#text05 ul.img2 li .img-text{
margin: 1em 0 2em;
}

@media screen and (max-width: 480px) {
#text05 .tokutyo{
margin-bottom: 2em;
}
}
/*
-------------------------------*/
#text05 ul.img2{
clear: both;
overflow: hidden;
margin: 1em 0 0;
}
#text05 ul.img2 li{
float: left;
width: 48%;
max-width: 480px;
margin:0 4% 1em 0;
}
#text05 ul.img2 li:nth-child(2n){
margin-right: 0;
}

@media screen and (max-width: 480px) {
#text05 ul.img2 li{
float: none;
width: 100%;
margin:0 0 1em 0;
}
}







/* ------------------------------------

---------------------------------------　*/
#text06{
margin: 0 0 100px;
}
@media screen and (max-width: 640px) {
#text06{
margin: 0 0 3.5em;
}
}

#text06 .cat-title .small{
display: block;
margin-bottom: 0.2em;
margin-left: 0;
line-height: 1.5;
}

/*
-------------------------------*/
#text06 h4{
font-size: 150%;
}

/*
-------------------------------*/
#text06 .tokutyo{
clear: both;
overflow: hidden;
margin: 0 0 3em;
}
#text06 .img-text{
clear: both;
text-align: left;
line-height: 1.5;
margin: 0 0 3em;
}
#text06 ul.img2 li .img-text{
margin: 1em 0 2em;
}

@media screen and (max-width: 480px) {
#text06 .tokutyo{
margin-bottom: 2em;
}
}
/*
-------------------------------*/
#text06 .img1{
clear: both;
overflow: hidden;
max-width: 800px;
margin: 1em 0 1em;
}

#text06 ul.img3{
clear: both;
overflow: hidden;
max-width: 1000px;
margin: 1em 0 0;
}
#text06 ul.img3 li{
float: left;
width: 30.6%;
max-width: 480px;
margin:0 4% 1em 0;
}
#text06 ul.img3 li:nth-child(3n){
margin-right: 0;
}

@media screen and (max-width: 480px) {
#text06 .img1{
text-align: left;
}
#text06 .img1 img{
width:70%;
}
#text06 ul.img3 li{
float: none;
width: 100%;
margin:0 0 0.5em 0;
}
}


#text06 .tokutyo img.pc{display: inline;}
#text06 .tokutyo img.sp{display: none;}
@media screen and (max-width: 480px) {
#text06 .tokutyo img.pc{display: none;}
#text06 .tokutyo img.sp{display: inline;}
}





/* ------------------------------------

---------------------------------------　*/
#text07{
margin: 0 0 100px;
}
@media screen and (max-width: 640px) {
#text07{
margin: 0 0 3.5em;
}
}


/*
-------------------------------*/
#text07 h4{
font-size: 150%;
}

/*
-------------------------------*/
#text07 .tokutyo{
clear: both;
overflow: hidden;
margin: 0 0 3em;
}
#text07 .img-text{
clear: both;
text-align: left;
line-height: 1.5;
margin: 0 0 3em;
}
#text07 ul.img2 li .img-text{
margin: 1em 0 2em;
}

@media screen and (max-width: 480px) {
#text07 .tokutyo{
margin-bottom: 2em;
}
}
/*
-------------------------------*/
#text07 ul.img2{
clear: both;
overflow: hidden;
margin: 1em 0 0;
}
#text07 ul.img2 li{
float: left;
width: 48%;
max-width: 480px;
margin:0 4% 1em 0;
}
#text07 ul.img2 li:nth-child(2n){
margin-right: 0;
}

@media screen and (max-width: 480px) {
#text07 ul.img2 li{
float: none;
width: 100%;
margin:0 0 1em 0;
}
}




/* ------------------------------------

---------------------------------------　*/
#text08{
margin: 0 0 100px;
}
@media screen and (max-width: 640px) {
#text08{
margin: 0 0 3.5em;
}
}


/*
-------------------------------*/
#text08 h4{
font-size: 150%;
}

/*
-------------------------------*/
#text08 .tokutyo{
clear: both;
overflow: hidden;
margin: 0 0 3em;
}
#text08 .img-text{
clear: both;
text-align: left;
line-height: 1.5;
margin: 0 0 3em;
}
#text08 ul.img2 li .img-text{
margin: 1em 0 2em;
}

@media screen and (max-width: 480px) {
#text08 .tokutyo{
margin-bottom: 2em;
}
}
/*
-------------------------------*/
#text08 ul.img2{
clear: both;
overflow: hidden;
margin: 1em 0 0;
}
#text08 ul.img2 li{
float: left;
width: 48%;
max-width: 480px;
margin:0 4% 1em 0;
}
#text08 ul.img2 li.tate img{
width: 50%;
max-width: 240px;
}
#text08 ul.img2 li:nth-child(2n){
margin-right: 0;
}

@media screen and (max-width: 480px) {
#text08 ul.img2 li{
float: none;
width: 100%;
margin:0 0 1em 0;
}
#text08 ul.img2 li.tate img{
width: 70%;
max-width: 480px;
}
}





/* ------------------------------------

---------------------------------------　*/
#text09{
margin: 0 0 100px;
}
@media screen and (max-width: 640px) {
#text09{
margin: 0 0 3.5em;
}
}


/*
-------------------------------*/
#text09 h4{
font-size: 150%;
}

/*
-------------------------------*/
#text09 .tokutyo{
clear: both;
overflow: hidden;
margin: 0 0 3em;
}
#text09 .img-text{
clear: both;
text-align: left;
line-height: 1.5;
margin: 0 0 3em;
}
#text09 ul.img2 li .img-text{
margin: 1em 0 2em;
}

@media screen and (max-width: 480px) {
#text09 .tokutyo{
margin-bottom: 2em;
}
}
/*
-------------------------------*/
#text09 ul.img3{
clear: both;
overflow: hidden;
max-width: 1000px;
margin: 1em 0 0;
}
#text09 ul.img3 li{
float: left;
width: 30.6%;
max-width: 480px;
margin:0 4% 1em 0;
}
#text09 ul.img3 li:nth-child(3n){
margin-right: 0;
}

@media screen and (max-width: 480px) {
#text09 ul.img3 li{
float: none;
width: 100%;
margin:0 0 0.5em 0;
}
}





/* ------------------------------------

---------------------------------------　*/
#text10{
margin: 0 0 100px;
}
@media screen and (max-width: 640px) {
#text10{
margin: 0 0 3.5em;
}
}


/*
-------------------------------*/
#text10 h4{
font-size: 150%;
}

/*
-------------------------------*/
#text10 .tokutyo{
clear: both;
overflow: hidden;
margin: 0 0 3em;
}
#text09 .img-text{
clear: both;
text-align: left;
line-height: 1.5;
margin: 0 0 3em;
}
#text10 ul.img2 li .img-text{
margin: 1em 0 2em;
}

@media screen and (max-width: 480px) {
#text10 .tokutyo{
margin-bottom: 2em;
}
}
/*
-------------------------------*/
#text10 .img1{
clear: both;
overflow: hidden;
max-width: 800px;
margin: 1em 0 1em;
}

@media screen and (max-width: 480px) {
#text10 .img1{
text-align: left;
}
}



/* ------------------------------------

---------------------------------------　*/