@charset "UTF-8";

:root{
	--body : #000;
	--link : #000;
}

@media screen and ( max-width : 750px ){
	:root{
		--headerHeight : calc( 120 * 100vw / 750);
	}
}
@media screen and ( min-width : 750.02px ){
	:root{
		--headerHeight : 108px;
	}
	:root:has(body.search){
		--headerHeight : 143px;
	}
}

@media screen and (max-width: 750px){
	html{
		font-size : calc( 10 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	html{
		font-size : 10px;
	}
}
body{
	background-color : #e5e5e5;
	padding-top : var(--headerHeight);
}
@media screen and (max-width: 750px){
	body.search{
		padding-bottom : calc( 113 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	body.search{
		padding-top: var(--headerHeight);
	}
}
.wrap{
	margin-left : auto;
	margin-right : auto;
}
@media screen and (max-width: 750px){
	.wrap{
		padding-left : calc( 15 * 100% / 375 );
		padding-right : calc( 15 * 100% / 375 );
	}
}
@media print,screen and (min-width: 751px){
	.wrap{
		width : 1100px;
		padding-left : 25px;
		padding-right : 25px;
	}
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
#header{
	position : absolute;
	left : 0;
	top : 0;
	width : 100%;
	z-index : 1;
	display : grid;
	align-items : start;
	height: var(--headerHeight);
}
#header .logo{
	display : block;
	width : fit-content;
}
#header .logo img {
	transition: transform 0.3s ease-in;
}
@media screen and (max-width: 750px){
	#header{
		grid-template-columns : auto 1fr calc( 168 * 100% / 730 ) calc( 40 * 100% / 730 ) calc( 60 * 100% / 730 ) calc( 40 * 100% / 730 );
		padding-top : calc( 20 * 100vw / 750 );
		padding-left : calc( 20 * 100% / 750 );
	}
	#header .logo{
		grid-row : 1;
		grid-column : 1;
	}
	#header .logo img{
		height : calc( 70 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	#header{
		grid-template-columns : auto calc( 30 * 100% / 1050 ) 1fr calc( 27 * 100% / 1050 ) calc( 84 * 100% / 1050 );
		padding-inline : calc( ( 100% - 1050px ) / 2 );
		padding-top : 15px;
		background-color : black;
	}
	#header .logo{
		grid-row : 1;
		grid-column : 1;
		align-self : start;
		padding-top : 10px;
	}
	#header .logo img{
		height : 54px;
	}
}
@media ( hover : hover ){
	#header .logo:hover img{
		transform : scale( 1.18 );
	}
}

/* --------------------------------------------
LANGUAGES
--------------------------------------------- */
#langNav_head{
	display : grid;
	grid-template-columns : repeat( 2 , 50% );
	border-radius : 100vmax;
	outline-offset : -1px;
	outline-width: 1px;
	outline-style: solid;
}
#langNav_head li{
	height : 100%;
}
#langNav_head a{
	display : flex;
	align-items : center;
	justify-content : center;
	width : 100%;
	height : 100%;
	margin : -1px 0;
	font-weight : 700;
	text-align : center;
	background-color : transparent;
	border : 1px solid transparent;
	border-radius : 100vmax;
	transition : all .3s ease-in;
	backface-visibility : hidden;
}
@media screen and ( max-width : 750px ){
	#langNav_head{
		grid-row : 1;
		grid-column : 3;
		height : calc( 54 * 100vw / 750 );
		margin-top : calc( 15 * 100vw / 750 );
	}
	#langNav_head a{
		font-size : calc( 30 * 100vw / 750 );
	}
	body:not( #top ) #langNav_head{
		outline-color: black;
	}
	body:not( #top ) #langNav_head li a{
		color : black;
	}
	body:not( #top ) #langNav_head a.is-current ,
	body:not( #top ) #langNav_head a:hover{
		color : white;
		background-color : black;
	}
	body#top #langNav_head{
		outline-color: #e5e5e5;
	}
	body#top #langNav_head li a{
		color : #e5e5e5;
	}
	body#top #langNav_head a.is-current ,
	body#top #langNav_head a:hover{
		color : #000;
		background-color : #e5e5e5;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#langNav_head{
		grid-row : 1;
		grid-column : 5;
		outline-color: #e5e5e5;
	}
	#langNav_head{
		height : 27px;
	}
	#langNav_head li a{
		color : #e5e5e5;
	}
	#langNav_head a.is-current ,
	#langNav_head a:hover{
		color : #000;
		background-color : #e5e5e5;
	}
	#langNav_head a{
		font-size : 15px;
		color : #000;
	}
}


/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/
@media screen and (max-width: 750px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open #menuBtn span span:nth-of-type(1){
		transform : translateY( calc( 10 * 100vw / 750 ) ) scale(0);
	}
	body.is-open #menuBtn span span:nth-of-type(2){
		transform : rotate(-45deg);
	}
	body.is-open #menuBtn span span:nth-of-type(3){
		transform : rotate(45deg);
	}
	body.is-open #menuBtn span span:nth-of-type(4){
		transform : translateY( calc( -10 * 100vw / 750 ) ) scale(0);
	}
	body.is-open #menuBtn span span:nth-of-type(1){
		transform : translateY( 10px ) scale(0);
	}
	body.is-open #menuBtn span span:nth-of-type(4){
		transform : translateY( -10px ) scale(0);
	}
	#menuBtn{
		z-index : 11;
		position : absolute;
	}
	#menuBtn span{
		font-size : 0;
	}
	#menuBtn > span:nth-of-type(1){
		width : 100%;
		height : 100%;
		position : relative;
		display : block;
	}
	#menuBtn span span{
		display : block;
		position : absolute;
		left : 0;
		transition : all .4s;
		width : 100%;
	}
	#menuBtn span span:nth-of-type(1){
		top : 0;
	}
	#menuBtn span span:nth-of-type(4){
		bottom : 0;
	}
}
#menuBtn span span{
	background-color : #000;
}
@media screen and (max-width: 750px){
	#menuBtn{
		width : calc( 30 * 100% / 375 );
		height : calc( 20 * 100vw / 375 );
		right : calc( 20 * 100% / 375 );
		top : calc( 18 * 100vw / 375 );
	}
	#menuBtn span span{
		height : calc( 2 * 100vw / 375 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : calc( 9 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#menuBtn{
		width : 34px;
		height : 28px;
		right : 50px;
	}
	#menuBtn span span{
		height : 2px;
		border-radius : 1px;
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : 13px;
	}
}
@media screen and (max-width: 750px){
	#menuBtn02{
		position : absolute;
		top : calc( 17 * 100vw / 375 );
		right : calc( 75 * 100% / 375 );
	}
	#menuBtn02 img{
		height : calc( 22 * 100vw / 375 );
	}
}
/*--------------------------------------------
NAV
---------------------------------------------*/
#nav .registration a {
	border: 1px solid #e5e5e5;
	border-radius: 15px;
	color: #e5e5e5;
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
	transition: background-color .3s ease-in, color .3s ease-in;
}
#nav .registration a:hover {
	background-color: #e5e5e5;
	color: #000;
}
@media screen and (max-width: 750px){
	#nav{
		position : fixed;
		top : 0;
		left : 100%;
		z-index : 11;
		max-height : 100vh;
		overflow-y : auto;
		transition : translate .5s ease-in;
		translate : 0 0;
		width : 100%;
		overflow-x : clip;
		color : #fff;
	}
	#nav .scroll{
		overflow-y : auto;
	}
	body.is-open #nav{
		translate : -100% 0;
		max-height : 100dvh;
	}
	#nav .registration {
		margin-top: calc( 25 * 100vw / 375 );
	}
	#nav .registration a {
		padding-bottom: calc( 10 * 100% / 135 );
		padding-top: calc( 10 * 100% / 135 );
		width: 96%;
	}
}
@media print,screen and (min-width: 751px){
	#nav{
		grid-row : 1;
		grid-column : 3;
	}
	#nav .scroll{
		display : grid;
		grid-template-columns : 1fr auto;
		column-gap : 40px;
	}
}
/*--------------------------------------------
GROBAL NAV
---------------------------------------------*/
#grobalNav > li > a , #grobalNav button{
	display : block;
	font-weight : 700;
	color : #e5e5e5;
	letter-spacing : .1em;
}
#grobalNav ul a{
	display : block;
	width : 100%;
	height : 100%;
	padding-inline : calc( 20 * 100% / 472 );
	font-family : "Noto Serif Japanese" , serif;
	font-weight : 700;
	line-height : normal;
	color : white;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
#grobalNav ul a span{
	display : block;
	font-family : "Noto Sans JP" , serif;
	line-height : normal;
}
#grobalNav ul li:nth-child( 1 ) a{
	background-image : url( "../images/header/img01.webp" );
}
#grobalNav ul li:nth-child( 2 ) a{
	background-image : url( "../images/header/img02.webp" );
}
@media screen and ( max-width : 750px ){
	#grobalNav{
		z-index : 2;
		width : calc( 270 * 100% / 750 );
		padding-top : calc( 40 * 100vw / 750 );
		padding-left : calc( 30 * 100% / 750 );
		padding-right : calc( 10 * 100% / 750 );
		margin-left : auto;
		background-color : black;
	}
	#grobalNav > li > a , #grobalNav button{
		padding-top : calc( 23 * 100vw / 750 );
		padding-bottom : calc( 23 * 100vw / 750 );
		font-size : calc( 28 * 100vw / 750 );
		white-space : nowrap;
	}
	#grobalNav > li > div{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		width : calc( 480 * 100% / 750 );
		height : 100%;
		pointer-events : none;
		border-bottom : solid calc( 4 * 100vw / 750 ) white;
		border-left : solid calc( 4 * 100vw / 750 ) white;
		border-right : solid calc( 4 * 100vw / 750 ) white;
		transition : translate .3s ease-in;
		translate : 100% 0;
	}
	#grobalNav button.is-selected + div{
		z-index : 0;
		pointer-events : auto;
		transition : translate .3s ease-in , z-index 0s ease .3s;
		translate : 0 0;
	}
	#grobalNav ul{
		width : 100%;
		height : 100%;
	}
	#grobalNav ul li{
		height : 50%;
		border-top : solid calc( 4 * 100vw / 750 ) white;
	}
	#grobalNav ul a{
		display : grid;
		grid-auto-flow : row;
		align-content : end;
		justify-content : start;
		padding-bottom : calc( ( 29 ) * 100vw / 750 );
		font-size : calc( 32 * 100vw / 750 );
	}
	#grobalNav ul a span{
		font-size : calc( 22 * 100vw / 750 );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#grobalNav{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		border-bottom : 1px solid #e5e5e5;
		column-gap : 10px;
		padding-bottom : 3px;
		margin-top : 4px;
	}
	#grobalNav > li > a , #grobalNav button{
		position : relative;
		padding-block : 6px;
		padding-inline : 5px;
		font-size : 14px;
		line-height: 1;
	}
	#grobalNav > li > a::after , #grobalNav button::after{
		position : absolute;
		top : 100%;
		left : 0;
		display : block;
		width : 100%;
		content : "";
		transition : background .3s ease-in;
		height : 3px;
	}
	#grobalNav > li > a:hover::after , #grobalNav > li > a.is-current::after , #grobalNav button:hover::after , #grobalNav button.is-current::after{
		background : #e5e5e5;
	}
	#grobalNav > li > div{
		position : absolute;
		left : 0;
		left : 50%;
		z-index : 1;
		display : grid;
		grid-template-rows : 0fr;
		transition : grid-template-rows .3s ease-in;
		translate : -50% 0;
		top : 94px;
		width : 1050px;
	}
	#grobalNav button.is-selected + div{
		grid-template-rows : 1fr;
	}
	#grobalNav ul{
		display : grid;
		grid-template-columns : repeat( 2 , 1fr );
		column-gap : calc( 10 * 100% / 1050 );
		justify-content : space-between;
		width : 100%;
		overflow : hidden;
	}
	#grobalNav ul li{
		border-color : white;
		border-style : solid;
		height : 352px;
		border-width : 3px;
	}
	#grobalNav ul a{
		padding-inline : calc( 21 * 100% / 514 );
		padding-top : 13px;
		font-size : 24px;
	}
	#grobalNav ul a span{
		font-size : 16px;
	}
}


#langNav{
	border: 1px solid #e5e5e5;
	display: flex;
}
#langNav li {
	flex-shrink: 0;
}
#langNav a{
	align-items : center;
	background-color: transparent;
	backface-visibility : hidden;
	border: 1px solid transparent;
	color: #e5e5e5;
	display : flex;
	font-size : 1.5rem;
	font-weight : 700;
	height : 100%;
	justify-content : center;
	margin: -1px 0 0 -1px;
	text-align : center;
	transition: all .3s ease-in;
	width : 100%;
	will-change : background-color, border-color, color;
}
#langNav li:nth-child(1) a {
	justify-content: flex-start;
	padding-left: 11px;
}
#langNav li:nth-child(2) a {
	justify-content: flex-end;
	padding-right: 10px;
}
#langNav a.is-current,
#langNav a:hover ,
{
	background-color: #e5e5e5;
	border-color: transparent;
	color: #000;
}
#langNav li:nth-child(2) a:hover {
	transform: translateX(-5px);
	transform-origin: right center;
}
@media screen and (max-width: 750px){
	#langNav{
		border-radius: calc( 15 * 100vw / 375 );
		height: calc( 27 * 100vw / 375 );
		margin-top : calc( 15 * 100vw / 375 );
		width: calc( 84 * 100vw / 375 );
	}
	#langNav li{
		width : calc( 42 * 100vw / 375 );
		height : calc( 27 * 100vw / 375 );
	}
	#langNav li a {
		border-radius: calc( 15 * 100vw / 375 );
	}
	#langNav a:hover {
		width: calc( 47 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#langNav{
		border-radius: 15px;
		height: 27px;
		order : 2;
		margin-left : 27px;
		width: 84px;
	}
	#langNav li{
		width : 42px;
		height : 27px;
	}
	#langNav li a {
		border-radius: 15px;
	}
	#langNav a:hover {
		width: 47px;
	}
}


#snsNav{
	display : grid;
	justify-content : space-between;
}
#snsNav img{
	width : 100%;
	height : auto;
	transition : scale .3s ease-in;
}
#snsNav a:hover img{
	scale : 1.07;
}
@media screen and ( max-width : 750px ){
	#snsNav{
		grid-template-columns : calc( 56 * 100% / 210 ) calc( 50 * 100% / 210 ) calc( 54 * 100% / 210 );
		justify-content : space-between;
		width : calc( 270 * 100% / 750 );
		padding-top : calc( 25 * 100vw / 750 );
		padding-bottom : calc( 60 * 100vw / 750 );
		padding-left : calc( 30 * 100% / 750 );
		padding-right : calc( 10 * 100% / 750 );
		margin-left : auto;
		background-color : black;
	}
}
@media print,screen and (min-width: 751px){
	#snsNav{
		grid-template-columns : 32px  27px  29px;
		column-gap : 15px;
	}
}

@media print,screen and (min-width: 751px){
	#subNav{
		display : flex;
		align-items : flex-start;
		width : 690px;
		margin-top : 3px;
		padding-top : 19px;
	}
	#subNav > li + li{
		margin-left : 63px;
	}
	#subNav p{
		font-weight : 700;
		font-size : 1.5rem;
		color : #fff;
		margin-bottom : 8px;
	}
	#subNav form{
		display : flex;
		align-items : center;
	}
	#subNav input[type="text"]{
		width : 338px;
		height : 34px;
		background-color : #fff;
		font-size : 1.4rem;
		padding-left : 15px;
		padding-right : 15px;
		font-weight : 500;
	}
	#subNav input[type="text"]:placeholder{
		color : #c4c4c4;
	}
	#subNav input[type="submit"]{
		display : flex;
		align-items : center;
		width : 75px;
		height : 34px;
		border : 1px solid #fff;
		border-radius : 5px;
		font-size : 1.6rem;
		margin-left : 5px;
		padding-left : 29px;
		color : #fff;
		background : url("../images/ui/icon/search02.svg") 12px 50% / auto 13px no-repeat;
		font-weight : 700;
		text-align : left;
	}
	html[lang="en"]  #subNav input[type="submit"]{
		display : flex;
		align-items : center;
		width : 95px;
		height : 34px;
		border : 1px solid #fff;
		border-radius : 5px;
		font-size : 1.6rem;
		margin-left : 5px;
		padding-left : 29px;
		color : #fff;
		background : url("../images/ui/icon/search02.svg") 12px 50% / auto 13px no-repeat;
		font-weight : 700;
		text-align : left;
	}
	#subNav ul{
		display : flex;
		align-items : center;
	}
	#subNav li li{
		width : 61px;
		height : 34px;
	}
  html[lang="en"]   #subNav li li{
		width : auto;
		height : 34px;
	}
  #subNav li li + li{
		margin-left : 6px;
	}
	#subNav li li a{
		height : 100%;
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		color : #000;
		font-weight : 800;
		font-size : 2.2rem;
		background-color : #ddd;
    padding: 0 5px;
	}
}
/*--------------------------------------------
HEAD
---------------------------------------------*/
#head01 .hgroup{
	display : flex;
	align-items : flex-start;
	flex-wrap : wrap;
}
#head01 p:nth-of-type(1){
	width : 100%;
	font-weight : 800;
}
#head01 h1{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	border-style : solid;
	border-color : currentColor;
	font-weight : 800;
	flex-shrink : 0;
}
#head01 p:nth-of-type(2){
	font-weight : 800;
	font-size : 1.6rem;
	line-height : 1.69;
}
#head01 ul{
	display : flex;
	align-items : flex-start;
}
#head01 li{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	border-style : solid;
	border-color : #000;
	background-color : #ddd;
	font-weight : 800;
}
#head01 input[type="text"]{
	width : 100%;
	border-style : solid;
	border-color : #000;
	font-weight : 500;
	font-size : 1.6rem;
}
#head01 input[type="text"]:placeholder{
	color : #c4c4c4;
}
#head01 input[type="submit"]{
	font-weight : 700;
	background-image : url("../images/ui/icon/search02.svg");
	background-position-y : center;
	background-color : #000;
	color : #fff;
	display : flex;
	align-items : center;
	margin-left : auto;
	margin-right : auto;
	font-size : 1.8rem;
	background-repeat : no-repeat;
	text-align : left;
}
@media screen and (max-width: 750px){
	#head01:not(.keyword) .wrap{
		padding-bottom : calc( ( 30 - 10 ) * 100vw / 375 );
	}
	#head01 p:nth-of-type(1){
		font-size : 3rem;
		margin-bottom : calc( 10 * 100vw / 375 );
	}
	#head01 h1{
		border-width : calc( 3 * 100vw / 375 );
		width : calc( 134 * 100% / 345 );
		height : calc( 90 * 100vw / 375 );
		font-size : 6rem;
		background-color : #ddd;
		flex-shrink : 0;margin-bottom: 5px;
	}
         html[lang="en"]  #head01 h1{
            width : auto;
            font-size : 4rem;
             padding: 0 calc( 10 * 100vw / 375 );
        }
	#head01 p:nth-of-type(2){
		margin-top : calc( 10 * 100vw / 375 );
	}
	#head01 ul{
		margin-top : calc( 0 * 100vw / 375 );
		margin-left : calc( -3 * 100vw / 375 );
	}
        html[lang="en"]  #head01 ul{
            margin-top : calc( 5 * 100vw / 375 );
            width: 100%;
        }
	#head01 li{
		padding-left : calc( 10 * 100vw / 375 );
		padding-right : calc( 10 * 100vw / 375 );
		font-size : 3rem;
            height: auto ;
		border-width : calc( 3 * 100vw / 375 );
            padding: 10px;
        text-align: left;
	}
        html[lang="en"]   #head01 li{
		margin-left : 0 !important;
            text-align: left;
            height: auto ;
            max-width: 94%;
            word-break: break-all;
            font-size: 2.5rem;
            padding: 10px;
        }
	#head01 form{
		margin-top : calc( ( 30 - 10 ) * 100vw / 375 );
	}
	#head01 input[type="text"]{
		height : calc( 60 * 100vw / 375 );
		border-width : calc( 3 * 100vw / 375 );
		padding-left : calc( 23 * 100% / 345 );
		padding-right : calc( 23 * 100% / 345 );
	}
	#head01 input[type="submit"]{
		margin-top : calc( 30 * 100vw / 375 );
		width : calc( 270 * 100% / 345 );
		height : calc( 50 * 100vw / 375 );
		padding-left : calc( 88 * 100% / 345 );
		background-size : auto calc( 16 * 100vw / 375 );
		background-position-x : calc( 62 * 100% / 345 );
		border-radius : calc( 5 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#head01 .wrap{
		padding-top : 30px;
	}
	#head01:not(.keyword) .wrap{
		padding-bottom : 30px;
	}
	#head01 p:nth-of-type(1){
		font-size : 4.8rem;
		margin-bottom : 20px;
	}
	#head01 h1{
		border-width : 3px;
		background-color : #f3f3f3;
		width : 153px;
		height : 96px;
		font-size : 7.2rem;
	}
         html[lang="en"]  #head01 h1{
            border-width : 3px;
            background-color : #f3f3f3;
            width : auto;
            height : 96px;
            font-size : 6em;
             padding: 0 10px;
        }
	#head01 p:nth-of-type(2){
		width : 870px;
		margin-left : 27px;
	}
        html[lang="en"]  #head01 p:nth-of-type(2){
            width : 700px;
            margin-left : 27px;
        }
	#head01 ul{
		margin-left : -3px;
		margin-top : 3px;
	}
	#head01 li{
		border-width : 3px;
		font-size : 3.2rem;
		padding-left : 9px;
		padding-right : 9px;
		height : 56px;
		margin-top : -3px;
	}
	#head01 form{
		margin-top : 50px;
	}
	#head01 input[type="text"]{
		height : 60px;
		border-width : 3px;
		padding-left : 23px;
		padding-right : 23px;
	}
	#head01 input[type="submit"]{
		margin-top : 30px;
		width : 270px;
		height : 50px;
		padding-left : 88px;
		background-size : auto 16px;
		background-position-x : 62px;
		border-radius : 5px;
	}
}
/*--------------------------------------------
KEYWORDS
---------------------------------------------*/
#keywords h2{
	border-top : 1px solid #000;
}
#keywords h2 button{
	display : flex;
	align-items : center;
	font-size : 1.8rem;
}
#keywords h2 button:before{
	content : "";
	display : block;
	background : url("../images/ui/icon/down01.svg") center / contain no-repeat;
	flex-shrink : 0;
	backface-visibility : hidden;
	will-change : transform;
	transition : transform .3s ease-in;
}
#keywords button.is-close:before{
	transform : rotate(180deg);
}
#keywords .link{
	display : flex;
	flex-wrap : wrap;
}
#keywords .link  a{
	width : 100%;
	height : 100%;
	border-style : solid;
	border-color : currentColor;
	color : #000;
	background : #ddd;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	font-weight : 800;
}
#keywords .link  a.is-current  {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #000 !important;
}

#keywords dl{
	border-bottom : 1px solid #000;
}
#keywords dt label{
	font-weight : 700;
	font-size : 1.8rem;
}
#keywords .checkboxies{
	display : flex;
	flex-wrap : wrap;
}
#keywords .checkboxies label span{
	cursor : pointer;
	display : flex;
	align-items : center;
}
#keywords .checkboxies label span:before{
	content : "";
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
}
#keywords .checkboxies label input[type="checkbox"]{
	opacity : 0;
	position : absolute;
	visibility : hidden;
}
#keywords .checkboxies label input[type="checkbox"]:checked ~ span:before{
	content : "\2713";
}
#keywords .checkboxies span{
	font-size : 1.8rem;
}
#keywords .checkboxies span:before{
	border : 1px solid #000;
	background-color : #fff;
}
#keywords input[type="text"]{
	border-bottom-style : solid;
	border-bottom-color : #000;
	font-weight : 500;
	background-color : transparent;
	font-size : 1.6rem;
}
#keywords .off input[type="text"]{
    opacity: .1;
}
#keywords input[type="text"]:placeholder{
	color : #c4c4c4;
}

#keywords input[type="submit"]{
	display : flex;
	align-items : center;
	background-image : url("../images/ui/icon/search02.svg");
	background-position-y : center;
	background-repeat : no-repeat;
	color : #fff;
	background-color : #000;
	font-weight : 700;
	margin-left : auto;
	margin-right : auto;
	font-size : 1.8rem;
	text-align : left;
}
#keywords .off{
    color: #ccc !important;
}
#keywords .off .checkboxies span:before{
	border : 1px solid #ccc !important;
}
#keywords .off input{
    cursor: text;
}
@media screen and (max-width: 750px){
	#keywords h2{
		padding-top : calc( 8 * 100vw / 375 );
	}
	#keywords button{
		width : 100%;
	}
	#keywords button:before{
		width : calc( 11 * 100vw / 375 );
		height : calc( 6 * 100vw / 375 );
		margin-right : calc( 8.5 * 100vw / 375 );
		margin-left : calc( 4.5 * 100vw / 375 );
	}
            #keywords .box p.message{
                font-size: 1.7rem;
                margin-top: calc( 20 * 100% / 345 );
                margin-bottom: calc( 0 * 100% / 345 );
                position: relative;
            }
	#keywords .link{
		margin-top : calc( ( 15 - 5 ) * 100vw / 375 );
		margin-left : calc( -5 * 100% / 345 );
	}
	#keywords .link li{
		margin-left : calc( 5 * 100% / 350 );
		margin-top : calc( 5 * 100vw / 375 );
	}
	#keywords .link li a{
		border-width : calc( 3 * 100vw / 375 );
		font-size : 2.4rem;
		padding : calc( 12 * 100vw / 375 );
        text-align: left;
	}
	#keywords form{
		margin-top : calc( 43 * 100vw / 375 );
	}
	#keywords dl{
		padding-bottom : calc( 50 * 100vw / 375 );
	}
	#keywords dl > div + div{
		margin-top : calc( 20 * 100vw / 375 );
	}
	#keywords dl > div + div:last-of-type{
		margin-top : calc( 30 * 100vw / 375 );
	}
	#keywords .checkboxies{
		margin-left : calc( -20 * 100% / 345 );
	}
	#keywords .checkboxies li{
		margin-left : calc( 20 * 100% / 365 );
		margin-top : calc( 20 * 100vw / 375 );
	}
	#keywords .checkboxies span:before{
		width : calc( 24 * 100vw / 375 );
		height : calc( 24 * 100vw / 375 );
		margin-right : calc( 6 * 100vw / 375 );
	}
	#keywords input[type="text"]{
		width : calc( 315 * 100% / 345 );
		padding-left : calc( 14 * 100% / 345 );
		padding-right : calc( 14 * 100% / 345 );
		border-bottom-width : calc( 3 * 100vw / 375 );
		padding-bottom : calc( 16 * 100vw / 375 );
		margin-top : calc( 20 * 100vw / 375 );
		height : calc( 35 * 100vw / 375 );
	}
	#keywords input[type="submit"]{
		margin-top : calc( 30 * 100vw / 375 );
		width : calc( 270 * 100% / 345 );
		height : calc( 50 * 100vw / 375 );
		background-size : auto calc( 16 * 100vw / 375 );
		background-position-x : calc( 62 * 100vw / 375 );
		padding-left : calc( 88 * 100% / 345 );
		border-radius : calc( 5 * 100vw / 375 );
	}

}
@media print,screen and (min-width: 751px){
	#keywords h2{
		padding-top : 8px;
	}
	#keywords button:before{
		width : 11px;
		height : 6px;
		margin-right : 8.5px;
		margin-left : 4.5px;
	}
	#keywords .link{
		margin-top : calc( 15px - 5px );
		margin-left : -5px;
	}
            #keywords .box p.message{
                font-size: 1.8rem;
                margin-top: 20px;
                margin-bottom: 0px;
                position: relative;
            }
	#keywords .link li{
		margin-left : 5px;
		margin-top : 5px;
	}
	#keywords .link li a{
		border-width : 3px;
		height : 56px;
		font-size : 3.2rem;
		padding-left : 12px;
		padding-right : 12px;
	}
	#keywords form{
		margin-top : 30px;
	}
	#keywords dl{
		padding-bottom : 50px;
	}
	#keywords dl > div{
		display : flex;
		align-items : flex-start;
	}
	#keywords dl > div + div{
		margin-top : 20px;
	}
	#keywords dt{
		flex-shrink : 0;
		width : 136px;
		margin-top : 3px;
	}
	#keywords .checkboxies{
		margin-left : -20px;
		margin-top : -20px;
	}
	#keywords .checkboxies li{
		margin-left : 20px;
		margin-top : 20px;
	}
	#keywords .checkboxies span:before{
		width : 24px;
		height : 24px;
		margin-right : 6px;
	}
	#keywords input[type="text"]{
		width : 540px;
		padding-left : 14px;
		padding-right : 14px;
		border-bottom-width : 3px;
		padding-bottom : 16px;
		margin-top : 3px;
		height : 35px;
	}
	#keywords input[type="submit"]{
		margin-top : 30px;
		width : 270px;
		height : 50px;
		background-size : auto 16px;
		background-position-x : 62px;
		padding-left : 88px;
		border-radius : 5px;
	}


}
/*--------------------------------------------
RESULT
---------------------------------------------*/
#result h3{
	font-weight : 800;
}
#result .condition{
	display : flex;
	border-bottom : 1px solid #000;
}
#result .condition dt{
	flex-shrink : 0;
}
#result .condition dt , #result .condition dd{
	font-weight : 700;
	font-size : 2.1rem;
}
#result .condition dd{
	flex-grow : 1;
}
#result .condition dd ul{
	display : flex;
	flex-wrap : wrap;
}
#result .condition dd li:not(:last-child):after{
	content : ", ";
	white-space : pre;
}
#result .count{
	display : flex;
}
#result .count dt , #result .count dd{
	font-weight : 700;
	font-size : 2.1rem;
}
#result .layout{
	display : flex;
	align-items : center;
	background-color : #000;
	border-style : solid;
	border-color : #000;
}
#result .layout button{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	width : 100%;
	height : 100%;
	font-size : 1.5rem;
	backface-visibility : hidden;
	will-change : background-color , color;
	transition : background-color .3s ease-in , color .3s ease-in;
	background-color : #000;
	color : #fff;
	font-weight : 700;
}
#result .layout button.is-select{
	background-color : #ddd;
	color : #000;
}
#result #order{
	display : flex;
	align-items : center;
	font-weight : 700;
	font-size : 1.6rem;
}
#result #order:after{
	content : "";
	display : block;
	flex-shrink : 0;
	background : url("../images/ui/icon/down01.svg") 0 0 / contain no-repeat;
	backface-visibility : hidden;
	will-change : transform;
	transition : transform .3s ease-in;
	transform-origin : center;
}
#result #order.is-desc:after{
	transform : rotate(180deg);
}
@media screen and (max-width: 750px){
	#result .wrap{
		padding-bottom : calc( 50 * 100vw / 375 );
	}
	#result h3{
		font-size : 3rem;
	}
	#result .condition{
		margin-top : calc( 10 * 100vw / 375 );
		padding-top : calc( 10 * 100vw / 375 );
		padding-bottom : calc( 10 * 100vw / 375 );
		padding-left : calc( 10 * 100% / 345 );
		padding-right : calc( 10 * 100% / 345 );
	}
	html[lang="en"]  #result .condition{
		padding-right : 0 !important;
        display: block;
	}
        html[lang="en"]  #result .condition dt{
            margin-bottom: calc( 10 * 100% / 345 );
        }
    #result .head{
		margin-top : calc( 30 * 100vw / 375 );
	}
}
@media screen and (max-width: 750px){
	#result .wrap{
		padding-top : calc( 50 * 100vw / 375 );
		padding-bottom : calc( 50 * 100vw / 375 );
	}
	#result h3{
		font-size : 3rem;
	}
	#result .condition{
		margin-top : calc( 30 * 100vw / 375 );
		padding-bottom : calc( 8 * 100vw / 375 );
	}
	#result .head{
		margin-top : calc( 19 * 100vw / 375 );
	}
	#result .head > div{
		display : flex;
		align-items : center;
		justify-content : space-between;
		margin-top : calc( 30 * 100vw / 750 );
	}
	#result .layout{
		border-radius : calc( 5 * 100vw / 375 );
		border-width : calc( 3 * 100vw / 375 );
	}
	#result .layout li{
		width : calc( 116 * 100vw / 375 );
		height : calc( 34 * 100vw / 375 );
	}
	#result .layout button{
		border-radius : calc( 2 * 100vw / 375 );
	}
	#result #order:after{
		width : calc( 11 * 100vw / 375 );
		height : calc( 5.5 * 100vw / 375 );
		margin-left : calc( 9 * 100vw / 375 );
	}
	#result .search-notfound p {
        text-align: center;
        padding: 3em 0 3em 0 ;
        font-size : 1.5rem;
    }

}
@media print,screen and (min-width: 751px){
	#result .wrap{
		padding-top : 80px;
		padding-bottom : 100px;
	}
	#result h3{
		font-size : 4.8rem;
	}
	#result .condition{
		margin-top : 30px;
		padding-bottom : 8px;
	}
	#result .head{
		display : flex;
		justify-content : space-between;
		align-items : flex-start;
		margin-top : 15px;
	}
	#result .head > div{
		display : flex;
		align-items : flex-end;
		flex-direction : column;
	}
	#result .count{
		margin-top : 4px;
	}
	#result .layout{
		border-radius : 5px;
		border-width : 3px;
	}
	#result .layout li{
		width : 116px;
		height : 34px;
	}
	#result .layout button{
		border-radius : 2px;
	}
	#result #order{
		margin-top : 7px;
	}
	#result #order:after{
		width : 11px;
		height : 5.5px;
		margin-right : 8px;
		margin-left : 9px;
	}
	#result .search-notfound  {
	}
        #result .search-notfound p {
            text-align: center;
            padding: 3em 0 3em 0 ;
            font-size : 1.5rem;
        }
}
/*--------------------------------------------
POSTS SECTION
---------------------------------------------*/
.posts-section{
	overflow : hidden;
}
.posts-section h3{
	font-weight : 800;
}
.posts-section picture{
	width : 100%;
	height : auto;
}
.posts-section picture img{
	width : 100%;
	height : auto;
}
.posts-section a{
	color : #000;
	position : relative;
	display : block;
}
.posts-section a > div{
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	display : flex;
	flex-direction : column;
	justify-content : flex-end;
}
.posts-section h4{
	font-size : 1.6rem;
	font-weight : 700;
	text-shadow : 0 0 3px rgba(0, 0, 0, .75);
	color : #fff;
}
.posts-section p{
	font-size : 1.4rem;
	line-height : 1.5;
	background : rgba(255, 255, 255, .65);
	font-weight : 500;
}
@media screen and (max-width: 750px){
	.posts-section h3{
		font-size : 3rem;
	}
	.posts-section .wrap > ul{
		margin-top : calc( 20 * 100vw / 375 );
		padding-left : calc( 14 * 100% / 345 );
		padding-right : calc( 15 * 100% / 345 );
	}
	.posts-section div.slick-slide{
		width : calc( 150 * 100vw / 375 );
		margin-left : calc( 8 * 100vw / 375 );
		margin-right : calc( 8 * 100vw / 375 );
	}
	.posts-section h4{
		padding-left : calc( 10 * 100vw / 375 );
		padding-right : calc( 10 * 100vw / 375 );
		margin-bottom : calc( 10 * 100vw / 375 );
	}
	.posts-section p{
		margin-top : calc( ( 10 - 5.5 ) * 100vw / 375 );
		padding-left : calc( 10 * 100vw / 375 );
		padding-right : calc( 10 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	.posts-section h3{
		font-size : 4.8rem;
	}
	.posts-section .wrap > ul{
		margin-top : 30px;
	}
	.posts-section div.slick-slide{
		margin-left : 15px;
		margin-right : 15px;
		width : 150px;
	}
	.posts-section h4{
		padding-left : 10px;
		padding-right : 10px;
		margin-bottom : 10px;
	}
	.posts-section p{
		padding-top : calc( 10px - 3.5px );
		padding-bottom : calc( 10px - 3.5px );
		padding-left : 10px;
		padding-right : 10px;
	}
}
.posts-section02{
	overflow : hidden;
}
.posts-section02 h3{
	font-weight : 800;
}
.posts-section02 picture{
	width : 100%;
	height : auto;
}
.posts-section02 picture img{
	width : 100%;
	height : auto;
}
.posts-section02 a{
	color : #000;
	position : relative;
	display : block;
}
.posts-section02 a > div.box{
    margin-top: 10px;
}
.posts-section02 h4{
	font-size : 1.6rem;
	font-weight : 700;
}
.posts-section02 p , .posts-section02 time{
	font-size : 1.4rem;
	line-height : 1.3;
	font-weight : 500;
}
.posts-section02 p {
    margin-top: 5px;
}
@media screen and (max-width: 750px){
	.posts-section02 h3{
		font-size : 3rem;
	}
	.posts-section02 .wrap > ul{
		margin-top : calc( 10 * 100vw / 375 );
	}
	.posts-section02 div.slick-slide{
		width : calc( 150 * 100vw / 375 );
		margin-left : calc( 8 * 100vw / 375 );
		margin-right : calc( 8 * 100vw / 375 );
	}
	.posts-section02 h4{
		margin-bottom : calc( 10 * 100vw / 375 );
	}
	.posts-section02 p{
		margin-top : calc( ( 10 - 5.5 ) * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	.posts-section02 h3{
		font-size : 4.8rem;
	}
	.posts-section02 .wrap > ul{
		margin-top : 30px;
	}
	.posts-section02 .slick-slide{
		margin-left : 8px;
		margin-right : 8px;
		width : 150px !important;
	}
	.posts-section02 h4{
	}
	.posts-section02 p{
	}
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
#toTop{
	position : fixed;
	z-index : 7;
}
@media screen and (max-width: 750px){
	#toTop{
		bottom : calc( 40 * 100vw / 375 );
		right : calc( 15 * 100% / 375 );
	}
	body.home #toTop{
		bottom : calc( 64 * 100vw / 375 );
		right : calc( 15 * 100% / 375 );
}
	#toTop img{
		height : calc( 36 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#toTop{
		bottom : 22px;
		right : 22px;
	}
	#toTop img{
		height : 36px;
	}
}
#footer{
	color : #fff;
	position : relative;
}
#footer a{
	color : #fff;
}
#footer .address{
	display : flex;
	align-items : center;
}
#footer dt , #footer dd{
	font-size: 1.5rem;
	letter-spacing: .05em;
	line-height: 2;
}
#footer .contact a {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .1em;
	position: relative;
}
#footer .contact a:after {
	backface-visibility: hidden;
	border: 1px solid #fff;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: transform .3s ease-out;
	width: 100%;
	will-change: transform;
}
#footer .contact a:hover:after {
	transform: scaleX( 1.06 ) scaleY( 1.2 )
}
#footer .contact a span {
	align-items: center;
	display: flex;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%
}
#footer .contact a span:after{
	content : "";
	display : block;
	background : url("../images/ui/icon/mail_black.svg") 0 0 / contain no-repeat;
	flex-shrink : 0;
}
@media screen and (max-width: 750px){
	#footer .wrap01{
		position : relative;
		padding-top : calc( 30 * 100vw / 375 );
		padding-bottom : calc( 25 * 100vw / 375 );
	}
	#footer .contact a {
		height: calc( 50 * 100vw / 375 );
		margin-left: auto;
		margin-right: auto;
		width: calc( 172 * 100vw / 375 );
	}
	#footer .contact a:after {
		border-radius: calc( 25 * 100vw / 375 );
	}
	#footer .contact a span:after {
		height: calc( 38 * 100vw / 375 );
		margin-left: calc( 15 * 100vw / 375 );
		width: calc( 38 * 100vw / 375 );
	}
	#footer .address{
		margin-top : calc( 30 * 100vw / 375 );
	}
	#footer .address h5 img{
		height : calc( 50 * 100vw / 375 );
	}
	#footer .address dl{
		margin-left : calc( 8 * 100% / 345 );
	}
}
@media print,screen and (min-width: 751px){
	#footer .wrap01{
		display : flex;
		align-items : center;
		padding-top : 18px;
		padding-bottom : 25px;
	}
	#footer .contact {
		margin-left: 100px;
		order: 2;
	}
	#footer .contact a {
		height: 50px;
		width: 172px;
	}
	#footer .contact a:after {
		border-radius: 25px;
	}
	#footer .contact a span:after {
		height: 38px;
		margin-left: 15px;
		width: 38px;
	}
	#footer .address{
		order : 1;
	}
	#footer .address h5 img{
		height : 60px;
	}
	#footer .address dl{
		margin-left : 27px;
	}
}
#footer .wrap02 ul{
	display : flex;
	align-items : center;
}
#footer .wrap02 li + li:before{
	content : "｜";
	flex-shrink : 0;
}
#footer .wrap02 p{
	text-align : center;
	line-height : 1.2;
}
@media screen and (max-width: 750px){
	#footer .wrap02{
		padding-top : calc( 15 * 100vw / 375 );
		padding-bottom : calc( ( 15 - 1.4 ) * 100vw / 375 );
	}
	#footer .wrap02 ul{
		justify-content : center;
	}
	#footer .wrap02 li + li:before{
		margin-left : calc( 12 * 100vw / 375 );
		margin-right : calc( 12 * 100vw / 375 );
	}
	#footer .wrap02 a{
		font-size : 1.4rem;
		font-weight : 500;
	}
	#footer .wrap02 p{
		margin-top : calc( 20 * 100vw / 375 );
		font-size : 1.4rem;
		font-weight : 500;
	}
}
@media print,screen and (min-width: 751px){
	#footer .wrap02{
		padding-top : 12px;
		padding-bottom : calc( 18px - 1.2px );
	}
	#footer .wrap02 li + li:before{
		margin-left : 10px;
		margin-right : 10px;
	}
	#footer .wrap02 a{
		font-size : 1.3rem;
		letter-spacing: .1em;
	}
	#footer .wrap02 p{
		font-size : 1.2rem;
		margin-top : 2px;
		letter-spacing: .1em;
	}
}
@media screen and (max-width: 750px){
	#footer .wrap03{
		position : fixed;
		left : 0;
		width : 100%;
		bottom : 0;
		padding-top : calc( 15 * 100vw / 375 );
		padding-bottom : calc( 15 * 100vw / 375 );
		z-index : 6;
	}
	#footer .wrap03 #toTop{
		position : absolute;
		top : calc( 15 * 100vw / 375 );
	}
	#footer .wrap03 > ul{
		position : relative;
		display : flex;
		align-items : center;
	}
	#footer .wrap03 > ul > li{
		bottom : 0;
		width : calc( 61 * 100% / 345 );
	}
       html[lang="en"]  #footer .wrap03 > ul > li{
            bottom : 0;
           width : auto;

        }
	#footer .wrap03 > ul > li + li{
		margin-left : calc( 6 * 100% / 345 );
	}
	#footer .wrap03 li a{
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		width : 100%;
		height : calc( 34 * 100vw / 375 );
		font-weight : 800;
		font-size : 2.2rem;
		background-color : #ddd;
		color : #000;
	}
        html[lang="en"]  #footer .wrap03 li a{
		    width : 100%;
            display : flex;
            align-items : center;
            justify-content : center;
            text-align : center;
            height : calc( 34 * 100vw / 375 );
            font-weight : 800;
            font-size : 1.4rem;
            background-color : #ddd;
            color : #000;
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
	#footer .wrap03 form{
		display : flex;
		justify-content : space-between;
		height : calc( 34 * 100vw / 375 );
		margin-top : calc( 15 * 100vw / 375 );
	}
	#footer .wrap03 input[type="text"]{
		width : calc( 235 * 100% / 345 );
		background-color : #fff;
		height : 100%;
		font-weight : 500;
		padding-left : calc( 8 * 100% / 345 );
		font-size : 1.4rem;
	}
	#footer .wrap03 input[type="text"]:-ms-input-placeholder{
		color : #c4c4c4;
	}
	#footer .wrap03 input[type="text"]::-ms-input-placeholder{
		color : #c4c4c4;
	}
	#footer .wrap03 input[type="text"]::placeholder{
		color : #c4c4c4;
	}
	#footer .wrap03 input[type="submit"]{
		display : flex;
		align-items : center;
		border : 1px solid #fff;
		border-radius : calc( 5 * 100vw / 375 );
		background : url("../images/ui/icon/search02.svg") calc( 12 * 100vw / 375 ) 50% / auto calc( 13 * 100vw / 375 ) no-repeat;
		color : #fff;
		height : 100%;
		font-weight : 700;
		width : calc( 105 * 100% / 345 );
		font-size : 1.6rem;
		color : #fff;
		padding-left : calc( 29 * 100vw / 345 );
	}
}


/*========= モーダル表示のためのCSS ===============*/

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
  display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before{
  background:#ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
  font-size:2rem;
  text-align: center;
  margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
  padding:0;
}
.modal-msg {

}
    .modal-msg h2 {

    }
    .modal-msg p {

    }
@media screen and (max-width: 750px){
    .modal-msg h2 {
        font-size: 2.2rem;
        margin-bottom: .3em;
    }
    .modal-msg p {
        font-size: 1.4rem;
        line-height: 1.6;
    }

}
@media print,screen and (min-width: 751px){
    .modal-msg h2 {
        font-size: 2.6rem;
        margin-bottom: .3em;
    }
    .modal-msg p {
        font-size: 1.6rem;
        line-height: 1.6;

    }
}
.off .p-tips{
    opacity: .2;
}
.p-tips a{
    line-height: 1.5;
    margin-bottom: 2em;
    margin-top: .5em;
    display: flex;
    align-items: center;
}
.p-tips span.icon {
    background: url(../images/ui/icon/tips_blk.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: block;
}
.text-number {
        font-weight: 600;
}
.span-block {
    display: block;
}
@media screen and (max-width: 750px){
    .p-tips {
        font-size : 1.4rem;
    }
        .p-tips span.icon {
            width: 16px;
    }
    .text-number {
        font-size : 1.4rem;
    }
    .text-number.category {
        margin-top: .5em;
        font-size: 2.0rem;
    }
    .text-number.keyword {
        font-size: 2.0rem;
    }
}
@media print,screen and (min-width: 751px){
    .p-tips{
        position: relative;
    }
        .p-tips.page-keyword a{
            position: absolute;
            top: -80px;
        }
    .p-tips {
        font-size : 1.4rem;
    }
        .p-tips span.icon {
            width: 20px;
        }
    .text-number {
        font-size : 1.6rem;
        font-weight: 600;
    }
    .text-number.category {
        margin-top: .5em;
        font-size: 2.0rem;
    }
    .text-number.keyword {
        font-size: 2.0rem;
    }
}