@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
  --color-black: #333333;
  --color-white: #fefefe;

  --color-indigoblue: #135589;

  --color-red: #F23838;
  --color-orange: #fa0;
	--color-lightgray: #D9D9D9;
	--color-lightgray2: #999;

	--color-pagenate-not-current: #777;	/*pagenate not current*/
	--color-form-border: #B4C5DE;	/*contact form*/
	--color-form-bg-not-required: #D1D3D3;	/*contact form*/
	--color-lightblue: #389CD7;	/*contact form*/

	--color-news-ash-indigoblue: #1F5E81;
	--color-news-lightgray: #777;
	--color-news-border: #B4C5DE;

	--color-model-number: #666;

	--color-star-true: #f7bc00;
	--color-star-false: #D9D9D9;

	--color-links-blue: #034495;
	--color-links-blue2: #30f;


	/*メインフレームのサイズ指定関連*/
	--max-width-pc: 1120px;
	--min-hight-PC-main: calc(100vh - 85px - 365px);
	--margin-h-pc: 32px;	/*幅が1120px切ったときの水平マージン*/

	--text-skewX: -15deg; /*日本語見出しの斜体対応*/
}

*{
	box-sizing: border-box;
	color: var(--color-black);
	margin: 0;
	padding: 0;
}

/*フォント関連*/
.font-jp{
	font-family: "Roboto", sans-serif;
  font-style: normal;
}

.font-en{
	font-family: "Josefin Sans", sans-serif;
  font-style: italic;
}

.font-Montserrat{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

body{
	font-family: "Roboto", sans-serif;
	color: var(--color-main01);
	background-color: var(--bgcolor-main01);
  width: 100%;
	margin: 0px;
	padding: 0px;
}


/*ユーティリティ*/
.disp-none{
	display: none;
}
@media screen and (max-width: 1024px) {
	.pc-only{
		display: none;
	}
}
@media screen and (min-width: 1024px) {
	.sp-only{
		display: none;
	}
}


/*評価★☆*/
.star-true{
	/*font-size: 2em;*/
  color: var(--color-star-true);
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}
.star-false{
	/*font-size: 2em;*/
  color: var(--color-star-false);
}


/*ボタン*/
.button-red,
.button-indigoblue,
.button-white{
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 352px; */
  width: 342px;
	max-width: 100%;
  height: 42px;
  color: var(--color-white);
  background-color: var(--color-red);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 42px;
	box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.25);
}
.button-red{
  color: var(--color-white);
  background-color: var(--color-red);
}
.button-indigoblue{
  color: var(--color-white);
  background-color: var(--color-indigoblue);
}
.button-white{
  color: var(--color-black);
  background-color: var(--color-white);
	opacity: 1;
}
.button-red:hover,
.button-indigoblue:hover,
.button-white:hover{
	transition:
		color 0.3s ease-out 0s,
		background-color 0.3s ease-out 0s,
		opacity 0.3s ease-out 0s;
  color: var(--color-black);
  background-color: var(--color-white);
	opacity: 1;
}

/*テキストデコレーション*/
.text-outline{
	color: #fefefe;
  /*text-shadow: 0px 0px 2px #898989;*/
  text-shadow: 0px 0px 2px #000;
}

.text-red{
	color: #f00;
}

/**/
a{
	text-decoration: none;
}
a:link{
	color: var(--color-linktext01);
	text-decoration: none;
	font-weight: bolder;
}
a:visited{
	color: var(--color-linktext01);
	text-decoration: none;
	font-weight: bolder;
}
a:hover{
	color: var(--color-linktext01-hover);
	text-decoration: none;
	font-weight: bolder;
}
a:active{
	color: var(--color-linktext01);
	text-decoration: none;
	font-weight: bolder;
}