@charset "UTF-8";

.top-main{background:url(../img/top/bg_top-main_sp.png) no-repeat center top; position:relative; background-size:100%;}
.top-main h2{text-align:center; width:70%; margin:0px auto; padding:30px 0; font-family: 'Noto Sans Japanese', 'Noto Sans', 'Noto Sans CJK JP', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;}

.top-lead{padding:20px 4% 40px;}
.top-lead h3{font-size:16px; text-align:center; margin-bottom:30px;}
.top-lead h3 strong{
    color:#68b82d;
    font-size:20px;
    padding:0 5px 10px;
    background:url(../img/common/line_txt-wave.png) repeat-x bottom left;
    background-size:15px;
}
.top-lead h3:after{
    content:" ";
    display:inline-block;
    width:33px;
    height:40px;
    background:url(../img/top/ico_top-pen.svg) no-repeat;
    margin:0 -20px  -27px 0;
}

.top-lead .youtube {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 1024px;
    margin: auto;
}
.top-lead .youtube iframe {
    width: 100%;
    height: 100%;
}

.top-subara{background:url(../img/top/bg_top-subara.png) repeat; padding:40px 8% 40px; text-align:center;}
.top-subara h2{font-size:16px; margin-bottom:30px; text-align:center;}
.top-subara h2 strong{
    color:#68b82d;
    font-size:24px;
    background:url(../img/common/line_txt-wave.png) repeat-x left bottom;
    padding-bottom:5px;
    background-size:15px;
}
.top-subara p{margin-bottom:15px; text-align:left;}
.top-subara .photo{text-align:center;}

.top-message{padding:0 8% 30px; text-align:center;}
.top-message .txt{text-align:left; margin-top:10px;}
.top-message .inner{padding:0 5%;}
.top-message h3{text-align:center; font-size:20px; margin:20px 0 40px;}
.top-message h3 span{background:url(../img/common/line_txt-wave.png) repeat-x left bottom; padding-bottom:10px; background-size:15px;}

.top-info{margin:0 8% 0px; padding:40px 15px; box-sizing:border-box; background:url(../img/common/bg_top-info.png); position:relative; z-index:10;}
.top-info h3{text-align:center; font-size:20px; margin:0 0 20px;}
.top-info h3 span{background:url(../img/common/line_txt-wave.png) repeat-x left bottom; padding-bottom:10px; background-size:15px;}
.top-info ul li{ padding:10px 0px 0; font-size:14px; display:table; width:100%;}
.top-info ul li:last-child{border-bottom:none;}
.top-info ul li .thumb ,.top-info ul li .txt{display:table-cell; vertical-align:top;}
.top-info ul li .thumb{max-width:120px; width:30%;}
.top-info ul li .thumb img{border-radius:8px;}
.top-info ul li .thumb a:hover{opacity:0.7;}
.top-info ul li .txt{padding-left:20px; width:70%; box-sizing:border-box;}

.top-info ul li .info-blog-cat{width:100%; display:block; text-align:center;}
.top-info ul li .info-blog-cat a{display:block; background:#e4572e; padding:2px 10px; font-size:12px; border-radius:8px; color:#FFF;}
.top-info ul li .info-blog-cat a:hover{text-decoration:none;}

.top-info ul li .info a ,.top-info ul li .intro a{background:#17bebb;}
.top-info ul li .info-blog-cat a:hover{background:#a73e20;}
.top-info ul li .info a:hover ,.top-info ul li .intro a:hover{background:#119694;}
.top-info ul li .info-blog-tit{font-weight:bold; margin-top:5px;}


.top-support{padding:30px 8% 0; text-align:center;}
.top-support ul{margin:30px 0;}
.top-support li{margin:0 0 40px;}
.top-support li .thumb{margin-bottom:10px;}
.top-support li .txt{text-align:left; font-size:14px; line-height:1.8;}
.btn-support{margin-bottom:40px;}

.top-access{background:url(../img/top/bg_top-subara.png) repeat; text-align:center; padding:20px 8%;}
.top-access .txt{box-sizing:border-box; margin:20px 0; padding:10px 20px 20px; background:#FFF; border-radius:8px;}
.top-access .txt dl{margin:0 auto; box-sizing:border-box;}
.top-access .txt dt{text-align:center; padding-bottom:0px; font-size:15px;}
.top-access .txt dt .txt_line{
    background:url(../img/common/line_txt-wave.png) repeat-x left bottom;
    display:inline-block;
    font-weight:bold;
    padding:10px;
    background-size:15px;
}
.top-access .txt dd{ text-align:left; font-size:12px;}
.top-access .txt .tel{
    text-align:center;
    font-size:20px;
    background:#f5f5f5;
    font-weight:bold;
    padding:5px;
    border-radius:6px;
    margin:15px 0;
}

.top-access .txt .tel span{display:none;}
.top-access .txt .tel a{display:block; color:#68b82d;}
.top-access .txt .tel img{width:12px; margin:0 5px 0px 0;}

.top-access .btn-link{width:100%; margin-top:10px; text-align:center;}




@media (min-width: 768px) {
.top-main{padding:60px 8% 80px;}
.top-subara{padding:70px 8%;}

.top-message{position:relative; margin-bottom:60px; padding:0; }
.top-message .inner{display:table; margin:40px auto;}
.top-message .photo,
.top-message .txt{display:table-cell; vertical-align:middle;}
.top-message .photo{width:44%;}
.top-message .txt{text-align:left; width:56%; line-height:1.8; padding-left:2%; box-sizing:border-box;}


.top-support{background:url(../img/top/bg_top-support.png); padding:80px 8% 20px; margin-top:30px;}
.top-support ul{margin:20px auto;}
.top-support li{display:inline-block; vertical-align:top; width:32%;}
.top-support li:nth-child(2){ margin:0 1%;}


.top-info h3{font-size:24px;}
.top-info h3 span{background-size:auto;}
.top-info h3:before{width:47px; height:41px;}
.top-info .info-blog-tit a:hover{text-decoration:underline;}
.top-info ul{text-align:center;}
.top-info ul li{width:30%; max-width:265px; display:inline-block; text-align:left; vertical-align:top;}
.top-info ul li:nth-child(2){margin:0 4%;}
.top-info ul li .thumb ,.top-info ul li .txt{display:block; vertical-align:top;}
.top-info ul li .thumb{max-width:100%; width:100%;}
.top-info ul li .txt{padding-left:0px; width:100%; box-sizing:border-box;}
.top-info ul li .info-blog-cat{width:100%; display:block; text-align:center; margin:20px auto 10px;}
.top-info ul li .info-blog-tit{padding:0;}

.top-access{padding:50px 8%;}

}

@media (min-width: 940px) {
.top-main{
	padding:60px 0 100px;
	background:url(../img/top/bg_top-main.png) no-repeat center top;
	background-size:auto;
}
.top-main h2{max-width:500px;}
.top-main .txt-main1{font-size:20px;}
.top-main .txt-main2{font-size:36px;}
.top-main .txt-main3{font-size:28px;}
.top-main .txt-main-b{font-size:60px;}

.top-lead{text-align:center; padding:40px 0;}
.top-lead h3{font-size:20px;}
.top-lead h3 strong{font-size:36px; background-size:auto;}
.top-lead p{font-size:20px;}

.top-subara .inner{width:100%; max-width:1000px; overflow:hidden;}
.top-subara{text-align:center; padding:100px 0 120px; background-size:auto;}
.top-subara .inner{margin:60px auto; overflow:hidden;}
.top-subara .txt{float:left; text-align:left; width:60%;}
.top-subara .photo{float:right; width:40%;}
.top-subara h2{font-size:20px; text-align:left;}
.top-subara h2 strong{font-size:36px; background-size:auto;}
.top-subara p{margin:0px 0 20px; font-size:16px; line-height:1.8;}
.btn-subara{float:left;}

.top-message{margin-bottom:120px;}
.top-message .inner{max-width:1000px; }
.top-message .txt{margin-top:30px;}
.top-message h3{font-size:30px;}
.top-message .btn-wrap{display:flex; justify-content: center; gap:20px;}
.top-message .btn-wrap .btn-support{margin: initial;}

.top-support{padding:80px 0 20px;}
.top-support .pc-inner{max-width:1000px; margin:20px auto;}
.top-support h3{font-size:30px;}
.top-support li{width:30%;}
.top-support li:nth-child(2){ margin:0 4%;}

.top-info{width:1000px; margin:0 auto -60px;}
.top-info h3{font-size:30px;}
.top-info ul{margin:40px 45px;}
.top-info ul li{padding:15px 0px; font-size:16px;}
.top-info ul li .info-blog-cat{display:inline-block;}
.top-info ul li .info-blog-cat a{padding:8px 10px;}
.top-info ul li .info-blog-tit{display:inline-block;  font-size:16px;}
.btn-support{margin:30px auto; width:440px;}

.top-access{padding:100px 0 120px; margin-bottom:0;}
.top-access .inner{max-width:1000px; margin:30px auto; overflow:hidden;}
.top-access .photo{width:60%; float:left;}
.top-access .txt dt .txt_line{background-size:auto;}
.top-access .txt{margin:0; width:38%; float:right;}
.top-access .txt dl{padding:0px 30px;}
.top-access .txt dt{font-size:24px; margin-bottom:20px;}
.top-access .txt dd{font-size:14px; margin-bottom:5px;}
.top-access .txt .tel{font-size:26px; margin-bottom:20px;}
.top-access .txt .tel img{width:14px;}
.top-access .txt .tel a{display:none;}
.top-access .txt .tel span{display:block; color:#68b82d;}
.top-access .btn-link{font-size:16px; padding: 20px;}


}