@charset "utf-8";
@import url("root.css");

/***************************************
---------------- news ----------------
***************************************/
#flow{
margin: 80px auto 0;
}
#flow .flow_title{
    width: 100%;
    color: var(--base-color03);
    background-color: var(--base-color01);
    border-radius: 8px;
    padding: 5px 20px;
	font-size: 20px;
	font-weight: 500;
}

#flow dl{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 40px auto 0;
}
#flow dt{
width: 35%;
}

#flow dt img{
border-radius: 10px;
box-shadow: 5px 10px 10px -6px rgba(127, 127, 127, 0.3);
}

#flow dd{width:65%;}

#flow dd p{
padding: 0 0 0 50px;
line-height: 1.8;
font-size: 18px;
}
#flow dd span{
color: var(--base-color01);
font-size: 18px;
font-weight: 500;
}
#flow .ybox i{
margin: 20px auto;
text-align: center;
color: var(--base-color01);
font-size:50px;
display: flex;
justify-content: center;
}


@media screen and (max-width: 768px) {
.container {
        width: 100%;
        margin: 0 auto 0;
        padding: 10px 0 40px 0;
    }

#flow{
margin: 40px auto 0;
}
#flow .flow_title{
    width: 90%;
    color: var(--base-color03);
    background-color: var(--base-color01);
    border-radius: 8px;
    padding: 5px 20px;
	font-size: 16px;
	font-weight: 500;
	margin: 0 auto 20px;
	text-align: center;
}

#flow dl{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 10px auto 0;
width: 90%;
}
#flow dt{
width:100%;
}

#flow dt img{
border-radius: 10px;
box-shadow: 5px 10px 10px -6px rgba(127, 127, 127, 0.3);
}

#flow dd{width:100%;}

#flow dd p{
padding:10px 0 0 0;
line-height: 1.8;
font-size: 16px;
}
#flow dd span{
color: var(--base-color01);
font-size: 16px;
font-weight: 500;
}
#flow .ybox i{
margin: 10px auto;
text-align: center;
color: var(--base-color01);
font-size:40px;
display: flex;
justify-content: center;
}




}

/***************************************
-------------- Information --------------
***************************************/
#information {
    margin:0 auto 80px;
    width: 1200px;
    background-color: var(--sub-color02);
    border-radius: 20px;
    padding: 50px;
}

#information h2 {
    font-size: 38px;
    text-align: center;
    font-weight: 500;
    font-family: ten-mincho, serif;
    line-height: 1.4;
    margin: 0 auto 0;
}
#information .row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 40px auto 0;
}

#information .col {
width: 48%;
margin: 0 4% 2% 0;
}

#information .col:nth-child(2n) {margin: 0 0 2% 0;}

#information .col_box{
width: 100%;
margin: 0 auto;
background-color: var(--base-color03);
border-radius: 10px;
padding:10px 20px;
color: var(--base-color01);
font-size: 24px;
display: flex;
justify-content:center;
align-items: center;
font-weight: 700;
}

#information .col_box img{
padding: 0 20px 0 0;
}
@media screen and (max-width: 768px) {
#information {
    margin:0 auto 40px;
    width:90%;
    background-color: var(--sub-color02);
    border-radius: 10px;
    padding: 20px;
}

#information h2 {
    font-size:24px;
    text-align: center;
    font-weight: 500;
    font-family: ten-mincho, serif;
    line-height: 1.4;
    margin: 0 auto 0;
}
#information .row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px auto 0;
}

#information .col {
width: 100%;
margin:0 auto 20px;
}

#information .col:nth-child(2n) {margin:0 auto 20px;}

#information .col_box{
width: 100%;
margin: 0 auto;
background-color: var(--base-color03);
border-radius: 10px;
padding:10px 10px;
color: var(--base-color01);
font-size: 18px;
display: flex;
justify-content:center;
align-items: center;
font-weight: 700;
}

#information .col_box img{
padding: 0 20px 0 0;
}
}