/* ===========================================
	TBS external_service
=========================================== */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.floatL { float:left;}
.floatR { float:right;}
.alt{ position: absolute; left: -9999px;}
.bold{ font-weight:bold;}
/*font*/
.tCenter { text-align:center !important;}
.tRight { text-align:right !important;}
.tLeft { text-align:left !important;}
/*font-color*/
.cBlu { color:#3590ca;}
.cOrg { color:#d44b15;}
.cGrn { color:#6c9000;}
.cRed, .err { color:#cd201f;}
/*font-size*/
.f140 { font-size:140%;}
.f130 { font-size:130%;}
.f120 { font-size:120%;}
.f110 { font-size:110%;}
.f90 { font-size:90%;}
.f85 { font-size:85%;}
.f75 { font-size:75%;}
/*link*/
a { color:#ff7b00; text-decoration: underline;}
a:hover { color:#ff7b00; text-decoration:none;}

.contact_area{ overflow:hidden;}
/* h1 */
body.extra-boshu div.con-lef h1:before { content: ""; display: block; float: left; width: 49px; height: 49px; background-image: url(../img/extra_h1.png); background-position: left top; background-size: 49px 49px; border-radius: 12px; }
body.extra-boshu div.con-lef h1:after { content: "Volunteer Extra" }

.extra_box{ border:2px solid #b5d7f4; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin-bottom:20px; position:relative;}
.tit { transition: all, 0.10s, linear; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; position:relative; line-height:1.7;}
.tit_in{ border-left:6px solid #0c79d1; display: inline-block; padding-left:10px;}
.plus_text{ font-weight:normal; font-size:90%;}
.extra_box .clearfix p{ line-height: 1.7; margin: 8px 0; font-size: 90%;}

.list_area{ padding-top:15px; border-top:2px solid #b5d7f4; margin-top:12px;}
.list_box{ border-bottom:2px dotted #b5d7f4; margin-bottom:20px; clear:both;}
.list_box li{ margin:0 0 15px;}
.list_box li a{ line-height:150%; display:block; text-decoration:none; color: #000; font-size:100%; padding:20px 50px 20px 20px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: #e0f1ff url(../img/go_icon_smp.png) no-repeat; background-position: right center; transition: all .3s;}
.list_box li a:hover{ background: #0073cf url(../img/go_icon_smp2.png) no-repeat; cursor: pointer; background-position:right center; color:#fff;}

/* extra_page */
.extra_date{ background:#e0f1ff; color:#0073cf; padding:12px 20px; line-height:1.7; margin-top:7px;}
.extra_text{ font-size:90%; line-height:1.7; padding-top:15px; border-top:2px solid #b5d7f4; margin-top:17px;}
.extra_text b{ font-size:100%; color:#0073cf;}

.tit_other { padding: 5px 0px 13px 0px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; position:relative; line-height:1.7; color:#0073cf;}
.tit_other:before { content: url(../img/tit_other_icon.png); position:relative; top:7px; padding-right:5px;}
.tit_other b{ font-size: 100%;}

#test_btn{ width:100px; height:50px; background:#757575; display: none;}
#test_btn a{ display:block; width:100px; height:50px;}

.consent_area{ text-align: center; color: #0073cf; margin: 0 auto; font-weight: bold; font-size: 110%;}

/* btn_color */
.r_btn,.r_btn2{
background:#0073cf;
background: linear-gradient(to bottom, rgba(28,129,212,1) 0%, rgba(28,129,212,1) 50%, rgba(0,114,207,1) 51%, rgba(0,114,207,1) 100%);
box-shadow:0 3px rgba(175,215,248,1);
}
.r_btn a:hover,.r_btn2 a:hover{
background:#2c96ea;
background: linear-gradient(to bottom, rgba(73,163,237,1) 0%, rgba(44,149,234,1) 50%, rgba(28,129,212,1) 51%, rgba(44,149,234,1) 100%);
box-shadow:0 3px rgba(175,215,248,1);
}

.more_btn{
background:#0073cf;
background: linear-gradient(to bottom, rgba(28,129,212,1) 0%, rgba(28,129,212,1) 50%, rgba(0,114,207,1) 51%, rgba(0,114,207,1) 100%);
box-shadow:0 3px rgba(175,215,248,1);
}
.more_btn a:hover{
background:#2c96ea;
background: linear-gradient(to bottom, rgba(73,163,237,1) 0%, rgba(44,149,234,1) 50%, rgba(28,129,212,1) 51%, rgba(44,149,234,1) 100%);
box-shadow:0 3px rgba(175,215,248,1);
}

.oubo_btn{
background:#0073cf;
background: linear-gradient(to bottom, rgba(28,129,212,0.5) 0%, rgba(28,129,212,0.5) 50%, rgba(0,114,207,0.5) 51%, rgba(0,114,207,0.5) 100%);
box-shadow:0 3px rgba(175,215,248,1);
}
.oubo_btn a{
background:#0073cf;
background: linear-gradient(to bottom, rgba(28,129,212,1) 0%, rgba(28,129,212,1) 50%, rgba(0,114,207,1) 51%, rgba(0,114,207,1) 100%);
box-shadow:0 3px rgba(175,215,248,1);
}
.oubo_btn a:hover{
background:#2c96ea;
background: linear-gradient(to bottom, rgba(73,163,237,1) 0%, rgba(44,149,234,1) 50%, rgba(28,129,212,1) 51%, rgba(44,149,234,1) 100%);
box-shadow:0 3px rgba(175,215,248,1);
}

/* デフォルト：980px以上用（PC用）の記述 */
@media all and (min-width: 980px) {
.main_tit_area{ position: relative; }
.r_btn{ width: 152px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color:#fff; font-weight:bold; font-size:100%; position: absolute; right: 0px; top: 0px;}
.r_btn a{ width:152px; display:block; text-align:center; line-height:2.5; color:#fff; text-decoration:none; letter-spacing: 0.5px; font-size:100%;}
.r_btn a:hover{ display:block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

.r_btn2{ width: 152px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color:#fff; font-weight:bold; font-size:100%; float: right; margin: 0 0 22px;}
.r_btn2 a{ width:152px; display:block; text-align:center; line-height:2.5; color:#fff; text-decoration:none; letter-spacing: 0.5px; font-size:100%;}
.r_btn2 a:hover{ display:block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

.extra_box{ padding:17px 20px 22px; width:610px; }
.tit { padding: 5px 100px 5px 0px;}

.site_link{ width:88px; height:21px; background:url(../img/site_link.png) no-repeat; position:absolute; right:5px; top: 50%; display:block; -webkit-transform: translateY(-50%) ; transform: translateY(-50%);}
.site_link a{ display:block; width:88px; height:21px;}
.site_link a:hover{ background:url(../img/site_link.png) no-repeat 0px -21px;}

.more_btn{ width:152px; margin: 0 auto; cursor:pointer; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color:#fff; font-weight:bold; font-size:100%;}
.more_btn a{ width:152px; display:block; text-align:center; line-height:3; color:#fff; text-decoration:none; letter-spacing: 0.5px; font-size:100%;}
.more_btn a:hover{ display:block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

.oubo_btn{ width:365px; margin: 20px auto 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color:#fff; font-weight:bold; font-size:130%;line-height:3.5;letter-spacing: 0.7px;display:block; text-align:center; text-decoration:none;}
.oubo_btn a{ width:365px; display:block; text-align:center; line-height:3.5; color:#fff; text-decoration:none; letter-spacing: 0.7px; border-radius: 10px;}
.oubo_btn a:hover{ display:block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

.bottom_boobo{ width:54px; height:35px; background: url(../img/bottom_boobo.png) no-repeat; position: absolute; bottom: 0px; right: 32px;}

.extra_text{ padding:20px 5px 20px;}
.tit_other{ transition: all, 0.10s, linear;}
}

/* 768px以上用（PC用）の記述 */
@media all and (min-width: 768px)  {
}

/* 768px - 979px用（タブレット用／PC用）の記述 */
@media all and (min-width: 768px) and (max-width: 979px)  {

.main_tit_area{ position: relative; }
.r_btn{ width: 152px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color:#fff; font-weight:bold; font-size:100%; position: absolute; right: 0px; top: 0px;}
.r_btn a{ width:152px; display:block; text-align:center; line-height:2.5; color:#fff; text-decoration:none; letter-spacing: 0.5px; font-size:100%;}
.r_btn a:hover{ display:block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

.r_btn2{ width: 152px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color:#fff; font-weight:bold; font-size:100%; float: right; margin: 0 0 22px;}
.r_btn2 a{ width:152px; display:block; text-align:center; line-height:2.5; color:#fff; text-decoration:none; letter-spacing: 0.5px; font-size:100%;}
.r_btn2 a:hover{ display:block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

.extra_box{ padding:17px 20px 22px; width:610px; }
.tit { padding: 5px 100px 5px 0px;}
.extra_box .clearfix p{ clear: both;}

.site_link{ width:88px; height:21px; background:url(../img/site_link.png) no-repeat; position:absolute; right:5px; top: 50%; display:block; -webkit-transform: translateY(-50%) ; transform: translateY(-50%);}
.site_link a{ display:block; width:88px; height:21px;}
.site_link a:hover{ background:url(../img/site_link.png) no-repeat 0px -21px;}

.more_btn{ width:152px; margin: 0 auto; cursor:pointer; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color:#fff; font-weight:bold; font-size:100%;}
.more_btn a{ width:152px; display:block; text-align:center; line-height:3; color:#fff; text-decoration:none; letter-spacing: 0.5px; font-size:100%; }
.more_btn a:hover{ display:block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

.oubo_btn{ width:365px; margin: 20px auto 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color:#fff; font-weight:bold; font-size:120%;
display:block; text-align:center; line-height:3.5; color:#fff; text-decoration:none; letter-spacing: 0.7px;}
.oubo_btn a{ width:365px; display:block; text-align:center; line-height:3.5; color:#fff; text-decoration:none; letter-spacing: 0.7px; border-radius: 10px;}
.oubo_btn a:hover{ display:block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

.bottom_boobo{ width:54px; height:35px; background: url(../img/bottom_boobo.png) no-repeat; position: absolute; bottom: 0px; right: 32px;}

.extra_text{ padding:20px 5px 20px;}
.tit_other{ transition: all, 0.10s, linear;}
}

/* 767px以下用（スマートフォン用）の記述 */
@media all and (max-width: 767px) {
main{ overflow:hidden;}

.r_btn{ width: 152px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color:#fff; font-weight:bold; font-size:100%; margin: 0 auto 15px;}
.r_btn a{ width:152px; display:block; text-align:center; line-height:2.5; color:#fff; text-decoration:none; letter-spacing: 0.5px; font-size:100%;}
.r_btn a:hover{ display:block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

.r_btn2{ width: 152px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color:#fff; font-weight:bold; font-size:100%; margin: 0 auto 22px;}
.r_btn2 a{ width:152px; display:block; text-align:center; line-height:2.5; color:#fff; text-decoration:none; letter-spacing: 0.5px; font-size:100%;}
.r_btn2 a:hover{ display:block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

.extra_box{ padding:12px 14px 22px;}
.tit_in{  display: block;}
.extra_box .clearfix p{ clear: both;}

.site_link{ background-image:url(../img/smp/site_link.png); background-repeat:no-repeat; background-size:88px 21px; -webkit-background-size:88px 21px; -moz-background-size:88px 21px; float:right; margin:10px 0; display:block;}
.site_link a{ display:block; width:88px; height:21px;}

.more_btn{ width:152px; margin: 0 auto; cursor:pointer; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color:#fff; font-weight:bold; font-size:90%;}
.more_btn a{ width:152px; display:block; text-align:center; line-height:3; color:#fff; text-decoration:none; letter-spacing: 0.5px; font-size:100%;}
.more_btn a:hover{ display:block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

.oubo_btn{ margin: 20px auto 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color:#fff; font-weight:bold;
display:block; text-align:center; line-height:3.5; color:#fff; text-decoration:none; letter-spacing: 0.7px; font-size:100%;}
.oubo_btn a{ display:block; text-align:center; line-height:3.5; color:#fff; text-decoration:none; letter-spacing: 0.7px; border-radius: 10px;}
.oubo_btn a:hover{ display:block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

.extra_text{ padding:20px 5px 0px;}
.tit_other{ transition: all, 0.10s, linear;}
.consent_area{font-size: 100%; margin-top: 20px;}
}

/* text-color */
.gray {color:#808080;}
.black {color:#171717;}
.purple {color:#a757a8;}
.ultramarine {color:#465daa;}
.blue {color:#0067c0;}
.lightblue {color:#afdfe4;}
.deepgreen {color:#060;}
.green {color:#008000;}
.yellowgreen {color:#b9c42f;}
.yellow {color:#ffb74c;}
.orange {color:#ff7b00;}
.pink {color:#f58f98;}
.vermilion {color:#ef454a;}
.red {color:#ed1a3d;}
.carmine {color:#c22047;}
.magenta {color:#ec008c;}
.brown {color:#994c00;}
.reddishbrown {color:#800000;}
.yellowocher {color:#c39143;}
.gold {color:#ffd700;}
.silver {color:#c0c0c0;}