@charset "utf-8";

/*	baseset
----------------------------------------------- */

button{
 overflow: visible;	
 text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*	page entry
----------------------------------------------- */
#contents .box,
#contents .box_22,
#contents .box .col_1,
#contents .box .col_2,
#contents .box .col_3,
#contents .box_22 .col_3,
#contents .box_22 .col_3_2,
#contents .box .col_4,
#contents .box .col_4_3,
#contents .box .col_5{
	margin-top: 20px ;
	margin-bottom: 10px ;
}

#contents .box,
#contents .box_22{
 padding-top: 0;
 padding-bottom: 0;
}

#contents .box div p {
 margin-bottom:10px; 
 padding-bottom:0px
}

#contents .box,
#contents .box_22{
 margin-left:-3%; 
 width:103%; 
 padding-bottom:30px;
 position:relative;
}

#contents .box img {
 margin-bottom:0;
}

#contents p.image_left {text-align:left;}
#contents p.image_right{text-align:right;}
#contents p.image_center{text-align:center;}

#contents .box .col_1 {
 margin-left:6%;
 width:88%;
 float: left; 
 margin-bottom:0;
 text-align: center; /* add */
}

#contents .box .col_2 {
 margin-left: 3%; 
 width: 47%;
 float: left; 
 margin-bottom: 0;
 text-align: center; /* add */
}

#contents .box_22 .col_3 {
 margin-left: 3%; 
 width: 30.3%; 
 float: left; 
 margin-bottom: 0;
 text-align: center; /* add */
}

#contents .box_22 .col_3_2{
 margin-left: 3%; 
 width: 63.6%; 
 float: left; 
 margin-bottom: 0;
 text-align: center; /* add */
}

#contents .box .col_4{
 margin-left: 3%; 
 width: 22%; 
 float: left; 
 margin-bottom: 0;
 text-align: center; /* add */
}

#contents .box .col_4_3 {
 margin-left: 3%; 
 width: 72%; 
 float: left; 
 margin-bottom: 0;
 text-align: center; /* add */
}

#contents .box .col_5 {
 margin-left: 3%; 
 width: 17%; 
 float: left; 
 margin-bottom: 0;
 text-align: center; /* add */
}

#contents .box .col_2 .col_2_img190l{
 width:36.315%; 
 float:left;
 margin-bottom:0;
}



#contents .box .col_2 .col_2_img300r{
 margin-left:6%;
 width:57.685%; 
 float:left; 
 margin-bottom:0;
}

#contents .box .col_2 .col_2_img250l{
 width:46.4%;
 float:left;
 margin-bottom:0;
}

#contents .box .col_2 .col_2_img250r{
 margin-left:6%;
 width:47.6%;
 float:left;
 margin-bottom:0;
}

#contents  a.Btn_01 {
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  color: #333;
  font-size: 16px;
  padding: 10px 0px 10px 0px;
  text-decoration: none;
  width:90%;
  margin:3% 5% 5%;
  display:block;
  text-align:center;
  background: url(/commons/img/icn_arrow_green.png) no-repeat 10px center ;
  background-size:6px 8px;
  background-color: #eee;
  border: 1px solid #ddd;
}

#contents  a.Btn_01:hover {
  color:#fff;
  background: url(/commons/img/icn_arrow_white.png) no-repeat 10px center ;
  background-size:6px 8px;
  background-color: #008000;
  text-decoration: none;
  display:block;
  text-align:center;
    border: 1px solid #008000;
    text-decoration: underline;
}

#contents  a.Btn_04 {
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  color: #333;
  font-size: 16px;
  padding: 20px 0px;
  text-decoration: none;
  width:50%;
  margin:3% 5% 5%;
  display:block;
  text-align:center;
  background-size:22px 9px;
  background-color: #eee;
  border: 1px solid #ddd;
  margin: auto;
}

#contents a.Btn_04:hover {
  color:#fff;
  background-size:22px 9px;
  background-color: #008000;
  text-decoration: none;
  display:block;
  text-align:center;
    border: 1px solid #008000;
    text-decoration: underline;
}
#contents a.Btn_04.no-arrow {
 background-image: none;
}

#contents .unit_5{
 margin-left: -3% !important; 
 width: 103% !important; 
 overflow: hidden;
}

#contents .unit_5 .arrow_white {
 padding-left: 10px;
 background-size: 6px 8px
}

#contents .unit_5_1{ 
 display: block;
 width: 47%; 
 margin-left: 3%; 
 float: left; 
 margin-bottom: 30px;
 line-height: 2;
 color:#ccc !important; 
 background: #888;
 border: 1px solid #ccc;
}

#contents .unit_5_2{ 
 padding: 10px 20px 20px 20px; 
 line-height: 2; 
 overflow: hidden;
}

#contents a .unit_5_2 b{
 width: 100%; 
 display: block;
 color:#fff !important;
}
#contents .unit_5_1:hover{
 background: #666;
}

#contents .unit_6{
 margin-left: -3% !important;
 width: 103% !important; 
 overflow: hidden;
}
#contents .unit_6 .arrow {
 padding-left: 10px;
 background-size: 6px 8px
}
#contents .unit_6_1{ 
 width: 47%; 
 margin-left: 3%; 
 display: block;
 float: left; 
 margin-bottom: 30px;
 line-height: 2; 
 border: 1px solid #ddd;
}
#contents .unit_6_2{ 
 padding: 10px 20px 20px 20px; 
 line-height: 2;
 overflow: hidden;
}

#contents a .unit_6_2 b{
 width: 100%; 
 display: block;
}
#contents .unit_6_1:hover{
 background: #eee;
}


#contents .unit_7{
 margin-left: -3% !important; 
 width: 103% !important; 
 overflow: hidden;
}

#contents .unit_7 .arrow_white {
// padding-left: 10px;
 background-size: 6px 8px
}

#contents .unit_7_1{ 
 display: block;
 width: 17%; 
 margin-left: 3%; 
 float: left; 
 margin-bottom: 30px;
 line-height: 2;
 color:#ccc !important; 
 background: #888;
 border: 1px solid #ccc;
}

#contents .unit_7_2{ 
 font-size: 10px;
 padding: 0 20px 5px 20px; 
 line-height: 2; 
 overflow: hidden;
}

#contents a .unit_7_2 b{
 width: 100%; 
 display: block;
 font-size: 12px;
 padding-top: 10px;
 color:#fff !important;
}

#contents .unit_7_1:hover{
 background: #666;
}


#contents table{
 margin-top: 30px;
 margin-bottom:50px;
 width:100%;
 table-layout:auto;
 border-collapse:collapse;
}

#contents table th,
#contents table td{
 border:1px solid #ccc;	
 font-weight:normal; 
 line-height: 1.8em;
}

#contents table th{
 width:18%;
 text-align:center;
}
#contents table td{
 width:auto; 
 color:#333;
 text-align:left;
 padding: 10px; 
}

#contents .table_nomal_1 th,
#contents .table_nomal_2 th{
 background:#d8d8d8;
 font-weight:bold;
}

#contents table.table_borderless th,
#contents table.table_borderless td,
#contents table.table_borderless_3 th,
#contents table.table_borderless_3 td,
#contents table.table_history th,
#contents table.table_history td{
 border:none;
}


#contents table.table_history th{
 width: 10%;
 padding: 10px;
}
#contents table.table_history td{
 width:60px;
 padding:10px;
}

#contents .balloon,
#contents .balloon_border {
 margin: 20px 0 40px 0;
 width: 85%;
}

#contents .balloon .pic span,
#contents .balloon_border .pic span{
 display: inline-block;
 width: 100px;
 height: 100px;
 border-radius: 100%;
 overflow: hidden;
}

#contents .balloon .pic img,
#contents .balloon_border .pic img{
 width: 100% ;
 height: 100% !important;
 object-fit:cover;
 font-family: 'object-fit: cover;' /* IE・Edge対応 */
}

#contents .balloon .desc, 
#contents .balloon_border .desc {
 padding: 20px;
 border-radius: 10px;
 position: relative;
 display: flex;
 align-items: center;
}

#contents .balloon .desc:before,
#contents .balloon_border .desc:before {
 content: "";
 position: absolute;
 height: 20px;
 width: 20px;
}
#contents .balloon .desc:after{
 content: "";
 position: absolute;
 height: 40px;
 width: 40px;
 border-radius: 50%;
 background: #fff;
}

#contents .balloon_border .desc:after{
 content: "";
 position: absolute;
}


#contents .balloon.gray .desc,
#contents .balloon.gray .desc:before{
 background-color: #D2D6D8;
}

#contents .balloon.yellow .desc,
#contents .balloon.yellow .desc:before{
 background-color: #FFFBD1;
}

#contents .balloon.green .desc,
#contents .balloon.green .desc:before{
 background-color: #CCE5CC;
}

#contents .balloon.blue .desc,
#contents .balloon.blue .desc:before{
 background-color: #D1E5F4;
}

#contents .balloon.pink .desc,
#contents .balloon.pink .desc:before{
 background-color: #FDEDED;
}

#contents .balloon.main_color .desc{
    background-color: #fff;
    border: solid 2px #1e67ab;/*#1e67ab*/
}

#contents .balloon.folder_color .desc{
    background-color: #fff;
    border: solid 2px #1e67ab;/*#1e67ab*/
}


#contents .codebox{
 margin:10px 0 30px 0;
}

#contents .codebox input {
 padding:5px; 
 margin-bottom:10px;
}

#contents .codebox pre {
 padding:20px;
 border:solid 1px #ccc;
 background-color:#f7f7f7;
 font-size:10px;
}

#contents button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

/*	pc
----------------------------------------------- */
@media screen and (min-width: 768px) {
#container, #footer {
  min-width: 1068px;
}
#contents .box .col_1 img {
/* width: 100%;
 height: 450px; */
 max-width: 980px;
 max-height: 450px;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}

#contents .box .col_2 img {
/* width: 100%;
 height: 368px;*/
 max-width: 520px;
 max-height: 360px;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}

#contents .box_22 .col_3 img {
/* width: 100%;
 height: 240px; */
 max-width: 340px;
 max-height: 240px;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}

#contents .box_22 .col_3_2 img {
/* width: 100%;
 height: 430px; */
 max-width: 700px;
 max-height: 450px;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}

#contents .box .col_4 img{
/* width: 100%; 
 height: 177px; */
 max-width: 250px; 
 max-height: 180px;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}

#contents .box .col_4_3 img{
/* width: 100%; 
 height: 490px; */
 max-width: 800px; 
 max-height: 450px;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}

#contents .box .col_5 img{
/* width: 100%; 
 height: 130px; */
 max-width: 190px; 
 max-height: 130px;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}

#contents .box .col_2 .col_2_img190l img{
 width:100%; 
 height: auto;
}

#contents .box .col_2 .col_2_img250l img{
 width:100%;
 height: auto;
}

#contents .unit_5_1 img{
 width: 100%; 
 height: 360px;
 padding: 0; 
 margin: 0; 
 float: left;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}
#contents .unit_6_1 img{
 width: 100%; 
 height: 360px;
 padding: 0; 
 margin: 0;
 float: left;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}

#contents .unit_7_1 img{
 width: 100%; 
 height: 220px;
 padding: 0; 
 margin: 0; 
 float: left;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}

#contents .balloon,
#contents .balloon_border {
 display: -webkit-box;
 display: flex;
 align-items: center;
 margin: 0 auto;
}
#contents .balloon.right, 
#contents .balloon_border.right {
 -webkit-box-orient: vertical;
 -webkit-box-direction: reverse;
 flex-direction: row-reverse;
}
#contents .balloon .pic,
#contents .balloon_border .pic{
 z-index: +3;
}
#contents .balloon .desc,
#contents .balloon_border .desc{
 z-index: +2;
}
#contents .balloon.left .desc,
#contents .balloon_border.left .desc{
 min-width: 120px;
 max-width: 60%;
 margin: 0 30px 0 30px;
 }
#contents .balloon.right .desc,
#contents .balloon_border.right .desc{
 min-width: 120px;
 max-width: 60%;
 margin: 0 30px 0 30px;
}

#contents .balloon.left .desc:before{
 top: 25px;
 left: -20px;
}
#contents .balloon.left .desc:after{
 top: 25px;
 left: -40px;
}
#contents .balloon.right .desc:before{
top: 25px;
right: -20px;
}
#contents .balloon.right .desc:after{
 top: 25px;
 right: -40px;
}


#contents .balloon_border.main_color.left .desc:before {
 top: 25px;
 left: -20px;
 border-style: solid;
 border-color: #1e67ab #1e67ab transparent transparent ; /*変更可*/
 border-width: 10px;
}

#contents .balloon_border.folder_color.left .desc:before {
 top: 25px;
 left: -20px;
 border-style: solid;
 border-color: #1e67ab #1e67ab transparent transparent ; /*変更可*/
 border-width: 10px;
}

#contents .balloon_border.left .desc:after {
 top: 28px;
 left: -14px;
 border-style: solid;
 border-color: #fff #fff transparent transparent ; 
 border-width: 10px;
}


#contents .balloon_border.main_color.right .desc:before {
 top: 25px;
 right: -22px;
 border-style: solid;
 border-color: #1e67ab transparent transparent #1e67ab ; /*変更可*/
 border-width: 10px;
}

#contents .balloon_border.folder_color.right .desc:before {
 top: 25px;
 right: -22px;
 border-style: solid;
 border-color: #1e67ab transparent transparent #1e67ab ; /*変更可*/
 border-width: 10px;
}

#contents .balloon_border.right .desc:after {
 top: 28px;
 right: -14px;
 border-style: solid;
 border-color: #fff transparent transparent #fff; 
 border-width: 10px;
}

#contents table th,
#contents table td{
 text-align:justify; 
 padding: 30px;	
}

}

/* 767以下 ： モバイル */
@media screen and (max-width: 767px) {

#contents .box div p{
 margin-bottom:0;
 padding-bottom:0px;
}

#contents .box_22,
#contents .box{
 width:100%;
 margin:0;
 padding:0 0 10px;
 display:flex; 
// justify-content: space-between;
 flex-wrap: wrap;
 align-items: center;
 align-content: center;
 display: -webkit-flexbox;
 display: -moz-flexbox;
 display: -ms-flexbox;
 display: -o-flexbox;
}

#contents .box .col_1,
#contents .box .col_2,
#contents .box_22 .col_3,
#contents .box_22 .col_3_2,
#contents .box .col_4_3{
 width:100%; 
 float:none; 
 margin:0;
 padding:0 0 10px;
 object-fit:fill;
}

/*#contents .box .col_1 img,
#contents .box .col_2 img,
#contents .box_22 .col_3 img,
#contents .box_22 .col_3_2 img,
#contents .box .col_4_3 img{
 height: 260px !important;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
/*}

#contents .box .col_4 img,
#contents .box .col_5 img,
#contents .box .col_2 .col_2_img190l img{
 height: 200px !important;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
/*}*/

#contents .box .col_4:first-child,
#contents .box .col_5:first-child{
 margin-left: 0px; 
}

#contents .box .col_4,
#contents .box .col_5{
 flex: 0 0 48%; 
 margin-left: 4px; 
}


#contents .table_nomal_1 {
 width:95%;
 margin:2em auto;
}

#contents .table_nomal_1  th{
 width:100%;
 padding:3px;
 display:block;
 background-color:#d8d8d8;
}

#contents .table_nomal_1  td{
 padding:5px;
 display:block;
 text-align:center;
}


#contents .unit_5_1{ 
 width: 97%;
}

#contents .unit_5_1 img{
 height: auto;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}


#contents .unit_6{ 
 margin-left: 0% !important; 
 width: 100% !important; 
 overflow: hidden;
}
#contents .unit_6_1{ 
 width: 100%; 
 margin-left: 0%; 
 display: block; 
 float: left; 
 margin-bottom: 30px;
}

#contents .unit_6_1 img{
 height: auto;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}

#contents .unit_7{ 
 margin-left: 0% !important; 
 width: 100% !important; 
 overflow: hidden;
}
#contents .unit_7_1{ 
 width: 47%; 
 margin-left: 6px; 
 display: block; 
 float: left; 
// margin-bottom: 30px;
}

#contents .unit_7_1 img{
 height: auto;
 object-fit:fill;
 font-family: 'object-fit: fill;' /* IE・Edge対応 */
}


#contents .box .col_2 .col_2_img190l {
 width:100%; 
 float:left; 
 margin:20px 0 10px 0;
}
#contents .box .col_2 .col_2_img300r {
 margin-left:0; 
 width:100%; 
 float:right; 
 margin:20px 0 10px 0;
}

#contents .box .col_2 .col_2_img250l {
 width:100%;
 float:left; 
 margin:20px 0 10px 0;
}
#contents .box .col_2 .col_2_img250r {
 margin-left:0;
 width:100%;
 float:right; margin:20px 0 10px 0;
}

#contents .balloon, 
#contents .balloon_border{
 width: 100%;
}

#contents .balloon .pic,
#contents .balloon_border .pic{
 margin-bottom: 30px;
 z-index: +1;
 position: relative;
}
#contents .balloon.right .pic,
#contents .balloon_border.right .pic{
 text-align: right;
}
#contents .balloon .desc,
#contents .balloon_border .desc{
 padding: 15px;
}


#contents .balloon.left .desc:before,
#contents .balloon_border.left .desc:before{
 top: -20px;
 left: 50px;
}
#contents .balloon.left .desc:after{
 top: -40px;
 left: 50px;
}

#contents .balloon.right .desc:before,
#contents .balloon_border.right .desc:before {
 top: -20px;
 right: 50px;
}
#contents .balloon.right .desc:after {
 top: -40px;
 right: 50px;
}

#contents .balloon_border.main_color.left .desc:before{
 border-style: solid;
 border-color: transparent transparent #1e67ab #1e67ab  ; /*変更可*/
 border-width: 10px;
}

#contents .balloon_border.folder_color.left .desc:before{
 border-style: solid;
 border-color: transparent transparent #1e67ab #1e67ab  ; /*変更可*/
 border-width: 10px;
}

#contents .balloon_border.left .desc:after{
 top: -12px;
 left: 53px;
 border-style: solid;
 border-color: transparent transparent #fff #fff ; 
 border-width: 8px;
}

#contents .balloon_border.main_color.right .desc:before {
 border-style: solid;
 border-color: transparent #1e67ab #1e67ab transparent ; /*変更可*/
 border-width: 10px;
}

#contents .balloon_border.folder_color.right .desc:before {
 border-style: solid;
 border-color: transparent #1e67ab #1e67ab transparent ; /*変更可*/
 border-width: 10px;
}

#contents .balloon_border.right .desc:after {
 top: -12px;
 right: 53px;
 border-style: solid;
 border-color: transparent #fff #fff transparent ;
 border-width: 8px;
}

}