@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/*** all ***/

*:focus {
  outline:none;
}
html{
  font-size: 16px;
}
body{
  -webkit-text-size-adjust: 100%;
	line-height: 1.5;
  letter-spacing: 0;
}
body, .font_sans-serif{
	font-family: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}

h2, h3, h4, h5, h6{
  line-height: 1.5;
}

input[type="submit"], input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus, input[type="button"]::focus {
  outline-offset: -2px;
}
textarea{
  overflow: auto
}

/*---------------------------------------------------------------------------*/

#wrap{
  max-width: 562.5px;
  margin: 0 auto;
  overflow: hidden;
}

.btn_wrap {
  bottom: 29%;
}

.btn_wrap2 {
  bottom: 1%;
}

.btn_wrap3 {
  bottom: 2%;
}

.readmore {
  position: relative;
  margin: 50px auto 0;
  padding: 0px 0px 75px;
}

.readmore-content {
  position: relative;
  height: 200px;
  transition: all .4s;
  overflow: hidden;
}

.readmore-content::before {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 75px;
  transition: all .4s;
  background: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, #fff 100% );
}

.readmore-content.is_open:before{
  display: none;
}

.readmore button{
  position: absolute;
  display: table;
  left: 50%;
  bottom: 0px;
  margin: 0 auto;
  width: 200px;
  padding: 10px 0;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  background-color: #333;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 1;
  transition: all .4s;
}

.read_wrap{
	height: 120px;
	transition: height 0.2s;
}
.read_wrap.open{
	height: initial;
}
.read_wrap::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100px;
	left: 0;
	bottom: 0;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
	transition: opacity 0.2s;
	pointer-events: none;
}
.read_wrap.open::before{
	opacity: 0;
}
.read_btn{
	cursor: pointer;
}

.count_wrap{
	/* color */
	--color-red: #f81717;
	--color-yellow: #ffff3d;

    background-color: var(--color-yellow);
    padding: 1% 5% 5%;
    text-align: center;
	letter-spacing: 0;
}
.countdown{
    font-size: 24px;
    border-radius: 5px;
	border: solid 2px;
	color: var(--color-red);
    background-color: #fff;
}

.countdown .count_top{
	color: #fff;
	background-color: var(--color-red);
    width: 80px;
	padding: 2% 0;
	font-size: calc(1em - 10px);
}
.countdown .count_txt{
	font-size: calc(1em - 8px);
	margin-right: 0.2em;
}
.count_item{
    line-height: 1;
	align-items: baseline;
	font-weight: bold;
    width: calc(100% - 80px);
}
@media screen and (min-width: 563px){
	.countdown{
		font-size: calc(24px * 1.5);
	}
	.countdown .count_top {
		width: 100px;
		font-size: calc(1em - 16px);
	}
	.count_item {
		width: calc(100% - 100px);
	}
}



/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
}

/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
}