@charset "UTF-8";
body{font-size:14px; line-height:1.5; margin:0;}
img{max-width:100%;}
.flex{display:flex;}
.sp-none{display:none;}
#item-section{flex-wrap: wrap;}
#item-section div{width:calc(100%/2); padding:0 2.5%; box-sizing:border-box;}
#item-section div img:not(.tousen){width:100%;}

img.tousen{width:50px; position:absolute;}

.select img{max-width:95%; display:block; margin:0 auto 3%;}

#main{width:; vertical-align:bottom; margin-bottom:3%;}
.wrapper{
	width: 95%;
	max-width:900px;
	margin:0 auto;
	padding:0;
	background-size:contain;
}

div#span{color:#000; padding:2.5%; box-sizing:border-box;}
div#span dt{font-size:18px; font-weight:bold; color:#F60; border-bottom:1px solid #F60; margin-bottom:1.5%;}


h2{
	width:100%;
	margin:0 auto;
	text-align:center;
	font-size:24px;
	color:#F60;
	font-weight:bold;
}
h4.title{
	width:100%;
	padding:2%;
	box-sizing:border-box;
	margin:0 auto 2%;
	text-align:center;
	font-size:3vmax;
	background:#F60;
	color:#FFF;
	border:2px solid #F60;
	font-weight:bold;
}

.select p {
	margin-left: 1rem;
	font-size:14px;
}

p.attention{color:#C00; font-size:12px;}
footer{background:#000; text-align:center; color:#fff; width:100%; box-sizing:border-box; padding:2%;}

#ttcp_box h1{
	width:320px;
	height:185px;
	margin:0 auto;
	background:url(cp_title.jpg) no-repeat;
	background-size:320px 185px;
	text-indent:-9999px;
}

.select{border-bottom:1px solid #F60; border-left:4px solid #F60; margin-bottom:2%;}
.select h3 dl {margin-left:1rem;}
.select h3 dl dt{font-size:18px; color: #f00; font-weight: bold;}
.select h3 dl dd{font-size:15px; color:#000; }

.select dt.application a,.select dt.exchange a{
	display:inline-block;
	width:80%;
	height:35px;
	margin:5px auto 7px;
	padding-top:15px;
	border-radius: 10px;
	background: -webkit-gradient(linear, left top, left bottom, from(#BF0008), to(#930000));
	text-shadow: 1px 1px 2px #000;
	-webkit-box-shadow: 2px 2px 4px 0px #000;
	text-align:center;
	color:#FFF;
	font-weight:bold;
	text-decoration:none;
}

.select dd{
	color:#000;
	margin-bottom:8px;
}



.conditions{
	width:95%;
	margin:0 auto 15px;
	font-size:85%;
	color:#FF0;
	line-height:1.2;
	font-weight:bold;
	text-shadow: 1px 1px 3px #030;
}

.notes{
	width:90%;
	padding-left:12px;
	margin:0 auto 10px;
	font-size:12px;
	color:#FFF;
	line-height:1.2;
	text-indent:-12px;
}

.master{
	background:url(master_back.png) repeat-y;
	background-size:100%;
	text-align:center;
}


.master h3{
	width:95%;
	margin:0 auto 10px;
	padding:5px;
	background:#1E3A83;
	text-align:center;
	font-size:90%;
	color:#FFF;
	font-weight:bold;
	text-shadow: 1px 1px 3px #000;
	line-height:1.4;
}

.master p{
	margin-bottom:8px;
	font-size:120&;
	color:#AC1316;
	font-weight:bold;
	line-height:2;
}

.master p a{
	font-size:80%;
	color:#000;
}

.master p a.bn{
	display:block;
	width:90%;
	margin:0 auto;
	padding:8px 15px 0 12px;
	background: url(masterspace_back.jpg) no-repeat center;
	background-size:100%;
}

.under_text_link{
	text-align:center;
}

.under_text_link a{color:#000;}


.item-main {
	font-size:12.5px;
	background:#F60;
	color:#fff;
	padding:3% 2.5% 2%;
	text-align: center;
	margin-top:5px;
	position: relative;
	z-index: 100;
	min-height:65px;
	box-sizing: border-box;
}

.attention{color:#C00; padding-left:1em; text-indent:-1em; font-size:10px;}

.item-main span{font-size:10px;}


.item-txt {
	text-align: left; line-height: 1.3; padding: 0 0 0 0.5rem; font-weight: bold;
}

.item-back {

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffcc33+0,ffffff+100 */
background: #ffcc33; /* Old browsers */
background: -moz-linear-gradient(top,  #fff 0%, #ffcc33 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fff 0%,#ffcc33 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fff 0%,#ffcc33 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc33', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
 border-radius:2rem;
 padding: 0.5rem;
}
.cap {
	font-size:1rem;
	padding: 0.5rem;
	line-height: 1.2;
}

.oubo {
	display: block;
	padding: 1rem;
	background-color: #f00;
	color: #fff;
	font-size:2rem;
	font-weight: bold;
	margin: 2rem auto;
	border-radius: 1rem;
	text-align: center;
}

.select-img {
	width: 55%;
}

a:hover {
	color: #FF0;
}


/************************************
** CSSでタブ表示
************************************/
/* タブの外枠 */
.tabs {
  margin-top: 12px;
  color: rgb(219, 219, 219);
  width: 100%;
  margin: auto;
  display:flex;
  flex-wrap:wrap;
}

/* タブのスタイル */
.tabs .tab-label {
  display: inline-block;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background-color: #aaa;
  padding: 0.5rem;
  border-bottom: none;
  font-size: 2.4vh; 
  width:calc(100%/2);
  text-align: center;
  box-sizing: border-box;
}
 
/* タブにマウスカーソルがのったときフッター */
.tabs .tab-label:hover {
  opacity: 0.7;
}
 
/* ラジオボタンと内容を非表示 */
.tabs input[name="tab-radio"],
.tabs .tab-content {
  display: none;
}
 
/* タブ内容のスタイル */
.tabs .tab-content{
  border: 1px solid #999;
  padding: 10px;
  min-height: 200px;
  margin-bottom:3%;
}
 
/* 選択されているタブのコンテンツのみを表示 */
.tabs #tab-1:checked ~ .tab-1-content,
.tabs #tab-2:checked ~ .tab-2-content {
  display: block;
}
 
/* 選択されているタブのスタイルを変える */
.tabs input[name="tab-radio"]:checked + .tab-label {
  background-color: #f60;
  color: #fff;
}

.select {
    color:#000;
}

.download{display:flex; padding:0 2.5%;}
.download a{width:calc(100%/2); padding:0 1.5%;}
.download a img{width:100%;}