@charset "utf-8";

/* =============================================================================
   レイアウト
============================================================================= */

/* MV
--------------------------------------------*/
.hdPage{
	position: relative;
	background: url("/_common/images/bg_texture.png"), linear-gradient(135deg, #94cae9 0%,#c0d0e5 100%);
}
.hdPage_inner{
	position: relative;
	z-index: 1;
	padding-bottom: 62px;
}

.hdPage_block{
	padding: 16px 0;
}
/*.hdPage_img{
	position: absolute;
	right: 10%;
	bottom: -8px;
	width: 138px;
	height: 85px;
	background: url("/words/_images/mv_words.png") center / 100% auto no-repeat;
}
.hdPage_img::before{
	position: absolute;
	left: calc(100% + 12px);
	top: 0;
	content: "";
	display: inline-block;
	width: 25px;
	height: 36px;
	background: url("/words/_images/mv_question.png") center / 100% auto no-repeat;
	animation: questionmove 2s steps(2) infinite;
}*/

@media print, screen and (min-width:960px) {
	.hdPage{
		padding-bottom: 0;
	}
	.hdPage::before{
		height: 86px;
	}
	.hdPage_block{
		padding: 32px 40px;
		width: 50%;
		max-width: 650px;
		border-radius: 0 0 32px 32px;
		background-color: rgba(255, 255, 255, 0.8);
	}
	/*.hdPage_img{
		right: 80px;
		bottom: -24px;
		width: 448px;
		height: 275px;
	}
	.hdPage_img::before{
		left: calc(100% + 16px);
		width: 47px;
		height: 67px;
	}*/
}

@keyframes questionmove{
	from{
		transform:rotate(8deg)
	}
	to{
		transform:rotate(-24deg)
	}
}

/* NAV
--------------------------------------------*/
.pagenavs{
	width: 100%;
	background: url("/_common/images/bg_texture.png"), #5b5a58;
}
.pagenavs_inner{
}
.pagenavs_listitem a{
	position: relative;
	display: block;
	padding: 8px;
	color: #fff;
	font-weight: boldl;
	letter-spacing: .2em;
}


.pagenavs_listitem a::before{
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 0;
	height: 2px;
	content: "";
	transform: translateX(-50%);
	border-radius: 50vw;
	background: #a7cc09;
	transition: -webkit-width .2s ease;
	transition: width .2s ease;
	transition: width .2s ease, -webkit-width .2s ease;
}
.pagenavs_listitem.is-active{
	width: calc(100% - 32px);
}

.pagenavs_listitem .m-ico{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	line-height: 1;
	font-size: 2.0rem;
    transition: transform 0.5s ease-in-out;
}
.pagenavs_listitem a.is-current{
	color: #e3d278;
	font-weight: bold;
}
.pagenavs_listitem a.is-current .m-ico{
	transform: translateY(-50%) rotate(-90deg);
}
.pagenavs_listitem a.is-top .m-ico {
    transform: translateY(-50%) rotate(-180deg);
}
@media screen and (max-width:959px) {
	.pagenavs_list{
		display: flex;
		flex-wrap: wrap;
	}
	.pagenavs_listitem{
		width: calc(100% / 2);
	}
	body:not(.pagenavFixed) .pagenavs_listitem:nth-child(odd){
		border-right: dashed 1px rgba(255,255,255,0.5);
	}
	body:not(.pagenavFixed) .pagenavs_listitem:not(:last-child){
		border-bottom: dashed 1px rgba(255,255,255,0.5);
	}
	body:not(.pagenavFixed) .pagenavs_listitem:nth-child(odd):nth-child(2){
		border-bottom: none;
	}
	
	.pagenavFixed .pagenavs{
		position: sticky;
		left: 0;
		top: 0;
		z-index: 10;
		padding: 65px 0 8px;
		width: 100%;
		animation: animationNav 0.3s forwards;
	}
	.pagenavFixed .pagenavs_inner{
		overflow-x: auto;
	}
	.pagenavFixed .pagenavs_list{
		flex-wrap: nowrap;
	}
	.pagenavFixed .pagenavs_listitem:not(:first-child){
		border-left: dashed 1px rgba(255,255,255,0.5);
	}
	.pagenavFixed .pagenavs_listitem a{
		padding: 0 calc(1em + 16px) 0 16px;
		white-space: nowrap;
	}
	.pagenavFixed .pagenavs_listitem .m-ico{
		right: 8px;
	}
	
}
@media print, screen and (min-width:960px) {
	.pagenavs{
		position: sticky;
		left: 0;
		top: 120px;
		z-index: 10;
		padding: 0 24px;
		width: 300px;
		border-radius: 32px;
	}
	.pagenavs_inner{
		margin: 0 auto;
		padding: 16px 0;
		width: 100%;
		max-width: 1400px;
	}
	.pagenavs_list{
		margin-left: -8px;
	}
	.pagenavs_listitem:not(:first-child){
		border-top: dashed 1px rgba(255,255,255,0.5)
	}
	.pagenavs_listitem a{
		padding: 8px 16px;
	}
	.pagenavs_listitem a:not(.is-current):hover{
		color: #efe8c0;
	}
}
@keyframes animationNav {
    0% {
        transform: translateY(-100%)
    }

    100% {
        transform: translateY(0)
    }
}


/* =============================================================================
   PAGE
============================================================================= */
.words{
	padding-bottom: 40px;
	background: #f5f5f1;
}
.wordsWp{
}
.wordsBd{
	margin-top: 40px;
}

.wordsSect{
	margin: 0 8px;
}
.wordsSect:not(:first-child) {
	margin-top: 30px
}
.ttl{
	text-align: center;
	font-size: 2.4rem;
	font-weight: bold;
	letter-spacing: .2em;
}

.wordsBlock {
    margin-top: 16px;
	padding: 8px;
	border-radius: 16px;
	background: #fff;
}
.wordsItem{
	display: flex;
	align-items: center;
	padding: 16px 8px;
}
.wordsItem:not(:first-of-type) {
	border-top: dashed 1px #ccc
}

.wordsTtl {
	padding: 16px 8px;
	width: 120px;
	font-weight: 500;
	border-radius: 8px;
	background: #ebf2f5;
}

.wordsTxt {
	flex: 1;
	margin-left: 16px;
	line-height: 1.5;
}

.wordsTxt_box {
	line-height: 1.5;
}
.wordsTxt a {
    text-decoration: underline;
    transition: opacity .2s
}
@media print, screen and (min-width:960px) {
	.wordsWp{
		display: flex;
		align-items: flex-start;
		margin: 0 auto;
		padding: 40px 0;
		max-width: 1400px;
		width: 100%;
	}
	.wordsBd{
		flex: 1;
		margin: 0 0 0 40px;
	}
	.wordsSect:not(:first-child) {
        margin-top: 40px;
    }
	.ttl{
		font-size: 3.0rem;
	}
	.wordsBlock {
		margin-top: 24px;
		padding: 16px;
		border-radius: 32px;
	}
	.wordsItem{
		padding: 8px 16px;
	}
	.wordsTtl {
		padding: 16px 24px;
		width: 200px;
		border-radius: 16px;
	}
    .wordsTxt {
		margin-left: 24px;
    }
    .wordsTxt_box a:hover {
        opacity: .6
    }
}