/* CSS Document */

/* ==========================================================================
    main
    ========================================================================== */

.l-main {
    width: 100%;
    height: 100%;
    position: static;
}


.special-bg {
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 10%;
    background: url(../img/bg-img-01.jpg) no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    content: " ";
    z-index: -1; 
}


.header-img{width: 95%; max-width: 1000px; margin: 0 auto 0 auto; padding-top: 5%;}
.campaign-summary{width: 85%; max-width: calc(1000px - 10%); margin: 3% auto 5% auto; font-size:18px; line-height:1.61; padding: 3% 5%; background:rgba(255,255,255,0.50);}

.campaign-sub-title{width: 95%; max-width: 1000px; margin: 0 auto 0.5% auto; font-size:25px; background:#e2cb6a; text-align: center; padding: 0.5% 0; font-weight: 600;}  
.campaign-info{width: 85%; max-width: calc(1000px - 10%); margin: 0.5% auto 5% auto; font-size:18px; line-height:1.61; padding: 3% 5%; background:rgba(255,255,255,0.50);}
.campaign-info2{width: 90%; max-width: calc(1000px - 5%); margin: 0.5% auto 5% auto; font-size:18px; line-height:1.61; padding: 3% 2.5%; background:rgba(255,255,255,0.50);}

@media screen and (max-width: 740px) {
.header-img{padding-top: 15%;}
	}

.dl-list{
	display: -webkit-flex;
	display: flex;
	border-bottom: solid 1px #ccc;
	padding:0.5% 0;
}
.dl-list dt{ width: 100px; font-weight: 800;}
.dl-list dd{ -webkit-flex: 1; flex: 1;}

.campaign-info li{font-size: 16px;}

.campaign-info a{ color: #083d77; text-decoration: underline;}
.campaign-info a:visited { color: #083d77; }
.campaign-info a:hover { color: #083d77;text-decoration: none; }
.campaign-info a:active { color: #083d77; }

.campaign-kiyaku-list li{text-indent: -15px;  margin-left:15px;}

.section-cap{
    text-align: left;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 2.1;
    margin: 20px auto;
    text-shadow: 2px 2px 5px #fff;
    color: #000;
    text-align: center;
}

@media screen and (max-width: 740px) {
.dl-list{display:block; padding: 3% 0;}
	}
	
	
.top-btn{width: 95%; max-width: 360px; margin: 0 auto 0.5% auto;}
.logo-box{width: 50%; max-width: 170px; margin: 0 auto 0.5% auto;}
	
h2.ktsection-title {
    width: 100%;
    background: url(../img/bg-title-h2.jpg);
    background-size: cover;
    color: #FFF;
    font-size: 3.2rem;
    padding: 40px 30px;
    box-sizing: border-box;
    line-height: 1.4;
    font-weight: bold;
    text-shadow: 2px 2px 14px #482200;
    margin: 80px auto 20px auto;
    text-align: center;
}
.campaign-h-title{font-size: 25px; border-bottom: solid 2px #a00000; margin: 3% 0 2% 0; padding-bottom: 1%; color: #a00000;}

.tw-list_type2{display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}
.tw-list_type2 li{width: 49%; padding:0.5%;}

.spec-table{
	width: 100%; max-width: 700px;
	border-collapse:  collapse;
}

.spec-table td, .spec-table th{border: solid 1px #000; padding: 1% 3%; vertical-align: top;}

	
@media screen and (max-width: 740px) {
.tw-list_type2 li{width: 99%; padding:0.5%;}
	}
	
	
	
	
	

/* accordion */
.accordion {}
.toggle {display: none;}
.option {position: relative;}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title h3 {
padding: 1em;
display: block;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 3.25em;
top: 3em;
width: 3px;
height: 2.75em;
background: #a00000;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;
}
.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 0.9em;
line-height: 1.5;
}
.toggle:checked + .title + .content {
max-height: 9000px;
transition: all 1.5s;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}

.accordion img{padding: 3% 0;}


.steam-data dd, .steam-data dt{ padding: 2%;}




.steam-data {
	display: -webkit-flex;
	display: flex;
	border: solid 1px #000;
	margin-bottom:-1px;
}
.steam-data dd{
	-webkit-flex: 1;
	flex: 1;
	
}
.steam-data dt {
	width: 200px;
	background: #a00000;
	color: #fff;
}


@media screen and (max-width: 740px) {
.accordion h3.section-title{text-align: left; padding-left:15px; font-size: 4vw;}
h2.steam{font-size: 2.8rem;}

.title::after,
.title::before {
content: "";
position: absolute;
right: 2.25em;
top: 2em;
width: 2px;
height: 1.75em;
background: #a00000;
transition: all 0.3s;
}


.steam-data {
	display:block;
	border: solid 1px #000;
	margin-bottom:-1px;
}
.steam-data dd{
	width: 100%;
	
}
.steam-data dt {
	width: 96%;
	background: #a00000;
	color: #fff;
}


	}