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

#construction { background: url(../images/index/bg_04.gif) right bottom no-repeat; padding: 70px 0 80px;}
#construction ul#big { margin: 80px 0 0 -8px;}
#construction ul#big li { float: left; width: 496px; margin: 0 0 35px 8px;}
#construction ul#big li div { text-align: center; padding: 15px 10px;}
#construction ul#big li div h4 { font-size: 16px; padding: 0 0 10px;}
#construction ul#small li { float: left; width: 194px; margin: 0 0 0 7px;} 
#construction ul#small li:first-child { margin: 0;}
#construction ul#small li div h4 { font-size: 16px; padding: 20px 0 15px; text-align: center;}
#construction ul#small li.second div h4 { padding: 5px 0; line-height: 130%;}


#example { background: url(../images/index/bg_02.gif) no-repeat; padding: 80px 0 70px; }
#example #example_wrap { background: url(../images/index/bg_04.gif) right bottom no-repeat; padding: 0 0 25px;}
#example h3.h3 { background: url(../images/common/line_02.gif) left bottom no-repeat; text-align: left;}
#example h4 { font-size: 22px; padding: 0 0 10px;}
#example ul li { margin: 85px 0 0; }
#example ul li .before { float: left; width: 490px; background: url(../images/example/arw_01.png) right 230px no-repeat; padding: 0 80px 0 0;}
#example ul li .after { float: right; width: 490px; padding: 0 0 0 30px;}
#example ul li .before div { border: 5px solid #dddddd; position: relative;}
#example ul li .after div { border: 5px solid #0086c9; position: relative;}
#example ul li div p { font-size: 16px; width: 100px; text-align: center; position: absolute; left: 0; top: 0;}
#example ul li div img { width: 100%; height: auto;}
#example ul li div h4 { padding: 0 0 35px; height: 80px; font-family: 'Noto Sans Japanese medium'; }
#example ul li div h4.short { padding: 35px 0 0 ; height: 80px;}
#example ul li div h4 span { font-size: 18px; display: block;}
#example ul li div h4 small { font-size: 12px; line-height: 130%;}
#example ul li .before div p { background: #dddddd;}
#example ul li .after div p { background: #0086c9; color: #fff;}

#history { padding: 100px 0 0; }
#history dl { font-size: 16px; font-family: 'Noto Sans Japanese medium'; padding: 30px 0 0; }
#history dl dt { float: left; padding: 0 0 30px; width: 150px;}
#history dl dd { padding: 0 0 30px 150px;}
#history dl dd ul { padding: 0 0 0 105px; width: 350px;}
#history dl dd ul li { float: left; width: 175px;}
#history dl dd table { text-align: left; width: 100%; margin: 35px 0 0; }
#history dl dd table tr th { width: 400px; padding: 0 0 30px; text-align: left;}
#history dl dd table tr td { padding: 0 0 30px;}
#history dl dt.border { padding: 30px 0;}
#history dl dd.border { border-top: 1px solid #b5b5b5;}
#history dl dd table.no-border { border-bottom: none;}
#history dl dd.border.pad { padding: 30px 0;} 

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){

#construction { background: url(../images/index/bg_04.gif) right bottom no-repeat; background-size: 280px auto; padding: 30px 0 30px;}
#construction ul li img { width: 100%; height: auto;}
#construction ul#big { margin: 40px 0 0;}
#construction ul#big li { float: none; width: 100%; margin: 0 0 15px;}
#construction ul#big li div { text-align: center; padding: 15px 10px;}
#construction ul#big li div h4 { font-size: 16px; padding: 0 0 10px;}
#construction ul#small li { float: none; width: 100%; margin: 0 0 15px;} 
#construction ul#small li:first-child { margin: 0 0 15px;}
#construction ul#small li img { float: left; width: 40%; height: auto;}
#construction ul#small li div { float: left; width: 57%; padding: 0 0 0 3%;}
#construction ul#small li div h4 { font-size: 14px; padding: 0 0 10px; text-align: left;}
#construction ul#small li.second div h4 { padding: 0 0 5px;}


#example { background: url(../images/index/bg_02.gif) no-repeat; padding: 40px 0 35px; background-size: 260px auto;}
#example h3.h3 { background: url(../images/common/line_02.gif) left bottom no-repeat; text-align: left; background-size: 40px auto;}
#example h4 { font-size: 18px; padding: 0 0 10px;}
#example ul li { margin: 40px 0 0; }
#example ul li img { width: 100%; height: auto;}
#example ul li .before { float: none; width: 100%; background: url(../images/example/arw_01_sp.png) center bottom no-repeat; padding: 0 0 40px; background-size: 35px auto;}
#example ul li .after { float: none; width: 100%; padding: 15px 0 0;}
#example ul li .before div { border: 3px solid #dddddd; position: relative;}
#example ul li .after div { border: 3px solid #0086c9; position: relative;}
#example ul li div p { font-size: 14px; width: 100px; text-align: center; position: absolute; left: 0; top: 0;}
#example ul li div img { width: 100%; height: auto;}
#example ul li div h4 { padding: 0 0 15px; height: auto;}
#example ul li div h4.short { padding: 15px 0 0 ; height: auto;}
#example ul li div h4 span { font-size: 14px; display: block;}
#example ul li div h4 small { font-size: 12px; line-height: 130%;}
#example ul li .before div p { background: #dddddd;}
#example ul li .after div p { background: #0086c9; color: #fff;}

#history { padding: 40px 0 0; }
#history dl dd { padding: 0; }
#history dl dd table { text-align: left; width: 100%; margin: 35px 0 0; }
#history dl dd table tr th { width: 100%; display: block; padding: 0 0 10px; text-align: left; font-size: 14px; font-family: 'Noto Sans Japanese medium'; border-bottom: 1px solid #000; }
#history dl dd table tr td { padding: 10px 0 30px; width: 100%; display: block; font-family: 'Noto Sans Japanese medium'; font-size: 14px; }

}