@charset "utf-8";
@import url("../print2.css") print;

#container #message_index.contents .block {width: 960px;}

/*タイトル*/

#sub_TL {    
	background:#fff;
	overflow:hidden;
	background:url(images/TL_back.jpg) no-repeat right bottom,#fff;
	background-size:auto 100%;
}
#pannav{background:url(images/pan_back.gif) repeat,#1362c3;margin: 0 auto;}

#sub_TL_back{
    display: flex;
    align-items: center;
	min-height: 300px;

    width:100%;
	max-width:1000px;
	margin:0 auto;
	background:url(images/TL_back.png) no-repeat right top;
}
	
#sub_TL h1{
    padding-top: 0;
    
    font-size: 2.8rem;
	color:#111;
	line-height:1.4;
	text-align:left;
	font-weight:600;
    letter-spacing: 0;
}


#sub_TL h1 span.tl_big{ font-size: 3.8rem;}
#sub_TL h1 span.tl_sml{font-size: 2.2rem;}
#sub_TL h1 span.tl_blue{color:#1362c3;}
#sub_TL h1 span.tl_red{color:#e60012;}

#message_read{
    margin: auto;
	padding:50px 0 0;
	background:#fff9e3;
}

.message_read_inner {
    width: 95%;
    margin: auto;
}

#message_read h2{
max-width:1000px;
margin-left:auto;
margin-right:auto;
font-size: 2.7rem;
font-family: "Arial","Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
font-weight: 500;
line-height: 1.7;
letter-spacing: 0.15em;
margin-bottom:15px;
}


#message_read h2 span.b_red{
	background: linear-gradient(transparent 70%, #fff100 0%);
}


#message_index{
	padding:100px 0 0;
	margin-bottom:0px;
	background:#fff9e3;
    overflow: visible !important;
}

#message_index .inner{
	position:relative;
	clear:both;
	padding-bottom:100px;
	}

#message_index #mm11.inner{
	padding-bottom:70px;
	}

.message_box_wrap {
    display: flex;
	background:#fff;
	box-shadow: 2px 4px 10px -5px #dcbc47;
}

#message_index .message_box_photo {
	    width:174px;
		position:relative;
		}
#message_index .message_box_photo img {
	max-width:174px;
	height:100%;
    object-fit: cover;
	vertical-align:bottom;
	}
	
#message_index .message_box_text { 
		width:786px;
		height:auto;
		overflow:hidden;
		padding:25px;
		}

#message_index .inner .lav{
	position:absolute;
	width:340px;
	height:98px;
	background:url(images/box_label.png) no-repeat left top;
	background-size:340px 98px;
	z-index:10;
	top:-60px;
	left:-20px;
}

#message_index .inner .lav h2{
	font-size:1.6rem;
	color:#fff;
	line-height:1.4;
	font-weight:600;
	letter-spacing:0.025em;
	transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
padding:22px 0 0 15px;
}

#message_index .inner .lav h2.line1{
line-height:5.5;
padding:0 0 0 15px;
}

#message_index .inner .lav h2.long{
	font-size:1.5rem;
	letter-spacing:-0.025em;
padding:24px 0 0 10px;
}

#message_index .inner .lav h2 span{
	font-size:1.3rem;
}

#message_index .inner .message_box_text h3{
	font-size:2.0rem;
	color:#e60012;
	line-height:1.4;
	font-weight:600;
	margin-bottom:15px;
	letter-spacing:0.1em;
}
#message_index .inner h4{
	position:absolute;
	bottom:10px;
	width:100%;
	font-size:1.8rem;
	color:#fff;
	font-weight:600;
	text-align:center;
	background-color: rgba(0,64,152,0.7);	
}

#message_index .inner h4 span{font-size:1.4rem;}

#message_index .inner p.read02{line-height:1.7;}
#container #message_index.contents .block { overflow: visible !important;}

@media only screen and (max-width: 768px) {
	
    #sub_TL {
        height: auto !important;
        background:none;
        background:#fff;
    }
    #sub_TL h1 {
        font-size: 2rem;
    }
    #sub_TL h1 span.tl_big {
        font-size: 3.2rem;
    }
    
    #container #message_index.contents .block {width: 90%; overflow: visible !important;}
    #sub_TL_back{width:95%;}
    
    
    .message_box_wrap {
        display: flex;
        flex-direction: column;
        background:#fff;
        box-shadow: 2px 4px 10px -5px #dcbc47;
    }
    #message_index .inner .message_box_photo { margin:0 auto;}
    #message_index .inner .message_box_photo img { margin-top:30px;}
    #message_index .inner .message_box_text { float:none;width:100%;height:auto;padding:35px 25px 20px;}	

}


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

	
}
@media only screen and (max-width: 480px) {
    
    #sub_TL {
        height: auto !important;
    }
	
	#sub_TL h1{
    font-size:2.0rem;
	color:#111;
	line-height:1.4;
	text-align:left;
	font-weight:600;
    letter-spacing: 0;
}


#sub_TL h1 span.tl_big{ font-size: 2.8rem;}
#sub_TL h1 span.tl_sml{font-size: 1.8rem;}

#message_index .inner .lav{
	position:absolute;
	width:310px;
	height:89px;
	background:url(images/box_label.png) no-repeat left top;
	background-size:310px 89px;
	z-index:10;
	top:-60px;
	left:-20px;
}
#message_index .inner .fR{padding:35px 15px 20px;}	
#message_index .inner .lav h2{
	font-size:1.4rem;
padding:20px 0 0 10px;
}

#message_index .inner .lav h2.long{
	font-size:1.4rem;
	letter-spacing:-0.04em;
padding:20px 0 0 5px;
}

#message_read h2{
font-size: 2.4rem;
line-height: 1.5;
}
	
}