
.kv{/*キービジュアル*/
    z-index:1;
    position:relative;
}
.kv img{
    max-width:100%;
    width:100%;
    margin:auto;
    height:440px;
    overflow:hidden;
    object-fit:cover;
    opacity: 0.9;
}

.kv p{
    font-family:fot-tsukubrdgothic-std,sans-serif;
    font-weight:700;
    font-style:normal;
    font-size:45px;
    text-shadow:0 0 5px #FFFFFF,0 0 5px #FFFFFF,0 0 5px #FFFFFF,0 0 5px #FFFFFF,0 0 5px #FFFFFF,0 0 5px #FFFFFF,0 0 5px #FFFFFF;
    line-height:1.5;
    position: absolute;
    top:49%;
    transform:translateY(-50%);
    left:0.7em;
    margin:0;
}
.sp-br{
    display:none;
}
@media screen and (max-width:959px){
    .kv p{
        font-size:32px;
        line-height:2;
    }
}
@media screen and (max-width:559px){
    .kv img{
        height:470px;
        overflow:hidden;
    }
    .kv p{
        font-size:23px;
        line-height:2.5;
    }
    .sp-br{
        display:block;
    }
}
@media screen and (max-width:319px){
    .kv img{
        height:400px;
        overflow:hidden;
    }
    .kv p{
        font-size:20px;
    }
}

.about{/*元気UPヒアリングセンターについて*/
    text-align:center;
}
.about h1{
    font-family:fot-tsukubrdgothic-std,sans-serif;
    font-weight:700;
    font-style:normal;
    font-size:30px;
    margin-top:60px;
}
.about hr{
    border-top:1px;
    border-style:solid;
    max-width:1000px;
    color:#bbb;
}
.about p{
    font-family:游ゴシック;
    font-size:17px;
    line-height:2.5;
}
.p1{
    margin-bottom:0;
}
.p2{
    margin-top:0;
    margin-bottom:70px;
}
.p2 a{
    transition: .3s;
}
.p2 a:hover{
    opacity: 0.8;
}
@media screen and (max-width:1279px){
    .about hr{
        width:940px;
    }
}
@media screen and (max-width:959px){
    .about h1{
        font-size:25px;
        margin-top:50px;
    }
    .about hr{
        max-width:90%;
        margin:1em auto;
    }
    .about p{
        font-size:14px;
        max-width:80%;
        margin:0 auto;
        word-wrap:break-word;
        text-align:left;
    }
    .about p br{
        display:none;
    }
    .p2{
        padding-bottom:60px;
    }    
}
@media screen and (max-width:559px){
    .about h1{
        margin-top:15px;
        font-size:19px;
    }
    .about p{
        font-size:14px;
        word-wrap:break-word;
        text-align:left;
    }
    .about p br{
        display:none;
    }
    .p2{
        padding-bottom:20px;
    }
}
@media screen and (max-width:319px){
    .about h1{
        line-height:1.2;
        margin-top:0px;
    }
    .about hr{
        max-width:95%;
        margin:1em auto;
    }
    .about p{
        max-width:90%;
    }
    .p2{
        padding-bottom:0;
    }
}

.main{/*面会交流、メンタルケア概要*/
    background-color:#f5f5f5;
}
.frame{
    max-width:100%;
    justify-content:center;
    display:flex;
}
.menkai-sp{
    display:none!important;
}
.mental-sp{
    display:none!important;
}
.main h2{
    font-family:fot-tsukubrdgothic-std,sans-serif;
    font-weight:700;
    font-style:normal;
    color: #FFFFFF;
    text-align:center;
    font-size:30px;
}
.main p{
    font-family:游ゴシック;
    font-size:14px;
    text-align:center;
    line-height:2.5;
    padding-top:20px;
}
.text-area{
    height:auto;
}
.mbox{
    position:relative;
    margin-top:100px;
}
.menkai-pc{
    max-width:100%;
    box-shadow:3px 3px #cd2926;
}
.mbox h2{
    position:absolute;
    top:20px;
    left:0;
    right:0;
    margin:auto;
}
.menkai{
    position:relative;
    height:auto;
    margin-right:2.8em;
    margin-bottom:90px;
}
.btn2{
    display:inline-block;
    position: relative;
    width:180px;
    padding:0.3em;
    text-decoration:none;
   	border-radius:5px;
    color:#FFFFFF;
    background-color:#66ad34;
    border:2px solid#66ad34;
    font-size:16px;
    font-family:游ゴシック;
}
.btn2::after {
	content:'';
	display:inline-block;
	padding:0;
	width:6px;
	height:6px;
	border-top:solid 2px #FFFFFF;
	border-right:solid 2px #FFFFFF;
	-webkit-transform-origin:center;
	-ms-transform-origin:center;
	transform-origin:center;
	-webkit-transform:rotate(45deg) translateX(-5px) translateY(5px);
	-ms-transform:rotate(45deg) translateX(-5px) translateY(5px);
	transform:rotate(45deg) translateX(-5px) translateY(5px);
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    right:5px;
}
.btn2:hover {
    background-color: #fff;
    border-color:#cd2926;
    color:#cd2926;
}
.mental{
    position:relative;
    height:auto;
    margin-left:2.8em;
    margin-bottom:90px;
}
.mbox2{
    position:relative;
    margin-top:100px;
}
.mental-pc{
    max-width:100%;
    box-shadow:3px 3px #cd2926;
}
.mbox2 h2{
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:20px;
}
.btn3{
    display:inline-block;
    position: relative;
    width:180px;
    padding:0.3em;
    text-decoration:none;
   	border-radius:5px;
    color:#FFFFFF;
    background-color:#66ad34;
    border:2px solid#66ad34;
    font-size:16px;
    font-family:游ゴシック;
}
.btn3::after {
	content:'';
	display:inline-block;
	padding:0;
	width:6px;
	height:6px;
	border-top:solid 2px #FFFFFF;
	border-right:solid 2px #FFFFFF;
	-webkit-transform-origin:center;
	-ms-transform-origin:center;
	transform-origin:center;
	-webkit-transform:rotate(45deg) translateX(-5px) translateY(5px);
	-ms-transform:rotate(45deg) translateX(-5px) translateY(5px);
    transform:rotate(45deg) translateX(-5px) translateY(5px);
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    right:5px;
}
.btn3:hover {
    background-color: #fff;
    border-color:#cd2926;
    color:#cd2926;
}
@media screen and (max-width:1279px){
    .frame{
        max-width:100%;
        margin:0 2em;
    }
    .menkai{
        margin-right:1.4em;
    }
    .mental{
        margin-left:1.4em;
    }
    .btn2,.btn3{
        width:165px;
        padding:0.1em;
    }
    .btn2::after,.btn3::after{
        width:4px;
        height:4px;  
    }
}
@media screen and (max-width:959px){
    .frame{
        max-width:90%;
        margin:0 auto;
    }
    .main h2{
        font-size:20px;
    }
    .mbox{
        margin-top:70px;
    }
    .text-area br{
        display:none;
    }
    .text-area{
        text-align:left!important;
        word-wrap:break-word;
        max-width:450px;
    }
    .menkai{
        margin-bottom:60px;
    }
    .mbox2{
        margin-top:70px;
    }
    .mental{
        margin-bottom:60px;
    }
}

@media screen and (max-width:559px){
    /*スマホ用画像に差し替え*/
    .menkai-pc{
        display:none;
    }
    .mental-pc{
        display:none;
    }
    .menkai-sp{
        display:block!important;
        box-shadow:3px 3px #cd2926;
        max-width:100%;
        margin:0 auto;
    }
    .mental-sp{
        display:block!important;
        box-shadow:3px 3px #cd2926;
        max-width:100%;
        margin:0 auto;
    }

    .frame{
        display:block;
        padding-top:40px;
    }
    .main h2{
        font-size:19px;
    }
    .menkai{
        margin-right:0;
        text-align:center;
    }
    .mbox{
        position:relative;
        margin-top:0;
    }
    .mbox h2{
        position:absolute;
        left:0;
        right:0;
        margin:auto;
        top:10px;
    }
    .text-area{
        max-width:90%;
        margin:0 auto;
        height:auto;
    }
    .mental{
        padding-bottom:25px;
        margin-left:0;
        margin-bottom:0;
        text-align:center;
    }
    .mbox2{
        position:relative;
        margin-top:0;
        margin-bottom:0;
    }
    .mbox2 h2{
        position:absolute;
        left:0;
        right:0;
        margin:auto;
        top:10px;
    }
    .btn3{
        margin-top:0;
    }
}
@media screen and (max-width:319px){
    .text-area{
        max-width:100%;
        margin:0 auto;
    }
    .menkai{
        margin-bottom:30px;
    }
    .btn3{
        margin-bottom:0;
    }
}

.diary{/*ブログ*/
    background-image:url(../img/flower.jpg);
    background-size:cover;
    display:block;
    padding-top:115px;
    padding-bottom:115px;
}
.white{
    max-width:810px;
    margin:0 auto;
    background-color: #FFFFFF;
    display:flex;
    justify-content:space-between;
    padding:90px;
}
.d1 h2{
    font-family:游ゴシック;
    font-size:14px;
    line-height:1;
    margin-top:20px;
}
.d1 h3{
    font-family:fot-tsukubrdgothic-std,sans-serif;
    font-weight:700;
    font-style:normal;
    font-size:30px;
    line-height:1;
}
.btn4{
    display:inline-block;
    position:relative;
    width:150px;
    padding:0.8em;
    text-align:center;
    text-decoration:none;
   	border-radius:5px;
    color:#FFFFFF;
    background-color:#66ad34;
    border:2px solid#66ad34;
    font-family:游ゴシック;
    margin-top:50px;
}
.btn4::after {
	content:'';
	display:inline-block;
	padding:0;
	width:6px;
	height:6px;
	border-top:solid 2px #FFFFFF;
	border-right:solid 2px #FFFFFF;
	-webkit-transform-origin:center;
	-ms-transform-origin:center;
	transform-origin:center;
	-webkit-transform:rotate(45deg) translateX(-5px) translateY(5px);
	-ms-transform:rotate(45deg) translateX(-5px) translateY(5px);
	transform:rotate(45deg) translateX(-5px) translateY(5px);
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    right:5px;
}
.btn4:hover {
    background-color: #fff;
    border-color:#cd2926;
    color:#cd2926;
}
.d2{
    margin-left:80px;
}
.d2 dl{
    font-family:游ゴシック;
    font-size:16px;
    border-bottom:1px dotted #bbb;
    width:550px;
    padding-bottom:10px;
    padding-top: 10px;
}
.d2 dl:first-child{
    margin-top: 5px;
    padding-top:0;
}
.d2 dl:last-child{
    border-bottom:none;
    padding-bottom: 1px;
}
.d2 dt{
    float:left;
    width:140px;
    padding-top: 10px;
}
.d2 dd{
    margin-left:140px;
    word-wrap:break-word;
    max-width:420px;
}
.d2 a{
    text-decoration:none;
    color: black;
}
.d2 a:hover{
    opacity:0.6;
}
@media screen and (max-width:1279px){
    .diary{
        padding-top:5em;
        padding-bottom:5em;
    }
    .white{
        max-width:760px;
        margin:0 auto;
    }
    .btn4{
        width:120px;
        padding:0.5em;
    }
    .btn4::after{
        width:4px;
        height:4px;  
       }
    .d2 dl{
        font-size:14px;
    
    }
}
@media screen and (max-width:959px){
    .d2{
        padding-bottom: 1.5em;
    }
    .d2 dl{
        width:400px;
    }
}
@media screen and (max-width:799px){
    .diary{
        padding-top:2.5em;
        padding-bottom:2.5em;
    }
    .white{
        max-width:100%;
        margin:1em 2.3em;
        padding:50px;
    }
    .d1{
        margin-top:2em;
        margin-right:3em;
    }
    .d1 h2{
        margin:0;
    }
    .d1 h3{
        font-size:25px;
    }
    .d2{
        margin:0;
        margin-right:2.5em;
    }
    
    .d2 dl{
        width:100%;
        margin-top:5px;
        margin-bottom:0;
        padding-top:0.5em;
        padding-bottom:1.2em;
        padding-right:40px;
    }
    .d2 dt{
        float: none;
        margin-top:2em;
        margin-bottom:0;  
        line-height:0;  
    }
    .d2 dd{
        margin-left:0;
        max-width:600px;
    }
}
@media screen and (max-width:559px){
    .diary{
        padding-top:0.5em;
        padding-bottom:0.5em;
    }
    .white{
        display:block;
        position:relative;
        max-width:100%;
        margin:1em 1.1em;
        padding:1em;
    }
    .d1{
        margin:auto;
        padding-top:2em;
        text-align: center;
    }
    .d1 h2,.d1 h3{
        line-height:0.5;
    }
    .d2{
        margin:0 auto;
        padding-left:0;
        padding-bottom:6em;
    }
    .d2 dl{
       padding-right:5px;
    }
    .btn4{/*配置を下部に移動*/
        padding:0.6em;
        position:absolute;
        bottom:2.5em;
        transform:translateX(-50%);
    }
    .btn4::after{
        border-top:solid 1px #FFFFFF;
        border-right:solid 1px #FFFFFF;
    }
}

