@charset "UTF-8";
/* CSS Document */

/*ベースの要素の設定をリセット*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,blockquote,th,td {
margin:0;
padding:0;
}

/*画像の枠線をクリアして位置の初期値の設定*/
img{
border:0;
vertical-align: bottom;
}

/*リンク時の枠の点線をなしにする*/
a{
outline: none;
}

/*リスト要素の初期値をリセット*/
ul,ol{
list-style: none;
}

/*フロート解除用のハック*/
/*clearfixの設定*/
.clearfix:after{  
display: block;/*block要素にする*/
content: " ";  
clear: both;  
}  



/*==========================================
共通
============================================*/


body{
font-size:0.775em;
font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
line-height:1.4em;
color:rgba(0,2,15,1.00);
letter-spacing: 0.075em;
}

body{
background:rgba(207,214,211,1.00);
}


/*リンクの装飾の設定*/
a:link,
a:visited,
a:active{
color:rgba(62,51,45,1.00);
text-decoration:underline;
}

a:hover{
color:rgba(62,51,45,1.00);
text-decoration:none;
}
h2.ttl{
border-bottom:solid 1px rgba(62,51,45,0.8);
}

.small{
font-size: 80%;
text-decoration: underline;
background:rgba(232,226,198,1.00);
}
.mark{
font-size: 110%;
text-decoration: underline;
background: rgba(125,234,245,1.00);
}


/***** クリック前のボタン *****/

.btn1{
border:none;
border-left:3px solid rgba(207,214,211,1.00);
background: rgba(255,250,250,1.00);
box-sizing: border-box;
margin: 1% 0;
}

.box a {
font-weight: lighter;
line-height: 28px;
padding: 2% 5%;
text-align: left;
display: block;
text-decoration: none;
color:rgba(62,51,45,1.00);
}

.box{
height: auto;
border: none;
}

.btn1 a:hover {
color:rgba(62,51,45,0.8);
text-decoration: underline;
}

p span.role{
text-decoration: underline;
line-height: 40px;
padding: 2% 0;
}

.sentence p{
font-size:1.2em;
line-height: 30px;
}
.sentence h3{
font-size:1.2em;
line-height: 20px;
}

span.copy img{
width: 80%;
height: auto;
margin: 1% 10% 1% 10%;
max-width: 540px;
}

.s_right{
width: 35%;
height: auto;
max-width: 500px;
max-height: 500px;
padding: 2% 10% 2% 5% ;
float: left;
}

p.lead{
text-align: center;
}

.mv2{
position:relative;
width: 75%;
margin:2% 0 2% 25% ;
height: auto;
text-align: center;
}


.barL{
position:relative;
width: 75%;
margin:2% 25% 2% 0% ;
height: auto;
text-align: center;
}
.barR{
position:relative;
width: 75%;
margin:2% 0% 2% 25% ;
height: auto;
text-align: center;
}

.sentence{
width: 80%;
margin: 0 10% 0px;
border-bottom: none;
}

#container{
width:95%;
height: auto;
float:left;
margin: 0 2.5% 0;
line-height: 40px;
background: rgba(255,255,255,1.00);
}

span.marker{
font-size: 120%;
background:rgba(232,226,198,1.00);
}

.intro{
width: 100%;
margin: 20px 0% 60px 0%;
border-bottom: 1px dashed rgba(132,122,57,1.00);
overflow-y: scroll;
}

.intro img{
width: 30%;
height: auto;
max-width: 300px;
max-height: 300px;
padding: 0 5% ;
float: left;
}

.scontainer{
width: 100%;
flex-shrink: 0;
margin: 0 0 1%;
padding-bottom: 1%;
}

.scontainer ul{
width: 80%;
float: left;
margin: 0% 10% 0 10%;
max-height:auto;
overflow-y:scroll;
overflow-x: scroll;
text-align:left; 
padding: 0 0%;
}

.scontainer li{
padding: 0% 0 1%;
font-size: 0.95em;
}

.scontainer li img{
float: left;
position:relative;
width: 100%;
height: auto;
}

.scontainer p{
font-size: 0.9em;
line-height: 20px;
}

@media screen and (max-width: 1440px) {

	
}


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

}


@media screen and (max-width: 768px) {
}

@media screen and (max-width: 480px) {
.intro img{
width: 60%;
height: auto;
padding:0px 20% 0 ;
}

}