@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;  
}  



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


.flow{
margin: 0 10%;
text-align: left;
}

.flow h2.ttl{
font-size: 1.3em;
}
.intro{
width: 100%;
margin: 20px 0% 60px 0%;
border-bottom: 1px dashed rgba(132,122,57,1.00);
overflow-y: scroll;
background:rgba(242,248,237,0.9);
}

.intro h3{
text-decoration: underline;
text-decoration-color:rgba(239,204,160,1.00);
text-decoration-style: solid;
color:rgba(89,77,60,1.00);
text-decoration-thickness: 3px;
text-underline-offset: 1%;
padding: 2% 0;
font-size: 1.5em;
}

h3.suggest{
text-decoration-style: wavy;
}

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

.detail{
width: 50%;
padding: 0 5% 0 ;
white-space:normal;
float: left;
}

.detail p{
width: 100%;
border-bottom: none;
padding-bottom: 20px;
font-size: 0.95em;
}

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

}


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

}


@media screen and (max-width: 768px) {
.intro h3{
text-decoration: underline;
text-decoration-color:rgba(239,204,160,1.00);
}

.detail p{
border-bottom: none;
}



@media screen and (max-width: 480px) {
.intro{
width: 96%;
height: auto;
margin: 0 2% 10px 2%;
}

.intro img{
width: 60%;
height: auto;
padding:0px 20% 0 ;
}



.detail{
width: 90%;
margin: 0 5%;
max-width: 300px;
margin-right:10%;
padding: 0 0 10px;
font-size: 0.6em;
}

.detail p{
line-height: 25px;
}

}

}