@charset "utf-8";


/* webseminarB.ver */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

img{
vertical-align:bottom;  
}

body{
background-image: url('images/overview.png');  /* ここに画像のパスを指定 */
background-repeat: repeat;
margin:0;
font-family:serif;
font-size:15px;
color:white;
}


a {
  color: white; /* リンクの文字色を青色に変更 */
  text-decoration: none; /* 下線を消す */
}

a:visited{　
  color: #ba55d3;
}

a:hover {
  text-decoration: underline;
}




ul{
list-style:none;
}



/* ヘッダー */

header{
/*background:rgba(255,255,255,0.4);*/
background:#f5f5f5;
width:100%;
height:50px;
/*
position:absolute;
top:0;
left:0;
/*opacity:0.5;
position:relative;
top:200px;
*/

}

header div{
width:100%;
max-width:950px;
height:50px;
line-height:50px;
/*background:rgba(255,255,255,0.2);*/
background:;
margin:0 auto;
padding:0 0 0 10px;
display:flex;
/*background:rgba(255,255,255,0.5);*/


}

header a{
color:black;
font-size:1.2rem;
text-shadow:2px 2px 7px rgba(0,0,0,1);
}

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

header a{
color:black;
font-size:2vw;
}


}


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

header a{
font-size:3vw;
}


}



/* 

display:flex;
align-items:center;
justify-content:space-between;
 */


/* メイン画像 */

#main_pic{
text-align:center;
background:black;
}

#main_pic img{
width:100%;
max-width:950px;
height:650px;
object-fit:cover;
}

@media screen and (max-width:400px){
#main_pic img{
width:100%;
height:auto;
}

}



/* 開催概要OVER-VIEW */

.overview{
background:#f5f5f5;
width:100%;
max-width:950px;
height:auto;
margin:0 auto;
text-align:center;
padding:30px 70px;
}

.overview_pic_a{
padding:0 0 0 0;
}

.overview_pic_b{
margin:0 0 0 10px;
}

.overview_pic_c{
padding:0 0 0 0;
}


.overview_pic_d{
margin:0 0 0 10px;
}


.overview1{
display: flex;

}


.overview2{
display: flex;
margin:20px 0 0 0;

}

/* 開催概要OVER-VIEW メディアクエリ */

@media screen and (max-width:900px){
.overview{
padding:15px 20px;

}


.overview1{
flex-direction: column; 
}

.overview_pic_a{
width:100%;

}


.overview_pic_b{
width:100%;
margin:5px 0 0 1px;
}

.overview2{
flex-direction: column; 
margin:5px 0 0 0;
}

.overview_pic_c{
width:100%;
}


.overview_pic_d{
width:100%;
margin:5px 0 0 1px;
}


}


/* 登壇者 */
.speaker{
background:#1B1464;
width:100%;
max-width:950px;
height:320px;
display:flex;
justify-content:space-between;
margin:0 auto;
padding:30px 30px;
border-bottom: 5px solid #deb887;
}

.speaker img{

background:#fffafa;
margin:0 0 0 30px;
}

.speaker_zone{
width:100%;
height:auto;
font-size:1.1rem;
border: 3px double #ccc;
background:;
margin:0 0 0 10px;
padding:5px 20px;
}

.speaker_company{
font-size:1.6rem;
}

.speaker_name{
font-size:1.1rem;
}

.speaker_title1{
font-size:1.1rem;
padding:5px 0;
}

.speaker_title{
font-size:1.1rem;
}

.speaker_sentence{
padding:15px 0;
}

/* 登壇者メディアクエリ */

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

.speaker img{
width:50%;
height:;
object-fit:cover;
}

.speaker_company{
font-size:2vw;
}

.speaker_name{
font-size:2vw;
}

.speaker_title1{
font-size:2vw;
padding:5px 0;
}

.speaker_title{
font-size:2vw;

}

.speaker_sentence{
font-size:2vw;
}

}

/* 登壇者メディアクエリスマホ */

@media screen and (max-width:400px){
.speaker{
display:block;
height:auto;
padding:10px 0 10px 20px;

}

.speaker img{
width:90%;
margin:0 0 0 10px;

}

.speaker_zone{
width:90%;
margin-top:10px;

}

.speaker_company{
font-size:1rem;
}

.speaker_name{
font-size:1rem;
}

.speaker_title1{
font-size:1rem;
padding:5px 0;
}

.speaker_title{
font-size:1rem;

}

.speaker_sentence{
font-size:0.8rem;
}


}


/* 申し込みボダン */
.cta{
background:#f5f5f5;
width:100%;
max-width:950px;
height:100px;
text-align:center;
padding:35px 0;
margin:0 auto;

}


.contact{
color:white;
padding:5px 5px;
background:red;
border:5px solid pink;
display:;
width:300px;
height:100px;
border-radius:15px;
padding:5px 10px;
position:relative;
box-shadow:2px 2px 5px rgba(0,0,0,1);
}

.contact:hover{
top:-2px;
left:-2px;
box-shadow:4px 4px 5px rgba(0,0,0,1);
}




@media screen and (max-width:900px){
.contact{
font-size:2vw;
}

}


@media screen and (max-width:600px){
.contact{
font-size:15px;
}

}


/* タイムテーブル */

.timetable{
background:#1B1464;
width:100%;
max-width:950px;
height:auto;
padding:20px 20px;
margin:0 auto;
}

.timetable p{
font-size:1.5rem;
}

.timetable li{
font-size:1.2rem;
margin:10px 0;
}

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

.timetable p{
font-size:2.5vw;
}

.timetable li{
font-size:2.5vw;
margin:10px 0;
}

}

/* タイムテーブルスマホ */

@media screen and (max-width:350px){
.timetable p{
font-size:0.8rem;
}

.timetable li{
font-size:0.8rem;
margin:10px 0;
}



}

/* 


 */


/* 開催情報 */

.info{
color:black;
background:#f5f5f5;
width:100%;
max-width:950px;
height:350px;
display:flex;
justify-content:space-between;
padding:20px 20px;
margin:0 auto;
}


.info-sentence{
width:550px;
}

.info h3{
font-size:1.5rem;
}

.info li{
font-size:1.1rem;
margin:10px 0;
}

.info p{
font-size:1.1rem;
}


.map iframe{
width: 100%; /* 親要素の幅に合わせる */
  height: 300px; /* 高さを400pxに設定 */
  border: none; /* 枠線を消す */
}

/*
*/

/* 開催情報 メディアクエリ */

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

.info{
height:auto;
padding:30px 30px;
}

.info-sentence{
width:50%;
margin:0 5px 0 0;
}

.info h3{
font-size:2.5vw;
}

.info li{
font-size:2.5vw;
margin:10px 0;
}


.info p{
font-size:2vw;
}

.map{
width:50%;
}

}

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

.map iframe{
height:250px; 
}
}


@media screen and (max-width:500px){
.map iframe{
height:200px; 
}
}

/*@media screen and (max-width:380px){
.map iframe{
height:180px; 
}

}
*/


/* 開催情報 メディアクエリスマホ */

@media screen and (max-width:400px){
.info{
display:block;
}

.info-sentence{
width:100%;
margin:0 0 15px 0;
}

.info h3{
font-size:1rem;
}

.info li{
font-size:0.8rem;
margin:10px 0;
}

.info p{
font-size:0.8rem;
}

.map iframe{
width:auto;
height:auto; 
}


}



/* 

.info{
flex-direction:column;
height:auto;
padding:50px 160px;

}

.map iframe{
width: 100%; /* 親要素の幅に合わせる 
min-height:300px; /* 高さを400pxに設定 
border: none; /* 枠線を消す 
}


 */

/* フッター */

footer{
background:#000000;
width:100%;
max-width:950px;
height:auto;
margin:0 auto;
padding:30px 30px;
}

.copyright{
text-align:center;
}

/* フッタークエリ */

@media screen and (max-width:900px){
footer div p{
font-size:2vw;
}

.copyright{
font-size:2vw;
}

}

/* フッタークエリ　スマホ */

@media screen and (max-width:350px){
footer div p{
font-size:0.7rem;
}

.copyright{
font-size:0.5rem;
margin:10px 0 0 0;
}


}


/*

display:flex;
justify-content:space-between;
text-align:;center
margin:0 auto;

width:950px;
height:350px;
background:red;
margin:0 auto;
}


idで指定 
#title {
  color: blue;
  text-align: center;
}

#box1{
width:950px;
height:200px;
background:;
margin:0 auto;
}

section {
border: 1px solid #ccc;
width:950px;
height:200px;
margin:0 auto;
}


/* classで指定 
.paragraph {
  font-size: 18px;
}

.highlight {
  color: red;
  font-weight: bold;
}

.blue{
   color:blue;
}

/* idとclassを両方指定
#box {
width:950px;
height:200px;
margin:0 auto;
background-color: pink;
}

  
}


<img src="images/craft_b.jpg" alt="">
text-align:center;
*/