@charset "UTF-8";

#contents_wrapper {
	max-width:1200px;
	margin:0 auto;
	text-align:left;
}

#contents_wrapper h2#entry {
	margin-bottom:1em;
	padding:0.2em 0.5em;
	background-color: #fff;
	border:2px solid #d4b679;
	color:#999;
	font-size:140%;
	font-weight:bold;
	text-align:center;
	text-shadow:none;
	box-shadow:none;
}

#contents_wrapper h3 + div {overflow:hidden;}

#entry_box {
	margin:1em auto 2em;
	border:1px solid #f00;
	background-color:#ffc;
	text-align:center;
}
#entry_box p {padding-bottom:0.5em;}
#entry_box a:link, #entry_box a:visited {color:#00f; text-decoration:underline;}
#entry_box a:hover, #entry_box a:active {color:#00f; text-decoration:none;}

#entryDays{
	background:#e41b1e;
	width:600px;
	margin:0 auto 30px;
	padding:4px 1em;
	font-size:20px;
	font-weight:bold;
	color:#fff;
	text-align:center;
}

#campaign .contents_box div,
#campaign p {margin-bottom:1em;}

.feature_bnr {margin:0 0 0.5em; text-align:center;}

#toTop{
	width:400px;
	margin:20px auto;
	font-size:16px;
	font-weight:bold;
	text-align:center;
}
#toTop a{
	display:block;
	background:#495be3;
	padding:4px 1em;
	color:#fff;
	border:2px solid #495be3;
	border-radius:8px;
}
#toTop a:hover{
	color:#ddd;
	border:2px solid #ccc;
	text-decoration:none;
}


/* item_box
-------------------*/
.item_box {
    background: linear-gradient(#fff 0%, #eee 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #ccc;
    float: left;
}
.item_box .tit, .item_box .txt {
    margin: 0.5em;
    min-height: 50px;
}
.item_box .more_info {
    margin: 0.5em;
    padding: 0.5em;
}
.item_box a {
    text-decoration: none;
}
.item_box .btn, p.btn_submit {
    border-radius: 5px;
    color: #fff;
    font-size: 120%;
    margin: 0.5em;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #036;
}
p.btn_submit a {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}
.item_box a:link .btn, .item_box a:visited .btn, p.btn_submit {
    background: linear-gradient(#39c 0%, #369 100%) repeat scroll 0 0 #39c;
}
.item_box a:active .btn, .item_box a:hover .btn, p.btn_submit:hover {
    background: linear-gradient(#369 0%, #39c 100%) repeat scroll 0 0 #39c;
}
.item_box .bookstore {
    display: block;
    margin-top: 0.5em;
    text-align: center;
}
p.present {
    color: red;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}
.fontred{    color: red;    font-weight: bold;}

#pickup_feature{
	width:100%;
	margin:0;
	padding-bottom:10px;
	text-align:center;
}

#pickup_feature .feature img {
	width:250px;
	padding-bottom: 1em;
}


@media only screen and (min-width: 640px) {

#pickup_feature{
	width:860px;
	margin:0 auto;
	padding-bottom:30px;
	text-align:center;
}
#pickup_feature .feature{
	float:left;
	width:300px;
	margin:10px 10px 0;
}
#pickup_feature .feature img {width:100%;}


#containers .item_box{
    float:none;
    overflow:hidden;
    width:100%;
    margin:0;
}



#entry_box {
	width:600px;
	padding:18px 30px 10px;
	border-radius:12px;
}
	
.item_box {
    margin: 10px 60px 20px;
    width: 200px;
}
.item_box .img img {
    height: auto;
    width: 200px;
}
#period {
	background:#df3b22;
	padding:6px 20px 4px;
	color:#ffffff;
	font-size:16px;
	font-weight: bold;
	border-radius:22px;
	margin-bottom:10px;
}
#campaign .contents_box {
	width:98%;
	margin:0 auto;
}
}
@media screen and (max-width: 640px) {
.contents_box {
	width:96%;
	margin:0 auto;
}
#entry_box {
	padding:18px 15px 10px;
	border-radius:12px;
}
#entry_box img {width:100%;}
#entry_box p {
	font-size:0.8em;
}
#entryDays{
	background:#e41b1e;
	width:90%;
	margin:0 auto 30px;
	padding:4px 1em;
	font-size:12px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	box-sizing:border-box;
}

#period {
	background:#df3b22;
	padding:6px 20px 4px;
	color:#ffffff;
	font-size:16px;
	font-weight: bold;
	border-radius:22px;
	margin-bottom:10px;
}
.item_box {
    float: none;
    margin: 0;
    overflow: hidden;
    width: 100%;
}
.item_box .img img {
    float: left;
    margin: 2%;
    width: 30%;
}
p.apply_campaign {
	font-size:1.4em !important;
}
.item_box .more_info_wrap, .item_box .btn {
    clear: both;
}

.feature_bnr img {width:100%;}

#toTop{
	width:90%;
	margin:20px auto;
	font-size:14px;
	font-weight:bold;
	text-align:center;
}

}


/*========================================
 parts
========================================*/
.mb2em {margin-bottom:2em;}
.red {color:#f00;}

/*========================================
 +clearfix
========================================*/
.clearfix {overflow: hidden !important;}






/*========================================
 ※※　変更　※※
========================================*/

.button-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ← 2カラム固定 */
  gap: 20px;
  max-width: 600px; /* 任意。幅調整したいときに */
  margin: 0 auto;
  padding: 0px;
  box-sizing: border-box;
}

a.button {
  display: block; /* ←ここ重要 */
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  padding: 14px;
  border-radius: 10px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
}

.yellow { background-color: #f5a623; }
.blue   { background-color: #1a1a80; }
.pink   { background-color: #ff66b3; }
.red    { background-color: #d6203f; }

a.button:hover {
  opacity: 0.85;
}


@media (max-width: 600px) {
  .button-container {
    grid-template-columns: 1fr;
    gap: 8px 20px; /* 縦（行間）を8pxに、横（列間）は20pxのまま */
  }
}
div.500en_recommend{
	margin: 1em;
	text-align:center !important;
}

div.login{
	width:80%;
	text-align-last:center;
	font-size:1.2em;
	font-weight:bold;
	padding:10px;
	margin:auto auto 10px auto;
	color:#ffffff;
}

@media screen and (min-width: 768px){
div.button {
    width : 45%;
	float:revert;
	margin:auto;
	margin-bottom:1em;
	align-items:center;
	display:inline-block;
}
}

/* h2 */
#contents_wrapper .h2_ttl{
    font-size: 1.6em !important;
    line-height: 1.5;
    margin-top: 20px;
    margin-bottom: 10px;
	color: #333;
	background: #FFC819;
	text-align: center ;
}

/* h3 */
#contents_wrapper .h3_ttl{
    font-size: 1.3em !important;
    line-height: 1.3;
    margin-top: 18px;
    margin-bottom: 10px;
	color: #333;
	background: #FFF2BB;
		text-align: center;
}

@media screen and (min-width: 769px) {
  .pre {
    display: block;
  height: auto;
  margin-inline: auto;
    width: 70%;
  }
 }