@charset "utf-8";
/* CSS Document */

/*-----------------
about
-----------------*/
div#area_title{
width:100%;
float: left;
}

div#area_title div#area_title_area{
width:100%;
float: left;
padding: 300px 0;
background-image:  url("../image/about/bg1.png") , url("../image/about/title.jpg");
background-repeat: no-repeat, no-repeat;
background-position:0 bottom , 50% 50%;
background-size:contain , cover;
}
@media screen and (max-width:680px) {
div#area_title div#area_title_area{
padding: 200px 10px;
}
}

div#area_title div#area_title_area div#area_title_area_box{
width:100%;
max-width:1200px;
margin:0 auto;
}





/*-----------------
point
-----------------*/
div#area_box{
width:100%;
float: left;
padding: 40px 0;
background-color: #15308D;
}


div#area_box div#area_box_area{
width:100%;
max-width:1200px;
margin:0 auto;
}

div#area_box div#area_box_area div#area_box_text{
width:100%;
float: left;
color: #fff;
line-height: 240%;
font-size: 1.2rem;
}
@media screen and (max-width:680px) {
div#area_box div#area_box_area div#area_box_text{
padding: 0 10px;
}
}

div#area_box div#area_box_area div#area_box_text img{
margin: 0 auto;
}

@media screen and (max-width:680px) {
div#area_box div#area_box_area div#area_box_text img{
width:100%;
height: auto;
}
}



/*-----------------
point
-----------------*/
div#clear_box{
width:100%;
float: left;
margin-bottom: 50px;
}

div#clear_box img{
width:100%;
height: auto;
}





/*-----------------
point
-----------------*/
div#materials_box{
width:100%;
float: left;
margin-bottom: 100px;
}

div#materials_box div#materials_area{
width:100%;
max-width:1200px;
margin:0 auto;
}

div#materials_box div#materials_area div#materials_headline{
width:100%;
float: left;
padding: 10px 0 10px 20px;
margin-bottom: 40px;
border-left: solid 3px #032088;
}
@media screen and (max-width:680px) {
div#materials_box div#materials_area div#materials_headline{
width: calc(100% - 20px);
float: left;
margin:0 10px 40px 10px;
}
}

div#materials_box div#materials_area .materials_details{
width:100%;
float: left;
border-bottom:solid 1px #ccc;
padding-bottom: 40px;
margin-bottom: 40px;
}

div#materials_box div#materials_area .materials_details .materials_details_text{
width: 100%;  
float: right;  
margin-left: -360px;  
}

div#materials_box div#materials_area .materials_details .materials_details_text .materials_details_text_box{
position: relative;  
margin: 0 0 0 380px;  
}

div#materials_box div#materials_area .materials_details .materials_details_img{
width: 360px;  
float: left;  
}

div#materials_box div#materials_area .materials_details .materials_details_img img{
width: 100%;
height: auto;
}

@media screen and (max-width:680px) {
div#materials_box div#materials_area .materials_details{
width:100%;
float: left;
border-bottom:solid 1px #ccc;
padding-bottom: 40px;
margin-bottom: 40px;
}

div#materials_box div#materials_area .materials_details .materials_details_text{
width: 100%;  
float: right;  
margin-left: 0;
padding: 0 10px;
}

div#materials_box div#materials_area .materials_details .materials_details_text .materials_details_text_box{
width:100%;
position: relative;  
margin: 0 0 0 0;  
}

div#materials_box div#materials_area .materials_details .materials_details_img{
width:100%;
float: left;  
padding: 0 10px 20px 10px;
}

div#materials_box div#materials_area .materials_details .materials_details_img img{
width: 100%;
height: auto;
}
}





/*-----------------
point
-----------------*/
div#drug_box{
width:100%;
float: left;
}

div#drug_box div#drug_area{
width:100%;
max-width:1200px;
margin:0 auto;
}

div#drug_box div#drug_area div#drug_headline{
width:100%;
float: left;
padding: 10px 0 10px 20px;
margin-bottom: 40px;
border-left: solid 3px #032088;
}
@media screen and (max-width:680px) {
div#drug_box div#drug_area div#drug_headline{
width: calc(100% - 20px);
float: left;
margin:0 10px 40px 10px;
}
}

div#drug_box div#drug_area div#drug_details{
width:100%;
float: left;
border-bottom:solid 1px #ccc;
padding-bottom: 40px;
margin-bottom: 40px;
}

div#drug_box div#drug_area div#drug_details ul {
font-size: 0;
text-align: center;

}

div#drug_box div#drug_area div#drug_details li {
display: inline-block;
font-size: 12px;
padding: 20px;
background-color: #eee;
width: calc((100% / 3) - 20px);
margin: 0 10px 20px 10px;
vertical-align: top;
text-align: left;
}
@media screen and (max-width:680px) {
div#drug_box div#drug_area div#drug_details li {
width: calc(100% - 20px);
float: left;
padding: 20px;
}
}


div#drug_box div#drug_area div#drug_details li .drug_details_img{
padding-bottom: 20px;
}

div#drug_box div#drug_area div#drug_details li .drug_details_img img{
width: 100%;
height: auto;
margin: 0 auto;
}





/*-----------------
sucaro
-----------------*/
div#sucaro_box{
width:100%;
float: left;
padding-bottom: 40px;
}

div#sucaro_box div#sucaro_area{
width:100%;
max-width:1200px;
margin:0 auto;
}


div#sucaro_box div#sucaro_area div#sucaro_headline{
width:100%;
float: left;
padding: 10px 0 10px 20px;
margin-bottom: 40px;
border-left: solid 3px #032088;
}
@media screen and (max-width:680px) {
div#sucaro_box div#sucaro_area div#sucaro_headline{
width: calc(100% - 20px);
float: left;
margin:0 10px 40px 10px;
}
}



div#sucaro_box div#sucaro_area div#sucaro_details0{
width:100%;
float: left;
}

div#sucaro_box div#sucaro_area div#sucaro_details0 p{
padding-left: 20px;
padding-bottom: 1rem;
}


div#sucaro_box div#sucaro_area div#sucaro_details0 img{
width:30%;
float: right;
height: auto;
padding-right: 20px;
padding-left: 20px;
}

div#sucaro_box div#sucaro_area div#sucaro_details1{
width:100%;
float: left;
padding-bottom: 40px;
}

div#sucaro_box div#sucaro_area div#sucaro_details1 li{
width: calc(100%/3);
float: left;
padding: 20px 20px 0px 20px;
text-align: center;
font-size: 0.725rem;
}
@media screen and (max-width:680px) {
div#sucaro_box div#sucaro_area div#sucaro_details1 li{
width: calc(100%/2);
}
}

div#sucaro_box div#sucaro_area div#sucaro_details1 li img{
width: 100%;
height: auto;
border: solid 1px #ccc;
}



div#sucaro_box div#sucaro_area div#sucaro_details2{
width:100%;
float: left;
}

div#sucaro_box div#sucaro_area div#sucaro_details2 li{
width: calc(100%/5);
float: left;
padding: 20px 20px 0px 20px;
text-align: center;
font-size: 0.725rem;
}

@media screen and (max-width:680px) {
div#sucaro_box div#sucaro_area div#sucaro_details2 li{
width: calc(100%/2);
}
}

div#sucaro_box div#sucaro_area div#sucaro_details2 li img{
width: 100%;
height: auto;
border: solid 1px #ccc;
}

div#sucaro_box div#sucaro_area div#sucaro_details2 .hosoku{
text-align: center;
padding: 10px;
background-color: #eee;
font-size: 0.825rem;
clear: both;
}



/*-----------------
point
-----------------*/
div#flow_box{
width:100%;
float: left;
}

div#flow_box div#flow_area{
width:100%;
max-width:1200px;
margin:0 auto;
}

div#flow_box div#flow_area div#flow_headline{
width:100%;
float: left;
padding: 10px 0 10px 20px;
margin-bottom: 40px;
border-left: solid 3px #032088;
}
@media screen and (max-width:680px) {
div#flow_box div#flow_area div#flow_headline{
width: calc(100% - 20px);
float: left;
margin:0 10px 40px 10px;
}
}

div#flow_box div#flow_area div#flow_details{
width:100%;
float: left;
border-bottom:solid 1px #ccc;
}

div#flow_box div#flow_area .flow_details{
width:100%;
float: left;
background-color: #eee;
padding: 20px;
}

div#flow_box div#flow_area .flow_details .flow_details_text{
width: 100%;  
float: right;  
margin-left: -360px;  
}

div#flow_box div#flow_area .flow_details .flow_details_text .flow_details_text_box{
position: relative;  
margin: 0 0 0 380px;  
}

div#flow_box div#flow_area .flow_details .flow_details_img{
width: 360px;  
float: left;  
}

div#flow_box div#flow_area .flow_details .flow_details_img img{
width: 100%;
height: auto;
}

div#flow_box div#flow_area .flow_arrow{
width:100%;
float: left;
padding: 20px 0;
}

div#flow_box div#flow_area .flow_arrow img{
margin: 0 auto;
}

@media screen and (max-width:680px) {
div#flow_box div#flow_area .flow_details{
width: calc(100% - 20px);
float: left;
background-color: #eee;
padding: 20px;
margin: 0 10px;
}

div#flow_box div#flow_area .flow_details .flow_details_text{
width: 100%;  
float: right;  
margin-left: 0;  
}

div#flow_box div#flow_area .flow_details .flow_details_text .flow_details_text_box{
width: 100%;  
float: right;  
position:relative;  
margin: 0 0 0 0;  
}

div#flow_box div#flow_area .flow_details .flow_details_img{
width: 100%;  
float: left;  
}
}









/*-----------------
point
-----------------*/
div#price_box{
width:100%;
float: left;
}

div#price_box div#price_area{
width:100%;
max-width:1200px;
margin:0 auto;
}

div#price_box div#price_area div#price_headline{
width:100%;
float: left;
padding: 10px 0 10px 20px;
margin-bottom: 40px;
border-left: solid 3px #032088;
}
@media screen and (max-width:680px) {
div#price_box div#price_area div#price_headline{
width: calc(100% - 20px);
float: left;
margin:0 10px 40px 10px;
}
}

div#price_box div#price_area .price_details{
width:100%;
max-width:600px;
margin:0 auto;
padding-bottom: 40px;
}
@media screen and (max-width:680px) {
div#price_box div#price_area .price_details{
padding:0 10px 40px 10px;
}
}

div#price_box div#price_area .price_details p{
font-size: 0.825rem;
color: #666;
}

div#price_box div#price_area .price_details table{
width: 100%;
margin-bottom:20px;
}

div#price_box div#price_area .price_details th{
width: 200px;
border: solid #eee 1px;
background-color: #15308D;
padding:20px 10px;
font-weight: normal;
color: #fff;
}

div#price_box div#price_area .price_details td{
padding:20px 10px;
border: solid #eee 1px;
text-align: right;
}







/*-----------------
point
-----------------*/
div#finish_box{
width:100%;
float: left;
background-color: #15308D;
}

div#finish_first_box{
width:100%;
float: left;
margin-bottom: 50px;
}

div#finish_first_box img{
width:100%;
height: auto;
}

div#finish_end_box{
width:100%;
float: left;
}

div#finish_end_box img{
width:100%;
height: auto;
}



div#finish_box div#finish_area{
width:100%;
max-width:1200px;
margin:0 auto;
color: #fff;
}

div#finish_box div#finish_area div#finish_headline{
width:100%;
float: left;
padding: 10px 0 10px 20px;
margin-bottom: 40px;
border-left: solid 3px #fff;
}
@media screen and (max-width:680px) {
div#finish_box div#finish_area div#finish_headline{
width: calc(100% - 20px);
float: left;
margin:0 10px 40px 10px;
}
}

div#finish_box div#finish_area div#finish_details{
width:100%;
float: left;
padding-bottom: 40px;
margin-bottom: 40px;
}

@media screen and (max-width:680px) {
div#finish_box div#finish_area div#finish_details{
padding:0 10px 40px 10px;
}
}





/*-----------------
point
-----------------*/
div#sticker_box{
width:100%;
float: left;
margin-bottom: 100px;
}

div#sticker_box div#sticker_area{
width:100%;
max-width:1200px;
margin:0 auto;
}

div#sticker_box div#sticker_area div#sticker_headline{
width:100%;
float: left;
padding: 10px 0 10px 20px;
margin-bottom: 40px;
border-left: solid 3px #032088;
}
@media screen and (max-width:680px) {
div#sticker_box div#sticker_area div#sticker_headline{
width: calc(100% - 20px);
float: left;
margin:0 10px 40px 10px;
}
}

div#sticker_box div#sticker_area div#sticker_details{
width:100%;
max-width:800px;
margin:0 auto;
}

div#sticker_box div#sticker_area div#sticker_details img{
width:100%;
height: auto;
margin:0 auto;
}

@media screen and (max-width:680px) {
div#sticker_box div#sticker_area div#sticker_details{
padding:0 10px 40px 10px;
}
}






/*-----------------
point
-----------------*/
div#vice_box{
width:100%;
float: left;
padding-bottom: 50px;
}

div#vice_box div#vice_area{
width:100%;
max-width:1200px;
margin:0 auto;
}
div#vice_box div#vice_area div#vice_details{
width:100%;
background-color: rgba(0,0,0,0.8);
padding: 40px;
color: #fff;
}

div#vice_box div#vice_area div#vice_details img{
width:100%;
height: auto;
margin:0 auto;
}