@charset "utf-8";
/*SUBPAGE ==================================================================*/
/*---------------------------------------------------------------------------
  KAIGYOU
---------------------------------------------------------------------------*/
#subpage p.indention {
	clear:both;
	margin: 0 2%;
	height:40px;
	text-indent: -9999px;
	background:none;
}


/*---------------------------------------------------------------------------
  MIDASHI
---------------------------------------------------------------------------*/
#subpage h2 {
	clear:both;
	margin:20px 2%;
	padding-left:20px;
	font-size:187.5%;
	font-weight: 700;
    line-height: 120%;
    color:#1AAAEF;
	border-left:5px solid #1AAAEF;
}
#subpage h3 {
	clear:both;
	margin:20px 2%;
	padding: 15px;
	font-size:150%;
	font-weight: 700;
    color:#1AAAEF;
    background: rgba(26,170,239,0.10);
    border-radius: 5px;
}
#subpage h4 {
	clear:both;
	margin:20px 2%;
	font-size:125%;
	font-weight: 700;
    color:#1AAAEF;
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #subpage h2 {
        font-size:150%;
    }
    #subpage h3 {
        font-size:125%;
    }
    #subpage h4 {
        font-size:112.5%;
    }
}

/*---------------------------------------------------------------------------
  COMMENT
---------------------------------------------------------------------------*/
#subpage .comment {
	margin:0 2% 20px;
}


/*---------------------------------------------------------------------------
  PHOTO
---------------------------------------------------------------------------*/
#subpage .photo { position: relative; max-width:460px; text-align:center;}
#subpage .photo img { width: auto; max-width: 100%;}
#subpage .photo .cap { font-size:80%; text-align:center;}
#subpage .photo .pic + .cap {  margin-top: 10px;}
#subpage .photo .cap + .pic {  margin-top: 30px;}
#subpage .photo.pic_l { float: left; margin-right: 40px;}
#subpage .photo.pic_r { float: right; margin-left: 40px;}
#subpage .photo.pic_c { float: none; width: 100%; max-width:100%;}
@media only screen and (max-width:768px){
    #subpage .photo,
    #subpage .photo .pic { width: 100%; max-width:100%;}
    #subpage .photo.pic_l,
    #subpage .photo.pic_r,
    #subpage .photo.pic_c { float: none; margin:0 0 20px; }
}
    

/*---------------------------------------------------------------------------
  LIST
---------------------------------------------------------------------------*/
#subpage ul { margin:0 2% 40px;}
#subpage ul li { position:relative; padding-left: 25px;}
#subpage ul li + li { margin-top: 10px;}
#subpage ul li::before {
    display: block; clear: both; content:"";
    position: absolute; top:7px; left:2px;
    width: 10px; height: 10px;
    background:#0147A1;
    border-radius: 15px;
}
#subpage ol { clear:both; margin:0 2% 40px; padding-left: 23px; display: flex; flex-direction: column; gap:10px;}
#subpage ol li { padding-left:4px; list-style-type: decimal;}


/*---------------------------------------------------------------------------
  HYOU
---------------------------------------------------------------------------*/
#subpage table {
    margin:0 2%;
    width: 96%;
    background: #fff;
	border:1px solid #ddd;
	border-right:none;
	border-bottom:none;
	border-collapse:collapse;
}
#subpage table th,
#subpage table td {
    padding:7px 15px;
	border-right:1px solid #ddd;
	border-bottom:1px solid #ddd;
}
#subpage table th { text-align: left; font-weight: normal; background:#D9F1FA;}
@media only screen and (max-width:768px){
    #subpage table { margin:0 2%; width:96%; table-layout:auto;}
    #subpage table th,
    #subpage table td{
        table-layout:auto !important;
        display:block !important;
        padding:5% !important;
        width:90% !important;
        height:auto !important;
    }
}


/*---------------------------------------------------------------------------
  LINK
---------------------------------------------------------------------------*/
#subpage .icon-pdf,
#subpage .icon-word,
#subpage .icon-excel,
#subpage .icon-link { position: relative;  margin:0 2%;padding: 5px 0 5px 25px;}
#subpage .icon-pdf { background: url(../img/icon-pdf.jpg) no-repeat left 5px;}
#subpage .icon-word { background: url(../img/icon-word.jpg) no-repeat left 5px;}
#subpage .icon-excel { background: url(../img/icon-excel.jpg) no-repeat left 5px;}
#subpage .icon-link::after{ 
    position: absolute; top:7px; left: 0;
    display: block; clear: both; content:"";
    width: 17px; height: 17px;
    background:#0147A1 url("../img/icon_arrow_w.svg") no-repeat center center;
    background-size: 13px auto;
    border-radius: 30px;
}


/*---------------------------------------------------------------------------
  BOX
---------------------------------------------------------------------------*/

/* BOX1 */
#subpage .box1 { clear:both; margin:0 2% 40px; overflow: hidden;}
#subpage .box1 .comment { margin:0;}

/* BOX2 */
#subpage .box2 { clear:both;  margin:0 2% 40px; padding:40px; border: 2px solid #1AAAEF; overflow: hidden;}
#subpage .box2 h3 { clear: none; margin: 10px 0 20px; padding: 0; color:#222; border: none; overflow: hidden; background: none;}
#subpage .box2 h3::before { display: none;}
#subpage .box2 .comment { margin:0; }

/* BOX3 */
#subpage .box3 { clear:both; margin:0 2% 40px; padding:40px; background: rgba(26,170,239,0.07); overflow: hidden;}
#subpage .box3 .comment { margin:0;}

/* BOX4 */
#subpage .box4 { overflow: hidden;}
#subpage .box4 .box {
    float: left;
    margin:0 2% 40px;
    padding:30px;
    width:46%;
    background: rgba(26,170,239,0.07);
}
#subpage .box4 h4 { clear: none; margin: 0 2% 20px;}
#subpage .box4 h4::before { display:none; }
#subpage .box4 .comment { margin-bottom: 20px;  }
#subpage .box4 .photo { margin-bottom: 20px;  }
#subpage .box4 .photo img { width: auto; max-width: 100%; height: auto;}
#subpage .box4 .btn a:hover { opacity: 0.7; }
@media only screen and (max-width:768px){
    #subpage .box1 {  display: flex; flex-direction: column-reverse; gap:40px;}
    #subpage .box2 {  padding:20px; display: flex; flex-direction: column-reverse; gap:40px;}
    #subpage .box2 h3 { margin: 0px 0 10px; }
    #subpage .box3 { padding:20px; display: flex; flex-direction: column-reverse; gap:40px;}
    #subpage .box4 .box  {width: 98%;}
}


/*---------------------------------------------------------------------------
  BOTTON
---------------------------------------------------------------------------*/
#subpage .btn_box { overflow: hidden;}
#subpage .btn_box p { float: left; margin:0 2% 40px;}
#subpage .btn { margin: auto; width: 90%; max-width: 250px;}
#subpage .btn a {
    display: block;
    padding:10px 20px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: #0147A1;
    border-radius: 100px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.10);
}
#subpage .btn_box .b1 { float:none; clear: both; margin: 0 auto 40px; width: 100%; max-width:660px;}
#subpage .btn_box .b2 { width: 46%; max-width: none;}
#subpage .btn_box .b3 { width: 29.3%; max-width: none;}
#subpage .btn_box .b4 { width: 21%; max-width: none;}
@media only screen and (min-width:800px){
    #subpage .btn_box a:hover { opacity: 0.7;}
}
@media only screen and (max-width:800px){
    #subpage .btn_box p { float: none; width: 96% !important;  max-width:none !important;}
    #subpage .btn_box p a { background-position:97% center !important;}
}


/*---------------------------------------------------------------------------
  CONTACT
---------------------------------------------------------------------------*/
#subpage .contact {
    clear:both;
    overflow: hidden;
    margin:0 2% 40px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    border-radius: 20px;
}
#subpage .contact h5 {
    margin: 0; padding: 20px 30px;
    font-size: 137.5%;
    color: #004D77;
    border-bottom: 1px solid #ddd;
}
#subpage .contact .cont { padding: 20px 30px; overflow:hidden;}
#subpage .contact .come { float: left; width: calc(100% - 320px); line-height: 150%;}
#subpage .contact .btn { float: right; width: 300px;}
@media only screen and (min-width:768px){
    #subpage .contact .btn a:hover { opacity: 0.7;}
}
@media only screen and (max-width:800px){
    #subpage .contact h5 { font-size: 112.5%;}
    #subpage .contact .come,
    #subpage .contact .btn { float:none; width:100%;}
    #subpage .contact .btn { margin-top: 15px;}
}


/*---------------------------------------------------------------------------
  PHOTO BOX
---------------------------------------------------------------------------*/
#subpage .gallery { overflow: hidden;}
#subpage ul.photo_box { float: left; margin: 0 2% 40px; padding: 0; list-style: none;}
#subpage ul.photo_box li { margin:0; padding: 0; list-style: none; background: none;}
#subpage ul.photo_box li::before { display: none;}
#subpage ul.photo_box li.photo { margin:0 0 10px; max-width: none;}
#subpage ul.photo_box li.cap { line-height: 150%;}
#subpage ul.photo_box li.youtube { margin:0 0 10px; position: relative;}
#subpage ul.photo_box li.youtube iframe {
	position: absolute; top: 0; right: 0;
    width: 100% !important;
	height: 100% !important;
}
/* PHOTO BOX1 */ #subpage ul.g1 {width:96%; float:none; clear:both; }
/* PHOTO BOX2 */ #subpage ul.g2 {width:46%;}
/* PHOTO BOX3 */ #subpage ul.g3 {width:29.3%;}
/* PHOTO BOX4 */ #subpage ul.g4 {width:21%;}
/* PHOTO BOX5 */ #subpage ul.g5 {width:16%;}
#subpage ul.photo img { width: 100%; max-width:1010px; height:auto;}
@media only screen and (max-width:800px){
   #subpage ul.photo_box { width:96%; float:none; clear:both; }
}


/*---------------------------------------------------------------------------
  LINE
---------------------------------------------------------------------------*/
#subpage .line { margin:0 2%; width: 90%; max-width: 1000px;}
#subpage .line hr { margin: 0; padding: 0; height: 1px;  background: #ccc; border: none;}