/*初期設定
------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500&display=swap');

body{font-family: 'Noto Sans JP', sans-serif;font-weight:400;font-size:1.5rem;min-width:100%;position:relative;}
h1,h2,h3,h4,strong,th{font-weight:500;}
img:not(.nofit){max-width:100%;height:auto;}
#page{padding-top:60px;overflow-x:hidden;}
.serif{font-family: 'Noto Serif JP', serif;}

:root{
	--color-gray:#333;
	--color-gray-light:#707070;
	--color-purple:#ae2b5b;
}

/*ヘッダー
------------------------------*/
.header{background:var(--color-gray);padding:0 15px;position:fixed;top:0;left:0;width:100%;z-index:2;}
.header_inner{max-width:1000px;position:relative;height:60px;}
.logo{padding-top:20px;font-size:1.5rem;line-height:0;}

/*ナビゲーション
------------------------------*/
.nav{position:absolute;right:80px;top:10px;font-size:0;}
.nav>div{display:inline-block;position:relative;}
.nav>div>a{display:block;height:40px;line-height:40px;color:#fff;padding:0 20px;font-size:1.4rem;cursor:pointer;transition:0.3s;}

.nav .nav_inner{position:absolute;display:none;}
.nav .nav_inner a{display:block;background:var(--color-gray);color:#fff;border:1px solid var(--color-gray-light);white-space:nowrap;padding:10px 20px;margin-bottom:-1px;font-size:1.4rem;transition:0.3s;}

.nav a.active{background:#444;}
.hover .nav a:hover,.nav a.on{background:#444;}

@media (max-width:767px){
	.nav{display:none;}
}

/*スライドナビゲーション
------------------------------*/
.nav_slide{position:fixed;top:60px;right:0;background:#fff;padding:20px 20px 80px 20px;width:250px;height:calc(100vh - 60px);z-index:2;transform:translateX(100%);transition:0.3s;}
.nav_slide.on{transform:translateX(0);}
.nav_slide>div>a{display:block;padding:12px 10px;}
.nav_slide .nav_inner{margin:4px 0;}
.nav_slide .nav_inner a{display:block;padding:8px 10px 8px 10px;width:calc(100% - 20px);margin:0 0 0 auto;}
.nav_slide a.active{background:#f8f8f8;}

.nav_bg{position:fixed;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.5);display:none;}

/*フッター
------------------------------*/
.footer{background:var(--color-gray);color:#fff;text-align:center;padding:20px 15px;font-size:1.3rem;margin-top:80px;letter-spacing:1px;}

/*ページの先頭
------------------------------*/
.pagetop{position:fixed;right:40px;bottom:40px;z-index:1;}
.pagetop_inner{border:1px solid var(--color-gray);width:70px;height:70px;border-radius:50%;background:#fff;line-height:63px;text-align:center;cursor:pointer;transition:0.3s;}
.pagetop_inner i{font-size:2.5rem;}

.hover .pagetop_inner:hover{border-color:var(--color-purple);background:#f7e8ee;color:var(--color-purple)}

@media (max-width:767px) {
	.pagetop{right:15px;bottom:15px;z-index:1;}
	.pagetop_inner{width:50px;height:50px;line-height:44px;}
	.pagetop_inner i{font-size:2rem;}
}

/*レイアウト・コンテンツ
------------------------------*/
.contents{max-width:1030px;padding:40px 15px 50px;min-height:calc(100vh - 195px)}
.contents p{margin-bottom:20px;line-height:1.6;}

/*サブページ画像
------------------------------*/
.sub{height:300px;display:flex;align-items:center;}
.sub_inner{background:rgba(255,255,255,0.5);width:100%;padding:15px;}
.sub1{background:url(../images/header1.jpg) no-repeat center 0 / cover;}
.sub2{background:url(../images/header2.jpg) no-repeat center 0 / cover;}

@media (max-width:767px) {
	.sub{
		height:200px;
	}
}

/*サブページタイトル
------------------------------*/
.title{max-width:1000px;margin:0 auto;font-size:2rem;}
.subtitle{font-size:2rem;margin:40px 0 30px;letter-spacing:2px;}
.pagetitle{font-size:2.7rem;margin:40px 0 30px;letter-spacing:3px;}
.pagetitle span{font-size:1.1rem;font-weight:400;display:block;margin-top:10px;letter-spacing:0;position:relative;padding-left:30px;}
.pagetitle span:before{content:"";position:absolute;width:25px;border-bottom:1px solid var(--color-gray);top:50%;left:0;}

@media (max-width:767px) {
	.pagetitle{margin:0 0 30px;}
}

/*ボタン
------------------------------*/
a.button{display:inline-block;background:linear-gradient(to right,#fff, #fff 75%, transparent 75%,transparent);padding:0 15px;line-height:36px;height:36px;font-size:1.4rem;}
a.button img{width:100px;margin-left:20px;vertical-align:-3px;transition:0.2s;}
.hover a.button:hover{color:var(--color-purple);}
.hover a.button:hover img{transform:translateX(5px);}

.bottom_banner{max-width:300px;margin:30px auto 0;}