@charset "utf-8";
#under, h1 ,h2{font-size:16px;}
body{color: #252559;}
.pc_block{display: block;}
@media screen and (max-width: 1240px){
#under, h1 ,h2{font-size:16px;}
}
h1{margin: 0; padding:0;}
h2{display:none; margin: 0; padding:0;}
#under h2{
display: block;
margin-bottom: 4%;}
.col-sm-12{padding: 0;}
#under, body{font-family: 'Raleway',Arial,Verdana, Calibri, "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "sans-serif";}
#under dl{margin-bottom:0;}
.ns_container{max-width: 100%;}
.ns_container{margin-top: 0;}
.nav.nav-tabs{max-width: 980px; width: 100%; margin: 0 auto;}
.breadcrumb{margin-bottom: 0;}
#under a:hover{text-decoration: none;}

.ns_headerBottom {background: #2cc3eb;}
.breadcrumb a{color: #fff;}
.breadcrumb>.active{color: #fff;}


/*------- 共通 ---------*/
.under_wrap{
max-width: 1240px;
margin:0 auto;
width: 80%;
}
.under_wrap-inner{padding: 0 10%;}
.standBox{text-align: center;}
.ttl{font-size:1.8em; margin-bottom: 30px;}
.registerBox a:hover{opacity: 0.7;}
.cap{font-size: 0.8em;}
p{line-height: 1.8;}
.en p{line-height: 1.4;}
.color_red{color: #FF0000;}
.mvArea{
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}
.mvArea iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*------- ナビゲーション ---------*/
.navBox{
padding: 0 6%;
background-color:#2CC3EB;
}
.navBox_inner{
max-width: 980px;
width:auto;
margin:0 auto;
padding:5px 0;
white-space: nowrap;
}
.nav_menu {
font-family: 'Raleway', Arial, sans-serif;
text-align: center;
/*text-transform: uppercase;*/
font-weight: 500;
}
.nav_menu *{
box-sizing: border-box;
-webkit-transition: all 0.35s ease; 
transition: all 0.35s ease;
}
.nav_menu{
flex-basis: 100%;
display: -webkit-flex;
display: flex;
flex-wrap:wrap;
}
.nav_menu-full{
flex-basis: 100%;
}

.nav_menu li{
flex-basis: 32%;
margin-right: 1%;
list-style:none;
overflow: hidden;
/*background-color: #FFF;*/
}
.nav_menu li:last-child{margin-right: 0;}

.nav_menu.nav_2col li{
flex-basis: 50%;
background-color: #FFF;
}
.nav_menu li a, .nav_menu li.current{
display: block;
background-color:#2CC3EB;
}
.nav_menu li a:hover{
/*opacity: 0.75;*/
background-color: #61D2F0;
}

.nav_menu li.current{
background-color: #61D2F0;
}
.nav_menu li#nav03, .nav_menu li#nav03 a{
color:#fb5450;
}
.navBox .registerBox a{
display: block;
text-align: center;
color:#ed318b;
font-weight: bold;
}

.navBox .registerBox a:hover{
opacity: 1;
background-color: #f5d920;
/*color:#252559;*/
}
.nav_menu a, .nav_menu li.current{
padding:0.7em 0 0.5em 0;
color: #fff;
position: relative;
display: inline-block;
letter-spacing: 1px;
margin: 0;
text-decoration: none;
font-weight: bold;
width: 100%;
}


.navBox.is-fixed{
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
background-color:#2CC3EB;
}
.navBox.is-fixed .navBox_inner{padding: 10px 3%;}

/*------- メインビジュアル ---------*/
#topArea{
background-image:url("/sites/default/files/contents/campaigns/singalong/2022/images/main22-pc.jpg") ;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 30.89vw;
}

/*------- About Oxford Big Read ---------*/
.aboutArea .under_wrap{margin: 6% auto 0 auto;}
#aboutArea3 .under_wrap-inner{
margin-top: 20px;
padding: 0 30%;
}
#aboutArea3 .under_wrap-inner dl{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
#aboutArea3 .under_wrap-inner dt{
flex-basis: 40%;
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
#aboutArea3 .under_wrap-inner dd{
flex-basis: 60%;
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
#aboutArea5{/*background-color: antiquewhite;*/}
#aboutArea5 h2{margin-bottom: 2%;}
#aboutArea5.aboutArea .under_wrap{
padding: 0 15%;
margin: 6% auto;
}
#aboutArea5 iframe{
border: 15px solid #ffce3b;
}
/*------- How to enter ---------*/
#howtoenter h2 {
background-color: #ffce3d;
color: #fff;
padding: 15px 0;
text-align: center;
margin: 4% 1%;
}
#howtoenter.areaPartition{
padding: 4vw 0;
margin-top: 5vw;
}
#howtoenter .ttl_sec{
font-size: 1.75vw;
line-height: 1.4;
margin-bottom: 20px;
white-space: nowrap;
display: table;
width: 100%;
height: 11vw;
}
.en #howtoenter .ttl_sec{height: 6vw;}

#howtoenter .ttl_sec span{display:block;}
#howtoenter .howtoArea{
display: -webkit-flex;
display: flex;
justify-content:space-around;
}
#howtoenter .howtoArea .howtoBox{
flex-basis:32%;
border-right: 1px solid #dbe3ea;
position: relative;
}
#howtoenter .howtoArea .howtoBox:last-child{border-right: none;}
#howtoenter .howtoArea .howtoBox .howtoBox_inner{padding: 0 17% 15% 17%;}

#howtoenter .howtoArea .howtoBox .howtoBox_inner .txtBox{
margin: 20px 0;
text-align: left;
}
#howtoenter .howtoArea .howtoBox .howtoBox_inner .registerBox{
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#howtoenter .howtoArea .howtoBox .howtoBox_inner .registerBox a{
display: inline-block;
text-align: center;
background-color:#2cc3eb;
border-radius: 40px;
color: #fff;
font-weight: bold;
padding: 4% 15%;
}
.en #howtoenter .howtoArea .howtoBox .howtoBox_inner .registerBox.box01 a{
padding:3%;
line-height: 1.4;
}

#howtoenter .ttl_sec .numberbox{
font-size: 4vw;
margin-bottom: 8px;
}
#howtoenter .howtoBox.box01 .ttl_sec .numberbox{color:#1daf7e;}
#howtoenter .howtoBox.box02 .ttl_sec .numberbox{color:#2cc3eb;}
#howtoenter .howtoBox.box03 .ttl_sec .numberbox{color:#ee3289}

#howtoenter .howtoArea .howtoBox .howtoBox_inner .registerBox.box01 a{background-color:#1daf7e;}
#howtoenter .howtoArea .howtoBox .howtoBox_inner .registerBox.box02 a{background-color:#2cc3eb;}
#howtoenter .howtoArea .howtoBox .howtoBox_inner .registerBox.box03 a{background-color:#ee3289;}

/*----------- 参加者のコメント ----------------*/
#voice{background-color: #b8e1e6;}
.aboutArea#voice .under_wrap {padding: 6% 0; margin: 0 auto;}
#voice .voiceArea{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 5vw;
}
#voice .voiceArea .voiceArea_work{
flex-basis: 30%;
max-height: 250px;
}
#voice .voiceArea .voiceArea_work.longbox{
max-height: 350px;
}

#voice .voiceArea .voiceArea_work {
width: 100%;
height: 100%;
}
#voice .voiceArea .voiceArea_work.longbox img{
width: 80%;
height: 80%;
}
#voice .voiceArea .voiceArea_detail{
min-width: 100px;
max-width: 20%;
margin-right: 1%;
flex-basis: 20%;
}
#voice .voiceArea .voiceArea_detail .voiceArea_img img{
width: 100px;
height: 100%;
background-color: #ffffff6b;
border-radius: 10px;
}
#voice .voiceArea .voiceArea_txt{
position: relative;
display: inline-block;
margin: 0 0 1.5em 15px;
min-width: 120px;
max-width: 50%;
flex-basis: 50%;
z-index: 1;
text-align: left;
}

#voice .voiceArea .voiceArea_txt:before{
content: "";
position: absolute;
top: 15%;
left: -30px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 15px solid #fff;
}
#voice .voiceArea .voiceArea_txt .txtBox{
color: #555;
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.1);
box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.1);
padding: 10px 20px;
word-wrap : break-word;
overflow-wrap : break-word;
}

#voice .voiceArea .voiceArea_txt p{margin: 0;padding: 0;}
#voice .voiceArea .voiceArea_txt p.voiceArea_txtname{
text-align: right;
margin-top: 10px;
font-weight: bold;
}
#voice .voiceArea .voiceArea_txt p.voiceArea_txtname .nameBox{margin-right: 5px;}


/*------- 作品紹介（トップページ） ---------*/
#introducing.areaPartition{margin-top: 5vw;}
#introducing .ttl{text-align: center;}
#introducing .artworksAea .artworksAea_wrap{
margin:5vw auto 0 auto;
overflow: hidden;
position: relative;
}
#introducing .workbox-sizer, .workbox{width:32%;}
#introducing .gutter-sizer{width: 2%;}
#introducing .artworksAea .artworksAea_wrap .workbox{
font-size: 14px;
margin-bottom: 15px;
}
#introducing .artworksAea .artworksAea_wrap .workbox img {
max-width: 100%;
height: auto;
}
#introducing .workbox_detail{
color:#fff;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;/* マスクを表示しない */
background-color:rgba(0,0,0,0.7);
-webkit-transition:all 0.6s ease;
transition:all 0.6s ease;
}
#introducing .workbox:hover .workbox_detail{
opacity:1;/* マスクを表示する */
padding-top:20px;/*ホバーで下にずらす*/
}
#introducing .workbox.longbox:hover .workbox_detail{padding-top:100px;/*ホバーで下にずらす*/}
#introducing .workbox_caption{
font-size:14px;
width:80%;
margin: 0 auto;
}

#introducing .workbox_caption div{
line-height: 1.2;
padding-bottom: 7px;
}
.ja #introducing .workbox_caption div{font-size: 14px;}

#introducing .workbox_caption dd:after{
content: "";
display: table;
clear: both;
}
#introducing .workbox_head_prize{white-space: nowrap;}
#introducing .workbox_head{
text-align: center;
line-height: 1.4;
}
#introducing .workbox_head .workbox_head_ttl{
font-size: 20px;
display: inline-block;
font-weight: bold;
height: 1.5em;
line-height: 1.7em;
padding-left: 1.5em;
margin-right: 1.5em;
white-space: nowrap;
margin-bottom: 5px;
}
#introducing .workbox_head .workbox_head_ttl.icon_winner{
background: url(/sites/default/files/contents/campaigns/singalong/images/medal-winner.png) no-repeat left top;
background-size: 24px;
}
#introducing .workbox_head .workbox_head_ttl.icon_runnerup{
background: url(/sites/default/files/contents/campaigns/singalong/images/medal-runnerup.png) no-repeat left top;
background-size: 24px;
}
#introducing .workbox_head .workbox_head_sec{font-size: 16px;}
#introducing .workbox_head .sec_sub{padding-left:10px; display: inline-block;}
#introducing .workbox_head .workbox_head_bkttl{margin: 10px 3%;}
#introducing .workbox_head .workbox_head_bkttl h1{
font-size:20px;
padding: 3px 0;
border-bottom: 1px solid #fff;
}
.ja #introducing .workbox_head .workbox_head_bkttl h1{font-size: 16px;}
#introducing .workbox_detail .btn_large{text-align: center;}
#introducing .workbox_detail .btn_large a{
display: inline-block;
/*border: 1px solid #fff;*/
border-radius: 5px;
background-color:rgba(253,253,253,0.26);
padding: 3px 20px;
color: #fff;
font-size: 12px;
}
#introducing .workbox_detail .btn_large a:hover{opacity: 0.7;}
#introducing .boxAdjust{padding-bottom: 30px;}

/*------- Aboutページ ---------*/


/*------- Categoriesページ ---------*/
#cateBox .under_wrap{
background-color: #e6e6e6;
padding: 50px;
margin: 50px auto;
}
#cateBox .under_wrap_inner{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
}
#cateBox .under_wrap_inner .cateBox_area {
flex-basis: 48%;
background-color: #fff;
padding: 2vw 4vw;
border: 3px solid #f2f2f2;
}
#cateBox .under_wrap_inner .cateBox_area .ttlBox{
border-bottom: 2px solid #fff;
text-align: center;
padding-bottom: 20px;
margin-bottom: 10px;
}
#cateBox .under_wrap_inner .cateBox_area .ttlBox h1{font-size: 1.5em;}
#cateBox .under_wrap_inner dl{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
#cateBox .under_wrap_inner dt{
flex-basis: 30%;
border-bottom: 1px solid #ccc;
padding: 1vw 0;
margin-bottom: 1vw;
text-align: center;
}
#cateBox .under_wrap_inner dd{
flex-basis: 70%;
border-bottom: 1px solid #ccc;
padding: 1vw 0;
margin-bottom: 1vw;
}
#cateBox .txtBox{
background-color: #fff;
text-align: center;
padding: 2vw 4vw;
margin-top: 20px;
}
/*------- Prizesページ ---------*/
#prizesBox{margin-top:30px;}
#prizesBox .under_wrap_inner{
width: 80%;
margin: 0 auto;
}
#prizesBox .under_wrap_inner .prizesBox_area{
border: 4px solid #123a65;
padding: 2vw;
margin-bottom: 20px;
}
#prizesBox .under_wrap_inner .prizesBox_area .medalBox{
width: 22%;
margin: 0 auto 20px auto;
}
#prizesBox .under_wrap_inner .prizesBox_area .ttlBox{
border-bottom: 2px #123a65 dotted;
text-align: center;
padding-bottom: 2vw;
}
#prizesBox .under_wrap_inner .prizesBox_area .ttlBox h1{font-size: 1.8em;}
#prizesBox .under_wrap_inner .prizesBox_area .prizesDetail{
text-align: center;
margin:2vw 0;
}
#prizesBox .under_wrap_inner .prizesBox_area .prizesDetail .prizrsList span{
display: inline-block;
padding-left: 5px;
font-size: 0.8em;
}
#prizesBox .under_wrap_inner .prizesBox_area .prizesDetail dt{
font-size: 1.5em;
display: inline-block;
border-bottom: solid 3px #123a65;
padding: 0 15px 5px;
margin-bottom: 15px;
}

#prizesBox .under_wrap_inner .prizesBox_area .prizesDetail dd{margin-bottom: 20px;}
.ja #prizesBox .under_wrap_inner .prizesBox_area .prizesDetail dt{font-size: 1.4em;}
.ja #prizesBox .under_wrap_inner .prizesBox_area .prizesDetail dd{margin-bottom: 40px;}
#prizesBox .prizrsList li{margin-bottom: 15px;}
#prizesBox .phBox{width:60%; margin: 0 auto 10px auto;}

/*------- Winnersページ ---------*/
#winnersArea{}
.winnersArea .under_wrap{margin: 6% auto 0 auto;}
.winnersArea .caption{font-size: 0.8em;}
.winnersArea .ttlArea{
background-color:#ffce3b;
text-align: center;
vertical-align: middle;
}
.winnersArea.box{margin-top: 60px;}
.winnersArea .ttlBox{
vertical-align: middle;
padding: 10px 0;
		}
.winnersArea .ttlBox::before{
content:"";
display: inline-block;
width: 70px;
height: 70px;
background:url(/sites/default/files/contents/campaigns/singalong/2022/images/wincup.png) no-repeat;
background-size: contain;
margin-left: -70px;
vertical-align: bottom;
}
.winnersArea .ttl{
line-height: 1.4;
margin-bottom: 0;
font-size: 26px;
font-weight: bold;
padding-top: 6px;
padding-right:70px;
}
.winnersArea .category_ttl{
font-size: 1.2em;
}
.winnersArea .category_ttlBox{
display: inline-block;
}
.winnersArea.box .under_wrap{
padding: 3% 0;
margin: 0 auto;
}
#under .winnersArea .winners_detail .detailBox{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
}
#under .winnersArea .winners_detail .detailBox .cate{
    flex-basis: 130px;
    font-weight: normal;
    background-color: #011e40;
    color: #fff;
    padding: 5px 10px;
    margin-bottom: 10px;
}
#under .winnersArea .winners_detail .detailBox .cate_detail{
    flex-basis: calc(100% - 130px);
    text-align: left;
    padding-left: 10px;
    padding-top: 5px;
}


.ribbon {
  display: inline-block;
  position: relative;
  height: 45px;
  text-align: center;
  box-sizing: border-box;
	margin-bottom: 60px;	
}

.ribbon::before {
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  left: -45px;
  z-index: -2;
	border-bottom: 20px solid #ff6662;
	border-top: 20px solid #ff6662;
	border-right: 40px solid #ff6662;
	border-left: 20px solid transparent;
}

.ribbon::after {
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  right: -45px;
  z-index: -2;
	border-bottom: 20px solid #ff6662;
	border-top: 20px solid #ff6662;
	border-left: 40px solid #ff6662;	
	border-right: 20px solid transparent;
}

.ribbon .ttl {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0 20px;
  line-height: 45px;
  font-size: 22px;
  color: #FFF;
  background: #fb5450;
}
#winnersArea .ribbon .block_sp{
padding-left: 1em;
}

.ribbon .ttl::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #b65a59;
}

.ribbon .ttl::after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #b65a59;
}





/* 767px以下用：タブレット／*/
@media screen and (max-width: 768px)and (orientation: portrait){
.under_wrap {max-width:100%; width: 96%;}
#voice .under_wrap-inner{padding: 0;}

#introducing .workbox:hover .workbox_detail{padding-top: 16px;}
#introducing .workbox_head .workbox_head_ttl{font-size: 13px;}
#introducing .workbox_head .workbox_head_sec{font-size: 12px;}
#introducing .workbox_head .workbox_head_bkttl{margin: 0 10px;}
#introducing .workbox_head .workbox_head_bkttl h1{font-size: 13px;}
#introducing .workbox_caption {width: 90%; text-align: center; margin-top: 5px;}
#introducing .workbox_caption div{margin-bottom: 0; line-height: 1.4;}
#introducing .workbox_detail .btn_large{margin-top:10px; font-size: 12px;}
#prizesBox .under_wrap_inner{
width: 90%;
margin: 0 auto;
}

}


/* 480px以下用：landscape用の記述 */
@media screen and (max-width: 480px) {
#under, h1 ,h2{font-size:16px;}
#under h2{display: block;margin-bottom: 8%;}
#howtoenter h2{margin: 4%;}
.under_wrap {width: 100%;}
.sp_block{display: block;}
#topArea{
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 30.89vw;
background-color: #B8E1E6;
}
.navBox{padding: 0 10px;}

.en .navBox_inner{flex-wrap: wrap;}

.navBox_inner{
display: block;
padding-top: 0;
white-space: normal;
position: relative;
padding: 5px 0 0 0;
}
.nav_menu{
display:block;
margin-right: 0;
text-align: left;
}
.en .nav_menu{flex-basis: 100%;}
.navBox_inner{line-height: 1.2;}
.en .navBox_inner{padding: 5px 0 0 0;}

.nav_menu li{
display: inline-block;
text-align: center;
width: 49%;
font-size: 0.8em;
}
.nav_menu.nav_2col li{width: 49%;}

.nav_menu li#nav01,
.nav_menu li#nav02{
width:48%;
}
.nav_menu li#nav03{width: 100%;}
.navBox .registerBox a{letter-spacing: 0.2px;}

.nav_menu a{display: block;}
.nav_menu a:after{padding: 0.8em 0;}
.nav_menu.nav_menu-half a:before{
width: 100%;
left:auto;
}
.ttl{
font-size:6.5vw;
margin-bottom: 15px;
}
.ja .ttl{
font-size: 6vw;
margin-bottom: 25px;
}
.standBox{padding: 0 5.335%;}
.standBox .txt{text-align: left;}

#aboutArea4 .standBox .txt{text-align: center;}
#aboutArea5.aboutArea .under_wrap{
padding: 0 10px;
margin: 0;
}
#aboutArea5 iframe {border: 5px solid #ffce3b;}
#aboutArea .ttl span.sp_block{margin-top: 10px;}
.under_wrap-inner, #aboutArea3 .under_wrap-inner{padding: 0;}
.aboutArea#voice .under_wrap{padding: 10vw 20px;}

#voice .voiceArea{
display: block;
align-items:  flex-start;
margin-bottom: 20px;
}
#voice .voiceArea img{

}
#voice .voiceArea .voiceArea_work{
width: 100%;
margin-bottom: 20px;
height: 100%;
max-height: none;
}
#voice .voiceArea .voiceArea_work.longbox{
max-height: 100%;
height: 100%;
padding: 0;
}
#voice .voiceArea .voiceArea_detail{
margin-bottom: 20px;
}
#voice .voiceArea .voiceArea_txt{
max-width: 100%;
margin-left: 0;
font-size:inherit;
margin-bottom: 20px;
}
#voice .voiceArea .voiceArea_txt:before{
top: -15px;
left: 14%;
margin-left: -15px;
border-right: none;
border: 15px solid transparent;
border-bottom: 15px solid #fff;
margin-top: -15px;
}

#voice .voiceArea .voiceArea_txt p.voiceArea_txtname .nameBox{margin-right: 0;}
#voice .voiceArea .voiceArea_txt p.voiceArea_txtname .titleBox{font-size: 1em;}
#voice .voiceArea .voiceArea_txt p.voiceArea_txtname{text-align: left; line-height: 1.2;}


#introducing .workbox_caption div{
font-size: 1em;
line-height: 1.8;
}
#introducing .workbox_caption div{padding-bottom: 0;}
.aboutArea .under_wrap {margin: 10% auto 0 auto;}
.ja .aboutArea .under_wrap{margin-bottom: 10%;}

#howtoenter .howtoArea{display: block;}
#howtoenter .howtoArea .howtoBox .howtoBox_inner{padding: 0 20px 0;}
#howtoenter.areaPartition{
margin-top:10vw;
padding: 10vw 0;
}
#howtoenter .ttl_sec{font-size: 5.5vw;}
.ja #howtoenter .ttl_sec{
font-size: 5vw;
line-height: 1.4;
}

#howtoenter .ttl_sec .numberbox{
font-size: 10vw;
}

#howtoenter .howtoArea .howtoBox{
position: static;
border-right:none;
border-bottom:1px solid #fff;
margin-bottom: 40px;
}
#howtoenter .howtoArea .howtoBox:last-child{border-bottom:none;}
#howtoenter .howtoArea .howtoBox .howtoBox_inner{padding:0 0 40px 0;}
#howtoenter .howtoArea .howtoBox .howtoBox_inner .registerBox{
position: static;
margin-top: 20px;
}
.en #howtoenter .howtoArea .howtoBox .howtoBox_inner .registerBox.box01 a{
padding:3% 5%;
line-height: 1.2;
}

#introducing .ttl{padding: 0 20px;}
.ja #introducing .ttl{line-height: 1.6;}
#introducing.areaPartition{margin-top:10vw;}
#introducing .workbox-sizer, .workbox{width:100%; }
#introducing .artworksAea .artworksAea_wrap .workbox{margin-bottom: 10px; font-size: 14px;}

#introducing .workbox_head .workbox_head_ttl.icon_runnerup, #introducing .workbox_head .workbox_head_ttl.icon_winner{
background-size: 20px;
line-height: 1.6;
font-size: 18px;
}


.ja #introducing .workbox.longbox:hover .workbox_detail{padding-top: 90px;}
#introducing .workbox_head .workbox_head_ttl{
margin-right: 0;
margin-bottom: 10px;
font-size: 15px;
}
#introducing .workbox_caption{
width:100%;
padding: 0 5px;
font-size: 1em;
}

#introducing .workbox_head .workbox_head_bkttl{margin:0 5px 5px 5px;}
#introducing .workbox_head .workbox_head_bkttl h1{font-size: 16px;}
#introducing .workbox_detail .btn_large{margin-top: 10px;}


#introducing .boxAdjust{padding-bottom:0;}

#cateBox .under_wrap{
padding:8vw 4vw;
}
#cateBox .under_wrap_inner{
display: block;
}
#cateBox .under_wrap_inner .cateBox_area{padding: 5vw 4vw;}
#cateBox .under_wrap_inner .cateBox_area .ttlBox{padding-bottom: 0;}
#cateBox .under_wrap_inner dt, #cateBox .under_wrap_inner dd{
padding:2vw 0;
margin-bottom: 2vw;
}

#cateBox .under_wrap_inner .cateBox_area .ttlBox h1{font-size: 18px;}
#cateBox .under_wrap_inner .cateBox_area{margin-bottom: 20px;}

#cateBox .txtBox{
padding: 5vw 4vw;
}

#prizesBox .under_wrap_inner .prizesBox_area{padding: 6vw 2vw;}
#prizesBox .under_wrap_inner .prizesBox_area .prizesDetail{margin-top: 4vw;}
#prizesBox .under_wrap_inner{
display: block;
padding:0 20px;
margin-top: 30px;
width: 100%;
}
#prizesBox .under_wrap_inner .prizesBox_area .ttlBox h1{font-size: 1.5em;}
#prizesBox .under_wrap_inner .prizesBox_area .medalBox{width:50%}
#prizesBox .phBox{width:80%; margin: 0 auto;}

.winnersArea.box#winnersArea_g01{margin-top: 20px;}
.winnersArea .category_ttlBox{vertical-align: text-bottom;}
.winnersArea .category_ttlBox .category_ttl{font-size: 4.2vw;}
.winnersArea .category_ttlBox .ttl{
font-size: 5.3vw;	
margin-bottom: 0;
padding-top: 0;
}
.winnersArea.box .under_wrap{
padding: 0 5.335%;
margin: 30px auto 0 auto;
}

.winnersArea .ttlBox::before{
    content: "";
    display: inline-block;
    width: 18.67vw;
    height: 18.67vw;
    background: url(/sites/default/files/contents/campaigns/singalong/2022/images/wincup.png) no-repeat center center;
    background-size: 70%;
    margin-left: 0;
    vertical-align: bottom;
}
#under .winnersArea .winners_detail .detailBox{
display: block;
text-align: left;
font-size: 16px;
}
#under .winnersArea .winners_detail .detailBox .cate{
width:100% ;
padding-bottom: 5px;
    margin-bottom: 5px;
    padding: 5px 10px;
}
#under .winnersArea .winners_detail .detailBox .cate_detail{
    width: 100%;
    margin-bottom: 15px;
    padding: 0;
}
#winnersArea .ribbon .block_sp{display: block;}
#winnersArea .ribbon{width:90%;}
#winnersArea .ribbon .ttl{
    line-height: 1.4;
    font-size: 18px;
    margin: 0 auto;
    padding: 10px 0;
}
#winnersArea .ribbon::before {
    content: '';
    position: absolute;
    width: 0;
    bottom: -38px;
    left: -6vw;
    z-index: -2;
    border-bottom: 30px solid #ff6662;
    border-top: 30px solid #ff6662;
    border-right: 9.2vw solid #ff6662;
    border-left: 10px solid transparent;
}
#winnersArea .ribbon::after{
    content: '';
    position: absolute;
    width: 10px;
    bottom: -38px;
    right: -6vw;
    z-index: -2;
    border-bottom: 30px solid #ff6662;
    border-top: 30px solid #ff6662;
    border-left: 9.2vw solid #ff6662;
    border-right: 10px solid transparent;
}
#winnersArea .ribbon .ttl::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 13px transparent;
    border-right: solid 6vw #b65a59;
}

#winnersArea .ribbon .ttl::after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 13px transparent;
    border-left: solid 6vw #b65a59;
}
.en #winnersArea .ribbon::before,
.en #winnersArea .ribbon::after{
    bottom: -15px;
    border-bottom: 15px solid #ff6662;
    border-top: 15px solid #ff6662;
}
.en #winnersArea .ribbon{
margin-bottom: 30px;
}
		
/*
#winnersArea .ribbon::before {
    content: '';
    position: absolute;
    width: 10px;
    bottom: -55px;
    left: -14px;
    z-index: -2;
    border-bottom: 40px solid #ff6662;
    border-top: 40px solid #ff6662;
    border-right: 20px solid #ff6662;
    border-left: 8px solid transparent;
}
#winnersArea .ribbon::after {
    content: '';
    position: absolute;
    width: 10px;
    bottom: -55px;
    right: -14px;
    z-index: -2;
    border-bottom: 40px solid #ff6662;
    border-top: 40px solid #ff6662;
    border-left: 20px solid #ff6662;
    border-right: 8px solid transparent;
}
*/
}


/* 320px以下用：landscape用の記述 */
@media screen and (max-width: 320px) {
#introducing .workbox_head .workbox_head_ttl{margin-bottom: 4px;}
#introducing .workbox_head .workbox_head_ttl.icon_runnerup, #introducing .workbox_head .workbox_head_ttl.icon_winner {
    background-size: 18px;
    line-height: 1.6;
    font-size: 16px;
}
#introducing .workbox:hover .workbox_detail {padding-top: 7px;}
#introducing .workbox_head .workbox_head_sec {font-size: 10px;}
#introducing .workbox_caption div{font-size: 13px;}
.en #introducing #box03 .workbox_caption div,
.en #introducing #box05 .workbox_caption div,
.en #introducing #box07 .workbox_caption div
{line-height: 1.4;}
#introducing .workbox_detail .btn_large a{font-size: 10px;}
#introducing .workbox_head .workbox_head_sec{font-size: 10px;}
}