@charset "UTF-8";
/* CSS Document */
#page_main{ background-image: url("../images/midashi.jpg");}

/*
#technology_list{ display: flex; flex-wrap: wrap; list-style: none; padding: 0;}
#technology_list>li{}
#technology_list>li>a{ color: black; transition: .3s; position: relative; display: block;}
#technology_list>li>a:hover{ opacity: 0.5; text-decoration: none;}
#technology_list>li>a>span{ display: block; padding: 0 0 70%; background-size: cover; background-repeat: no-repeat; background-position: center;}
#technology_list>li>a>h2{ margin: 0.5em 0 0;}
@media (min-width: 768px){
#technology_list{ margin: 0 -15px 100px;}
#technology_list>li{ width: calc(25% - 30px); margin: 0 15px 30px;}
#technology_list>li>a{}
#technology_list>li>a>span{}
#technology_list>li>a>h2{ font-size: 20px;}
}
@media (max-width: 767.98px){
#technology_list{ margin: 0 -7px 50px;}
#technology_list>li{ width: calc(50% - 14px); margin: 0 7px 30px;}
#technology_list>li>a{}
#technology_list>li>a>span{}
#technology_list>li>a>h2{ font-size: 16px;}
}
*/


/*
#cat_list{}
#cat_list>a{ display: block; color: black; transition: .3s;}
#cat_list>a:hover{ text-decoration: none; opacity: 0.5;}
#cat_list>a>h2{ margin-top: 0;}
#cat_list>a>span{ display: block; padding: 0 0 56.25%; background-image: url(https://via.placeholder.com/500x400.png?text=No+Image); background-repeat: no-repeat; background-size: cover; background-position: center;}
#cat_list>a>p{ margin: 0;}
@media (min-width: 768px){
#cat_list{ display: flex; flex-wrap: wrap; margin: 50px -15px;}
#cat_list>a{ width: calc(33.33% - 30px); margin: 0 15px 50px;}
#cat_list>a>h2{ font-size: 20px; margin-bottom: 5px;}
#cat_list>a>span{ margin-bottom: 5px;}
#cat_list>a>p{}
}
@media (max-width: 767.98px){
#cat_list>a{ margin-bottom: 30px;}
#cat_list>a>h2{font-size: 14px; margin-bottom: 5px;}
#cat_list>a>span{ margin-bottom: 5px;}
#cat_list>a>p{}
}
*/


.technology_ct{ list-style: none; padding-left: 1em;}
.technology_ct>li{}
.technology_ct>li>a{ position: relative; display: inline-block; padding-left: 1em;}
.technology_ct>li>a::before{ display: inline-block; content: ""; background-image: url(../../document/images/arrow.png); background-size: contain; vertical-align: middle; background-repeat: no-repeat; position: absolute; left: 0;}
@media (min-width: 768px){
#technology_box{ display: flex; margin: -40px -15px 0; flex-wrap: wrap; padding-bottom: 100px;}
.technology_box{ margin: 0 15px; padding-bottom: 30px; width: calc(50% - 30px);}
.technology_ct{ margin: -10px 0 0;}
.technology_ct>li{}
.technology_ct>li>a{}
.technology_ct>li>a::before{ width: 10px; height: 10px; top: calc(50% - 5px);}
}
@media (max-width: 767.98px){
#technology_box{ margin-top: -30px; padding-bottom: 60px;}
.technology_ct>li>a::before{ width: 10px; height: 10px; top: calc(50% - 5px);}

}


.detail_box>div{}
.img_box{}
.img_box>figure>figcaption{ margin: 1em 0 0;}

@media (min-width: 768px){
.detail_box>div{ margin-bottom: 100px;}
.img_box{ display: flex; flex-wrap: wrap; margin: 30px -15px 0; justify-content: center;}
.img_box>figure{ max-width: calc(50% - 30px); margin: 0 15px; text-align: center;}
.img_box>figure>figcaption{ font-size: 12px;}
}
@media (max-width: 767.98px){
.detail_box>div{ margin-bottom: 50px;}
.detail_box .midashi03{}
.img_box{ display: flex; flex-wrap: wrap; margin: -10px -14px 10px; justify-content: center;}
.img_box>figure{ max-width: calc(100% - 14px); margin: 20px 7px 0; text-align: center;}
.img_box>figure>figcaption{ font-size: 10px;}

}





@media (min-width: 768px){}
@media (max-width: 767.98px){}