@charset "UTF-8";

/*===========================================
	title_block
=============================================*/
#contents .title_block{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
            justify-content: space-between;
    border-bottom: 1px solid #D0D0D0;
    margin-bottom: 2em;
}

/*===========================================
	フォント
=============================================*/
#contents h1.title {
    border-bottom: none;
}

#contents h2.title {
    font-size: 1.6em;
    font-weight: normal;
    margin: 0;
}

p{
    font-size: 16px;
}

p.link_r{
    margin-bottom: 0;
    display: block;
}

p.link_sp{
    display: none;
}

.font_18 {
	font-size: 18px;
}
.b {
	font-weight: bold;
}

/*===========================================
	スタイル
=============================================*/
.pcCnt {
	display:block;
}

.spCnt {
	display:none;
}
.both {
	display:block;
}

.txtC {
	text-align:center;
}

.ml_15 {
	margin-left: 15px;
}
.ml_10 {
	margin-left: 10px;
}

/*===========================================
	txtlink
=============================================*/
a.txtlink {
    margin: 10px 5px;
    padding: 0 0 0 10px;
    background: url(/share/images/arrow_black.gif) no-repeat left 0.4em;    
    display: inline-block;
}

/*===========================================
	txtIndent
=============================================*/
.txtIndent{
    text-indent: -1em;
    padding-left: 1em;
}


/*===========================================
	横幅
=============================================*/
.w840 {
	width: 840px;
	margin-left: auto;
	margin-right: auto;
}


/*===========================================
	glayWakuArea
=============================================*/
.glayWakuArea {
	border : solid 1px #CCCCCC;
	background: #f5f5f5;
	padding: 15px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}


/*===========================================
	wakuRedArea
=============================================*/
 .wakuRedArea {  
 	border : solid 1px red;  
 	padding: 15px;  
 	-webkit-box-sizing: border-box;  
 	-moz-box-sizing: border-box;  
 	box-sizing: border-box;
	 color: red;
	 margin-top: 1em;
 }  

/*===========================================
	titlewaku
=============================================*/
.titlewaku{
    overflow: hidden;
    padding-bottom: 1em;
    margin-bottom: 2em;
    border-bottom: #000 solid 1px;
}
.pctleft {
    float: left;
}

.tblock {
    float: left;
    margin: 0.5em 1.5em 0;
}

.titlewaku .wakuRedArea {
	width: 600px;
	margin: 20px auto 0;
}


/*===========================================
	c5-msappli-list
=============================================*/
.c5-msappli-list{
    margin: 2em 10em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
}


 @media (max-width:640px) {
    /*===========================================
	title_block
    =============================================*/
    #contents .title_block{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-bottom: none;
        margin-bottom: 2em;
    }
    #contents h1.title {
        border-bottom: 1px solid #D0D0D0;
    }
    
	
	/*===========================================
		スタイル
	=============================================*/
    .pcCnt {
		display:none;
	}
	.spCnt {
		display:block!important;
	}
    .both {
	    display:block!important;
    } 
	.ml_15 {
		margin-left: 0px;
	}
	.ml_10 {
		margin-left: 0px;
	}


	/*===========================================
		横幅
	=============================================*/
	.w840 {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}


	/*===========================================
		titlewaku
	=============================================*/
	.pctleft {
		text-align: center;
		float: none;
	}
	.tblock {
		margin: 1.5em 0 0;
		text-align: center;
        float: none;
	}

	#contents h2.title {
		font-size: 1.2em;
	}
     
	.titlewaku .wakuRedArea {
		width: auto;
		margin: 20px auto 10px;
	}

     .c5-msappli-list{
        -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
        margin: 2em auto;
    } 
    
	/*===========================================
		nowrap
	=============================================*/
	span.nowrap {
		white-space: nowrap;
        word-break: keep-all;
	}    
}

@media (max-width:470px){
    #contents .title_block p.link_r{
    display: none;
    }

    #contents .title_block p.link_sp{
        display: block;
        text-align: right;
    }
    
    #contents .title_block p.link_sp a{
         margin-bottom: 0;
    } 
}


    

/*===========================================
	c5-4col
=============================================*/
.c5-4col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
}
.c5-4col li {
    margin: 0;
    padding: 0 20px;
    width: 33%;
    box-sizing: border-box;
    list-style: none;
    text-align: center; 
}
    
.c5-4col li .c5-img {
    position: relative;
    display: inline-block;
}
      
.c5-4col li .c5-img span {
    position: absolute;
    z-index: 9;
    bottom: -11px;
    left: -30px;
    color: #467db3;
    font-size: 48px;
}

.c5-4col li .c5-img img {
    width: 100%;
    max-width: 220px;
}
        
@media (max-width: 979px) {
    .c5-4col li .c5-img span {
        font-size: 30px;
        bottom: -1px;
        left: -10px; }
    .c5-4col li .c5-txt br {
        display: none; 
        } 
}
@media (max-width: 640px) {
    .c5-4col {
        padding-left: 5px!important; 
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        }
    .c5-4col li {
        width: auto;
        margin-bottom: 3em!important;
    }
    .c5-4col li .c5-img span {
        font-size: 40px;
        bottom: -10px;
        left: -24px; 
        } 
}


/*===========================================
	c5-2col
=============================================*/
.c5-2col {
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  margin: 2em auto;
  padding: 0;
  max-width: 1100px; 
}
  .c5-2col.c5-2col--mpl53 {
    margin-left: -53px; 
}
.c5-2col.c5-2col--pad li {
      padding: 0 20px; 
}
.c5-2col li {
    margin: 0;
    padding: 0 40px;
    width: 50%;
    box-sizing: border-box;
    list-style: none;
    text-align: center; 
}
.c5-2col li .c5-img {
      position: relative;
      display: inline-block; 
}
.c5-2col li .c5-img span {
        /* position: absolute;
        z-index: 9;
        bottom: -11px;
        left: -30px;
        color: #467db3; */
        font-size: 48px; 
}
.c5-2col li .c5-img img {
        width: 100%;
        max-width: 220px; 
}
.c5-2col li .c5-img img.c5-img--right {
          position: absolute;
          top: 0;
          left: 0;
          width: auto;
          height: 100%;
          max-width: none; 
}

@media (max-width: 979px) {
    .c5-2col li .c5-img span {
        font-size: 30px;
        bottom: -1px;
        left: -10px; 
    } 
    .c5-2col li .c5-txt br {
        display: none; 
    }
    .c5-2col li .c5-txt .c5-sp-block {
          display: block; 
    } 
}
@media (max-width: 640px) {
    .c5-2col  {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin: 0;
    } 
    .c5-2col li {
        width: auto;
        margin-bottom: 3em!important;
    }
    .c5-2col li .c5-img span {
        font-size: 40px;
        bottom: -10px;
        left: -24px; 
    } 
}

@media (max-width: 400px) {
      .c5-2col.c5-2col--pad {
        padding-left: 5px!important; 
        } 
}



/* 20231110 */

#contents .title {
    font-size: 1.6rem;
    font-weight: normal;
    margin: 0;
}

#contents .glayWakuArea ul.square {
    margin-left: 30px;
}

#contents .glayWakuArea ul.square li  {
    list-style: none;
    font-size: 1.25rem;
}

#contents .glayWakuArea ul.square li::before {
    content: "";
    display: inline-block;
	width: 0.6em;
    height: 0.6em;
    background: #000;
    margin: 0 0.5em 0 0;
}

#contents .circle::before {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    background: #000;
    margin: 0 0.5em 0 0;
	border-radius: 10px;
}

#contents .c5-2col li .c5-img span {
    color: #3a5897;
}

#contents .c5-2col {
    width: 900px;
	max-width: 100%;
}

#contents .c5-2col li {
    display: flex;
    flex-direction: column;
	align-items: center;
	width: 295px;
}

#contents .c5-2col li p {
    text-align: left;
    width: 270px;
    margin: 15px auto;
}

@media screen and (max-width: 979px) {
	#contents .c5-2col {
		width: auto;
		align-content: center;
	}
	
	.c5-2col li .c5-img span {
	    left: -19px;
	}
}

@media screen and (max-width: 640px) {	
	.c5-2col li .c5-img span {
		left: 24px;
	}
	
	.c5-2col li .c5-img img {
		max-width: 210px;
	}
}

/* 2024/12/12 */
#contents span.annotation {
	display: block;
	padding-left: 1em;
}