@charset "UTF-8";

/*-------------------------
__style
-------------------------*/

#contents .btn_list{ margin: 0 0 30px 0;}
#contents .btn_list ul li{ text-align: center; float:left; margin-right:25px; width: 25%; width: calc((100% - 75px) / 4); width: -webkit-calc((100% - 75px) / 4); width: -moz-calc((100% - 75px) / 4); box-sizing:border-box; border-left:1px solid #fff;}
#contents .btn_list ul li:last-child{ margin-right: 0;}
#contents .btn_list ul li a{ display: block; border: 4px solid #00349f; box-sizing: border-box; text-decoration: none; padding: 20px 0 25px; border-radius: 5px;}
#contents .btn_list ul li a:hover{ background-color:#e0f0fc;}
#contents .btn_list ul li a p{ text-align: center;}
#contents .btn_list ul li a p.btn_icon{ width:85px; height:85px; margin: 0 auto 20px;}
#contents .btn_list ul li a p.btn_icon img{ width:100%; height:auto;}
#contents .btn_list ul li a p.btn_text{ font-size: 1.7em; color: #00349f; font-weight: 700; }

@media screen and (max-width: 767px) {

#contents .btn_list{ margin: 0 0 20px 0;}
#contents .btn_list ul li{ float: none; width:100%; margin-bottom:5px;}
#contents .btn_list ul li a{  border: 2px solid #00349f; padding: 12px 0 10px 5px; border-radius: 5px; text-align:left;}
#contents .btn_list ul li a p{ display: inline-block; vertical-align: middle; padding: 0 5px;}
#contents .btn_list ul li a p.btn_icon{ width:20px; height:20px; margin: 0;}
#contents .btn_list ul li a p.btn_text{ font-size: 1.5em; }

}

#contents #box_01,#box_02,#box_03,#box_04{ margin: -80px 0 40px 0; padding-top:80px;}
#contents .active .icon {/*transform: rotate(45deg);*/}
#contents .container { margin-top: 20px;}
#contents .accordion { width: 100%; margin: auto;}
#contents .menu { position: relative; padding: 15px; background: #e0f0fc; color: #00349f; list-style: none; font-size: 1.7em; font-weight: 700; border-bottom: 4px solid #fff; cursor: pointer;}
#contents .icon { display: block; position: absolute; top: 0; bottom: 0; right: 20px; width: 10px; height: 2px; margin: auto; background: #00349f; content: ""; transition: all 0.3s;}
#contents .icon::before { display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 2px; height: 10px; margin: auto; background: #00349f; content: "";}
#contents .active .icon::before { display: none;}
#contents .subMenu { display: none; margin: 10px 0 20px; padding: 0; background: #fff; font-size: 1.5em; line-height: 1.7;}
#contents .subMenu p{}
#contents .subMenu .img_box{ max-width: 100%; height:auto; margin: 20px 0; text-align:center;}
#contents .subMenu .img_box img{ max-width: 100%; height: auto;}
#contents .subMenu dl{ margin: 20px 0;}
#contents .subMenu dl.dl_border{ border: 1px solid #000; padding: 10px 15px; box-sizing:border-box;}
#contents .subMenu dl dt{ font-size: 1.2em; line-height: 1.2; font-weight:700; margin-bottom: 5px;}
#contents .subMenu dl dd{}
#contents .subMenu ul.ul_only{ margin: 20px 0;}


@media screen and (max-width: 767px) {

#contents #box_01,#box_02,#box_03,#box_04{ margin: 0 0 20px 0; padding: 0;}
#contents .container { margin-top: 10px;}
#contents .menu { font-size: 1.5em; line-height: 1.2; padding: 12px 40px 10px 12px!important;}
#contents .subMenu { font-size: 1.3em; line-height: 1.6; margin: 8px 0 13px;}
#contents .subMenu .img_box{ margin: 15px 0;}
#contents .subMenu dl{ margin: 15px 0;}
#contents .subMenu dl.dl_border{ padding: 10px 13px; }
#contents .subMenu ul.ul_only{ margin: 10px 0;}
#contents .subMenu ul li{padding-left:1em; text-indent:-1em;}
    
}