@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap');
/*-----------------------------------------
全体
-----------------------------------------*/
:root{
    --f-mincyo: 'Noto Serif JP', serif;
}
.contents {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    color: #333;
    font-size: 3.6vw;
	line-height: 1.5em;
}
.contents .inner {
    width: 92vw;
    margin: 0 auto;
}
/*------------------------------------------------
	ページナビ
--------------------------------------------------*/
#head-navi {
    width: 100%;
    height: 10vw;
    background-color: #cfe2e6;
}
#head-navi ul {
    width: 100%;
    height: 10vw;
    display: flex;
    align-items: center;
    text-align: center;
    font-family: var(--f-mincyo);
    font-weight: 500;
    font-size: 3.2vw;
}
#head-navi ul li {
    height: 100%;
}
#head-navi ul li.top {
    width: 26%;
    background-color: #6f9ca6;
    color: #fff;
    font-size: 3.0vw;
    line-height: 1.2em;
    font-weight: 400;
}
#head-navi ul li:nth-child(2) {
    width: 37%;
    border-right: solid 1px #6f9ca6;
}
#head-navi ul li:nth-child(3) {
    width: 37%;
}
#head-navi ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #1b505c;
    text-decoration: none;
}
#head-navi ul li.top a {
    color: #fff;
}
#head-navi ul li.current a {
    pointer-events: none;
}
/*------------------------------------------------
	メインビジュアル
--------------------------------------------------*/
#mainvisual {
	width: 100%;
	height: 100vw;
	text-align: center;
    background: url("../img/main-bg-sp.jpg") no-repeat top center;
    background-size: 100%;
}
#mainvisual .title {
    width: 84vw;
    padding-top: 17vw;
    margin: 0 auto 3vw;
}
#mainvisual .title img {
    width: 100%;
}
#mainvisual .lead {
    width: 84vw;
    margin: 0 auto;
    font-size: 3.2vw;
    line-height: 1.8em;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
}
#mainvisual .fix-bnr {
    display: none;
    position: fixed;
    bottom: 20vw;
    right: 1vw;
    z-index: 1000;
}
#mainvisual .fix-bnr a {
    display: block;
}
#mainvisual .fix-bnr img {
    width: 15vw;
}
/*------------------------------------------------
	基礎知識
--------------------------------------------------*/
#info {
	width: 100%;
	background-color: #060d34;
    padding: 10vw 0;
}
#info h2 {
    height: 10vw;
    text-align: center;
    background: url("../img/info-title-bg.png") no-repeat bottom center / 100%;
    color: #fff;
    font-family: var(--f-mincyo);
    font-weight: 500;
    font-size: 4.6vw;
    letter-spacing: 0.3em;
    line-height: 1.0em;
    padding-top: 1vw;
    margin-bottom: 5vw;
}
#info .qa {
    width: 100%;
    color: #fff;
}
#info .qa dt {
    font-family: var(--f-mincyo);
    font-size: 4.0vw;
    line-height: 1.5em;
    background-color: #172b5b;
    padding: 2vw;
    margin-bottom: 3vw;
	position: relative;
}
#info .qa dt:after {
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	content: "\f067";
	position: absolute;
	right: 2vw;
	bottom: 2vw;
}
#info .qa dt.active:after {
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	content: "\f068";
}
#info .qa dd {
    padding: 0 2vw;
    margin-bottom: 5vw;
    text-align: justify;
}
#info .qa dd img {
    width: 100%;
    margin-top: 2vw;
}
#info .qa .f-mini {
    display: block;
    margin-top: 1vw;
    font-size: 0.8em;
    line-height: 1.3em;
}

/*------------------------------------------------
	季節ごとの楽しみ方
--------------------------------------------------*/
#season {
    width: 100%;
    background-color: #e1f3f7;
    background-image: url("../img/season-bg-top-sp.png"), url("../img/season-bg-bottom-sp.jpg");
    background-repeat: no-repeat,no-repeat;
    background-position: top center,bottom 10vw center;
    background-size: 100%,100%;
    padding: 25vw 0 40vw;
}
#season h2 {
    height: 10vw;
    text-align: center;
    background: url("../img/season-title-bg.png") no-repeat bottom center / 100%;
    color: #17386c;
    font-family: var(--f-mincyo);
    font-weight: 500;
    font-size: 4.6vw;
    line-height: 1.0em;
    padding-top: 1vw;
    margin-bottom: 5vw;
}
#season .lead {
    width: 80vw;
    margin: 0 auto 5vw;
    font-weight: bold;
    color: #17386c;
}
#season .link {
    width: 100%;
}
#season .link li {
    background-color: #fff;
    padding-bottom: 5vw;
    margin-bottom: 5vw;
}
#season .link li a {
    display: block;
    text-decoration: none;
    color: inherit;
}
#season .link li img {
    width: 100%;
}
#season .link li .text {
    font-size: 3.4vw;
    line-height: 1.5em;
    padding: 2vw;
}
#season .link li .btn {
    width: 76vw;
    margin: 0 auto;
    text-align: center;
    font-size: 4.0vw;
    line-height: 2.0em;
    border-radius: 1.0em;
    color: #fff;
    font-family: var(--f-mincyo);
    font-weight: 500;
    position: relative;
}
#season .link li .btn:after {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    font-weight: 900;
    position: absolute;
    right: 2vw;
    top: 0;
}
#season .link li:nth-child(1) .btn {background-color: #f68807;}
#season .link li:nth-child(2) .btn {background-color: #0fa7a9;}
/*------------------------------------------------
        スマホ横向き時の余白調整
--------------------------------------------------*/
.breadcrumb {
    width: 100%;
}