@charset "UTF-8";
/*=============================================================
#mainimage
=============================================================*/
#mainimage {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
z-index: -10;
}
#mainimage video{
position: absolute;
width: 100%;
height:100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1000;
object-fit: cover;
}
/*=============================================================
#concept
=============================================================*/
#concept{
width: 100%;
background: url("../image/bg1.jpg");
background-repeat: repeat;
padding: 100px 0;
}
#concept .box {
width: 1200px;
margin: 0 auto ;
display: flex;
justify-content: space-between;
}
#concept .box .left {
padding-right: 100px;
text-align: left;
}
#concept .box .left h2{
margin-bottom: 20px;
}
#concept .box .right {
}
/*=============================================================
#trouble
=============================================================*/
#trouble{
width: 100%;
background: url("../image/bg2.jpg");
background-repeat: repeat;
padding: 100px 0;
}
#trouble ul.trouble_box{
display: flex;
justify-content: space-between;
width: 895px;
margin: 0 auto 40px;
}
#trouble ul.trouble_box2{
display: flex;
justify-content: space-between;
margin: 0 auto 40px;
}
/*=============================================================
#point
=============================================================*/
#point{
width: 100%;
background: url("../image/point_bg.jpg");
background-size: cover;
background-position: center top;
background-attachment: fixed;
padding: 100px 0;
}
#point ul.point_box{
display: flex;
justify-content: space-between;
}
#point ul.point_box li{
background: rgba(217,246,239,0.5);
width: 386px;
text-align: center;
padding: 60px 0 0;
position: relative;
}
#point ul.point_box li.point_box_01::before{
position: absolute;
content: "";
background: url("../image/number_01.png");
background-size: cover;
background-repeat: no-repeat;
width: 88px;
height: 66px;
top: -25px;
left: 20px;
}
#point ul.point_box li.point_box_02::before{
position: absolute;
content: "";
background: url("../image/number_02.png");
background-size: cover;
background-repeat: no-repeat;
width: 129px;
height: 66px;
top: -25px;
left: 20px;
}
#point ul.point_box li.point_box_03::before{
position: absolute;
content: "";
background: url("../image/number_03.png");
background-size: cover;
background-repeat: no-repeat;
width: 110px;
height: 70px;
top: -25px;
left: 20px;
}

#point ul.point_box li h3{
padding-top: 20px;
text-align: center;
}
/*=============================================================
#voice
=============================================================*/
#voice{
width: 100%;
background: url("../image/bg2.jpg");
background-repeat: repeat;
padding: 100px 0;
}
#voice ul.voice_box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#voice ul.voice_box li{
background: rgba(255,255,255,0.5);
border: solid 1px #229b7c;
width: 386px;
text-align: center;
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
}
#voice ul.voice_box li p{
padding-top: 20px;
text-align: left;
}
/*=============================================================
#menu
=============================================================*/
#menu{
width: 100%;
background: url("../image/menu_bg.jpg");
background-size: cover;
background-position: center top;
background-attachment: fixed;
padding: 100px 0;
}
#menu table{
background: rgba(255,255,255,0.5);
border: solid 1px #229b7c;
table-layout: fixed;
width: 100%;
text-align: left;
padding: 50px;
margin-bottom: 60px;
}
#menu table th {
font-size: 24px;
font-weight: 600;
color: #000;
padding: 0 0.5em;
border-left: solid 6px #22d492;
height: 50px;
}
#menu table span{
font-size: 14px;
color: #ff4335;
}
#menu .menu_point{
font-size: 24px;
font-weight: 600;
color: #000;
padding: 0 0.5em;
border-left: solid 6px #22d492;
margin-bottom: 10px;
}
#menu .menu_point + p{
text-align: left;
}
/*=============================================================
#flow
=============================================================*/
#flow{
width: 100%;
background: url("../image/bg1.jpg");
background-repeat: repeat;
padding: 100px 0;
}
#flow ul.flow_box{
display: flex;
justify-content: space-between;
margin-bottom: 60px;
}
#flow ul.flow_box li{
background: rgba(217,246,239,0.5);
width: 386px;
text-align: center;
padding: 60px 20px 20px;
box-sizing: border-box;
position: relative;
}
#flow ul.flow_box li.flow_box_01::before{
position: absolute;
content: "";
background: url("../image/number_01.png");
background-size: cover;
background-repeat: no-repeat;
width: 88px;
height: 66px;
top: -25px;
left: 20px;
}
#flow ul.flow_box li.flow_box_02::before{
position: absolute;
content: "";
background: url("../image/number_02.png");
background-size: cover;
background-repeat: no-repeat;
width: 129px;
height: 66px;
top: -25px;
left: 20px;
}
#flow ul.flow_box li.flow_box_03::before{
position: absolute;
content: "";
background: url("../image/number_03.png");
background-size: cover;
background-repeat: no-repeat;
width: 110px;
height: 70px;
top: -25px;
left: 20px;
}

#flow ul.flow_box li h3{
padding-top: 20px;
margin-bottom: 15px;
text-align: center;
}
#flow ul.flow_box li p{
text-align: left;
}
#flow p{
text-align: left;
}
/*=============================================================
#news
=============================================================*/
#news{
width: 100%;
background: url("../image/bg2.jpg");
background-repeat: repeat;
padding: 100px 0;
}
#news .news_box{
background: rgba(255,255,255,0.5);
border: solid 1px #229b7c;
padding: 50px;
box-sizing: border-box;
}
#news .news_box ol {
padding-left: 10px;
text-align: left;
margin-bottom: 20px;
}
#news .news_box ol li{
list-style-type: decimal;
}
#news .news_box p.right{
text-align: right;
}
/*=============================================================
#access
=============================================================*/
#access{
width: 100%;
background: url("../image/bg1.jpg");
background-repeat: repeat;
padding: 100px 0;
}
/*=============================================================
#info
=============================================================*/
#info{
width: 100%;
background: url("../image/bg2.jpg");
background-repeat: repeat;
padding: 100px 0;
}
#info .box {
width: 1200px;
margin: 0 auto ;
display: flex;
}
#info .box .left {
padding-right: 100px;
text-align: left;
}
#info .box .right {
text-align: left;
}
#info .box .right p {
margin-bottom: 20px;
}
#info .sns {
margin-bottom: 20px;
display: flex;
}
#info .sns a{
margin-right: 20px;
}
#info b{
font-size: 1.2em;
font-weight: bold;
color:#FF0004;
}